当你使用 RTC 实现实时音视频通信时,RTC 会使用默认的音视频模块进行视频采集。在一些场景下,你可能会发现默认模块无法满足需求,比如:

在这些场景下,你可以参考本文,将自定义音视频流,交给 RTC 进行编码和传输。

前提条件

你已经集成 v4.36 或更高版本的 RTC SDK,实现了基本的音视频通话。

获取自定义流
音视频设备采集流

通过 getUserMedia 获取音视频设备采集流。

const stream = new navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
});
//获取自定义的 video track 和 audio track
const videoTrack = stream.getVideoTracks()[0];
const audioTrack = stream.getAudioTracks()[0];
typescript
Canvas 中的动画

通过 captureStream 获取 Canvas 中的动画。


const canvas = document.getElementByID('your-canvas-element-ID');

const stream = canvas.captureStream();
const videoTrack = stream.getVideoTracks()[0];
typescript
正在播放的媒体元素

通过 captureStream 获取正在播放的媒体元素

const video = document.getElementByID('your-video-element-ID');

const stream = video.captureStream();
const audioTrack = stream.getAudioTracks()[0];
const videoTrack = stream.getVideoTracks()[0];
typescript
切换视频输入为外部源
  1. RTC 默认使用内部采集源,调用 setVideoSourceType 将视频源切换为外部采集 VIDEO_SOURCE_TYPE_EXTERNAL。
engine.setVideoSourceType(
    VERTC.StreamIndex.STREAM_INDEX_MAIN, 
    VERTC.VideoSourceType.VIDEO_SOURCE_TYPE_EXTERNAL
);
typescript
  1. 调用 setExternalVideoTrack,将外部视频轨道传入 SDK。
// 设置摄像头流自定义的 video track
engin.setExternalVideoTrack(
    StreamIndex.STREAM_INDEX_MAIN,
    videoTrack
);
typescript
切换音频输入为外部源
  1. RTC 默认使用内部采集源,调用 setAudioSourceType 将音频源切换为外部采集 AUDIO_SOURCE_TYPE_EXTERNAL。
engine.setAudioSourceType(
    VERTC.StreamIndex.STREAM_INDEX_MAIN, 
    VERTC.AudioSourceType.AUDIO_SOURCE_TYPE_EXTERNAL
);
typescript
  1. 调用 setExternalAudioTrack,将外部音频轨道传入 SDK。
// 设置麦克风流为自定义的 audio track
engin.setExternalAudioTrack(
    StreamIndex.STREAM_INDEX_MAIN,
    audioTrack
);
typescript