自定义视频采集和渲染

功能介绍

实时视频传输过程中，anyRTC SDK 通常会启动默认的视频模块进行采集。在一些场景中，你会发现默认的视频模块无法满足开发需求：

• 项目中已有自己的视频采集模块
• 希望使用非摄像头采集的视频源，比如 Canvas 数据、视频采集卡等
• 经过处理后的视频（美颜等）
• ...

本文介绍如何使用 anyRTC Web SDK 满足以上场景的开发需求。

实现方法

自定义视频采集

SDK 提供 createCustomVideoTrack 方法，支持通过传入一个 MediaStreamTrack 对象来创建本地视频轨道，通过这个方法实现自定义视频采集。

通过调用 getUserMedia 方法来获取 MediaStreamTrack 对象，再将该对象传入 createCustomVideoTrack 创建可以在 SDK 中使用的本地视频轨道对象。

示例：

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then((mediaStream) => {
    const videoMediaStreamTrack = mediaStream.getVideoTracks()[0];
    // Create a custom video track
    return ArRTC.createCustomVideoTrack({
      mediaStreamTrack: videoMediaStreamTrack,
    });
  })
  .then((localVideoTrack) => {
    // ...
  });

同样，你也可以利用 HTMLMediaElement.captureStream 或 HTMLCanvasElement.captureStream 来获取 MediaStreamTrack 对象。

视频渲染

通过 createCustomVideoTrack 方法创建可以在 SDK 中使用的本地视频轨道后，就可以使用 LocalVideoTrack.play 方法渲染到 UI 界面

localVideoTrack.play("<ELEMENT_ID_IN_DOM>")

API 参考

• createCustomVideoTrack
• LocalVideoTrack