音视频通话

桌面摄像头

功能介绍

将屏幕、窗口或浏览器标签页的画面作为一路「摄像头」输入,与普通视频设备一样可参与 推送视频流同时推送多路视频流,供远端通过 订阅并显示视频 观看。适用于需要把屏幕内容当作视频源推送到房间、而非使用 发起屏幕共享 能力的场景。

须先通过浏览器 getDisplayMedia 获取屏幕 MediaStream,再调用 CRVideo_AddStreamCam 注册为 stream 摄像头。AddStreamCam 等通用说明见 视频设备管理:5. stream 与 canvas 摄像头

注意:

须在成功进入房间后,方可添加并使用桌面摄像头。

1. 添加桌面摄像头

  1. 调用 navigator.mediaDevices.getDisplayMedia(或兼容封装)向用户弹出系统选择框,选择要采集的屏幕、窗口或标签页,得到 MediaStream
  2. 调用 CRVideo_AddStreamCam(videoStream, videoName) 将该流添加为一路视频设备,返回值为 videoID
  3. 通过 CRVideo_GetAllVideoInfo 可查询本端设备列表,与其它摄像头一并管理。
// 示例:添加桌面摄像头(具体 constraints 按业务与浏览器能力配置)
navigator.mediaDevices.getDisplayMedia({ video: true })
    .then(function (stream) {
        var videoID = CRVideo_AddStreamCam(stream, "桌面摄像头");
        // 可设为默认设备、OpenVideo 推送等,参见视频设备管理与推送视频流
    })
    .catch(function (err) {
        // 用户取消选择或无权限等
    });

说明:

  • 浏览器须支持 getDisplayMedia(桌面端一般需 Chrome 72+、Firefox 66+、Safari 13+、Edge 80+ 等,参见 浏览器兼容性说明)。
  • 每次 AddStreamCam 会得到新的 videoID;若需更换采集源且保持 videoID 不变,应使用 CRVideo_UpdateStreamCam,不要先移除再添加。
  • 用户在系统/UI 中结束共享后,对应 MediaStream 可能失效,业务层宜监听轨道 ended 等事件并做移除或重新采集。

相关 API 请参考:

2. 更新桌面摄像头

需要切换共享的屏幕/窗口时,重新 getDisplayMedia 获取新的 MediaStream,再调用 CRVideo_UpdateStreamCam(videoID, newStream),可在保持原 videoID 的前提下更新画面来源。

相关 API 请参考:

3. 移除桌面摄像头

调用 CRVideo_RemoveStreamVideo(videoID)(或 CRVideo_RemoveStreamCam)移除该路 stream 摄像头。移除后可通过 CRVideo_VideoDevChanged 刷新设备列表(见 视频设备管理)。

相关 API 请参考:

4. 使用方式

  • 添加成功后与系统摄像头相同:可 CRVideo_SetDefaultVideo 指定默认设备,配合 CRVideo_OpenVideo 推送;多路推送见 同时推送多路视频流
  • 远端通过视频 UI 组件 setVideo(UID, videoID) 订阅该路画面。

5. 与「屏幕共享」的对比

对比项 桌面摄像头 屏幕共享
分享数量 房间内每人可同时添加多路 stream 摄像头(含桌面源) 同一房间同一时间仅一人能屏幕共享

更多屏幕共享能力见 发起屏幕共享观看屏幕共享屏幕共享标注