H5 或者手机访问 Web，可以通过手机后置摄像头获取视频流吗？

技术指南 Web
, ,
1

H5 项目或者用户手机访问 Web 项目，是可以通过手机后置摄像头发布视频流的。

实现方案

  1. 通过 ‘@rongcloud/plugin-rtc’ 会向外暴露 device 模块获取设备列表（需要对页面授权麦克风等媒体设备的访问权限，否则无法获取到）。

    import { device } from '@rongcloud/plugin-rtc'

// 获取 Microphone
const microphones = await device.getMicrophones();

// 获取摄像头列表
const cameras = await device.getCameras();

// 获取扬声器设备列表
const speakers = await device.getSpeakers()

  2. 在获取本地资源时就通过传入 micphoneId、cameraId 来指定对应的设备，micphoneId、cameraId 可从上一步骤的列表获取。SDK 无法区分哪个设备是前置或后置，一般默认数据为第一个是前置，第二个是后置

    // 获取音频时指定设备 ID
const { code, track: audioTrack } = await rtcClient.createMicrophoneAudioTrack('RongCloudRTC', { micphoneId: '' })

    // 获取视频时指定设备 ID
const { code, track: videoTrack } = await rtcClient.createCameraVideoTrack('RongCloudRTC', { cameraId: '' })

    // 同时获取音频、视频时指定设备 ID
const { code, tracks } = await rtcClient.createMicrophoneAndCameraTracks('RongCloudRTC', {
  audio: { micphoneId: '' },
  video: { cameraId: '' }
})

如何实现切换摄像头？

进行摄像头切换，可以通过不同的摄像头设备 ID、相同的 tag 获取视频流，之后发布即可，SDK 会覆盖同 tag 的视频流进行推流。

注意：发布新的流后，原视频流需开发者手动销毁，不然相关摄像头设备会保持打开状态。