功能介绍

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

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

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

点击在线体验试用自定义视频源功能。

实现方法

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

自定义音视频源

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

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){
            //...
        });
    });
});
MediaStreamTrack 对象是指浏览器原生支持的 MediaStreamTrack 对象,具体用法和浏览器支持状况请参考 MediaStreamTrack API 说明

自定义渲染器

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

示例代码

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