You need to enable JavaScript to run this app.
导航
Web 端自定义音视频采集
最近更新时间:2024.06.24 11:28:07首次发布时间:2022.08.01 16:22:34

当你使用 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
);
  1. 调用 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
);
  1. 调用 setExternalAudioTrack,将外部音频轨道传入 SDK。
// 设置麦克风流为自定义的 audio track
engin.setExternalAudioTrack(
    StreamIndex.STREAM_INDEX_MAIN,
    audioTrack
);