vue实现 前置/后置 摄像功能

vue切换在手机浏览器中切换手机的前置、后置摄像头

使用原理是 navigator.mediaDevices 中的 navigator.mediaDevices.getUserMedia

navigator.mediaDevices 是WebRTC通讯中部分API，它提供了一种访问用户设备的媒体输入输出的方式。通过这个API，开发者可以轻松地获取到用户的摄像头、麦克风等媒体设备，并进行实时音视频数据的采集和处理。

主要实现方法，使用以下代码：

需要注意的点就是（后置）

navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: { facingMode: { exact: "environment" } },
    })

和这个（前置）

 navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: { facingMode: { exact: "user" } },
    })

正常写就是

后置摄像头

const getCamera = () => {
  navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: { facingMode: { exact: "environment" } },
    })
    .then((stream) => {
      // 摄像头开启成功
      console.log(videoRef);
      videoRef.value.srcObject = stream;
      videoRef.value.play();
 
    })
    .catch((err) => {
      console.log(err);
    });
}

前置摄像头使用以下代码

const getCamera = () => {
navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: { facingMode: { exact: "user" } },
    })
    .then((stream) => {
      // 摄像头开启成功
      console.log(videoRef);
      videoRef.value.srcObject = stream;
      videoRef.value.play();

    })
    .catch((err) => {
      console.log(err);
    });
}

只需要区分 user（前置）和 environment（后置）即可，本文主要是想分享一下这个api的用法
ヾ(￣▽￣)Bye~Bye~