移动端前后摄像头设置和切换

在 H5 上进行前/后置摄像头设置或者切换时，部分设备/机型可能会产生一些不符合预期的问题，如摄像头切换失败、黑屏等。

本文主要介绍在移动端 H5 上如何正确的使用相关接口设置，保障摄像头设置或切换可以正常操作。

采集时指定

H5 的前/后置摄像头通过 facingMode 进行配置。

方法1. 采集摄像头设备时，可以通过设置 facingMode 参数来指定前/后置摄像头进行视频采集。

以 createCameraVideoTrack 为例：

// 创建 localVideoTrack
localVideoTrack = await ArRTC.createCameraVideoTrack({
  audio: true,
  video: true,
  facingMode: 'user' // 'user' 为前置摄像头，'environment' 为后置摄像头
});

方法2. 采集摄像头设备时，可以通过设置 cameraId 参数来指定前/后置摄像头进行视频采集。

cameraId 可以通过 ArRTC.getCameras 来获取当前的摄像头设备列表。

以 createCameraVideoTrack 为例：

const cameras = await ArRTC.getCameras();

// 创建 localVideoTrack
localVideoTrack = await ArRTC.createCameraVideoTrack({
  audio: true,
  video: true,
  cameraId: cameras[0].deviceId // cameras[0] 为前置摄像头，cameras[1] 为后置摄像头
});

切换前/后摄像头

在成功采集视频设备后，可以通过轨道实例 localVideoTrack 的 setDevice 方法来切换前/后置摄像头进行视频采集。

目前 setDevice 仅支持传入 deviceId，不支持传入 facingMode，未来版本会支持。

const cameras = await ArRTC.getCameras();
// 开启摄像头
localVideoTrack.setDevice(cameras[1].deviceId).then(async ()=>{
  console.log('切换摄像头成功')
}).catch(err =>{
  console.log('切换摄像头失败: ', err)
})