自定义视频采集和渲染

功能介绍

实时音视频传输过程中，Agora SDK 通常会启动默认的音视频模块进行采集和渲染。在以下场景中，你可能会发现默认的音视频模块无法满足开发需求：

• app 中已有自己的音频或视频模块
• 希望使用非 Camera 采集的视频源，如录屏数据
• 需要使用自定义的美颜库或有前处理库
• 某些视频采集设备被系统独占。为避免与其它业务产生冲突，需要灵活的设备管理策略

本文介绍如何使用 Agora Web SDK 在项目中实现自定义的视频源和渲染器。

实现方法

在开始自定义视频源和渲染器前，请确保你已在项目中实现了基本的音视频通话或直播功能，详见开始音视频通话或开始互动直播。

自定义音视频源

在创建音视频流 createStream 时，通过 audioSource 和 videoSource 指定自定义的音视频源。例如，你可以通过 mediaStream 方法从 MediaStreamTrack 获得音视频 track，然后指定 audioSource 和 videoSource，如下所示：

navigator.mediaDevices.getUserMedia(
    {video: true, audio: true}
).then(function(mediaStream){
    var videoSource = mediaStream.getVideoTracks()[0];
    var audioSource = mediaStream.getAudioTracks()[0];
    // After processing videoSource and audioSource
    var localStream = AgoraRTC.createStream({
        video: true,
        audio: true,
        videoSource: videoSource,
        audioSource: audioSource
    });
    localStream.init(function(){
        client.publish(localStream, function(e){
            //...
        });
    });
});

自定义渲染器

你可以调用 Stream.getVideoTrack 方法，然后将视频 track 导到 canvas 里自己渲染。

示例代码

我们在 GitHub 提供一个开源的 Agora-Custom-VideoSource-Web-Webpack 示例项目。你可以下载体验，或查看 rtc-client.js 文件中的源代码。