Web 端自定义音视频采集

当你使用 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];

Canvas 中的动画

通过 captureStream 获取 Canvas 中的动画。

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

const stream = canvas.captureStream();
const videoTrack = stream.getVideoTracks()[0];

正在播放的媒体元素

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

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

const stream = video.captureStream();
const audioTrack = stream.getAudioTracks()[0];
const videoTrack = stream.getVideoTracks()[0];

切换视频输入为外部源

1. RTC 默认使用内部采集源，调用 setVideoSourceType 将视频源切换为外部采集 VIDEO_SOURCE_TYPE_EXTERNAL。

engine.setVideoSourceType(
    VERTC.StreamIndex.STREAM_INDEX_MAIN, 
    VERTC.VideoSourceType.VIDEO_SOURCE_TYPE_EXTERNAL
);

2. 调用 setExternalVideoTrack，将外部视频轨道传入 SDK。

// 设置摄像头流自定义的 video track
engin.setExternalVideoTrack(
    StreamIndex.STREAM_INDEX_MAIN,
    videoTrack
);

切换音频输入为外部源

1. RTC 默认使用内部采集源，调用 setAudioSourceType 将音频源切换为外部采集 AUDIO_SOURCE_TYPE_EXTERNAL。

engine.setAudioSourceType(
    VERTC.StreamIndex.STREAM_INDEX_MAIN, 
    VERTC.AudioSourceType.AUDIO_SOURCE_TYPE_EXTERNAL
);

2. 调用 setExternalAudioTrack，将外部音频轨道传入 SDK。

// 设置麦克风流为自定义的 audio track
engin.setExternalAudioTrack(
    StreamIndex.STREAM_INDEX_MAIN,
    audioTrack
);