实时音视频
有奖捉虫：行业应用 & 管理与支持文档专题 HOT
文档中心 > 实时音视频 > 高级功能 > 自定义视频采集和渲染 > Web

Web

最近更新时间：2023-11-23 18:00:42

我的收藏

本页目录：

本文主要介绍本地流的自定义采集和音视频流的自定义播放渲染等高阶用法。
说明：
本教程基于 5.0 TRTC Web SDK 实现，若您使用 4.x.x 版本 SDK，可参考 此教程。

自定义采集

默认情况下，trtc.startLocalVideo()，trtc.startLocalAudio() 是开启摄像头和麦克风采集。
如果您需要自定义采集，可以通过 trtc.startLocalVideo() / trtc.startLocalAudio() 方法的 option.videoTrack/option.audioTrack 参数来指定。
获取 audioTrack，videoTrack 通常有以下几种方式：
通过 getUserMedia 采集摄像头和麦克风。
通过 getDisplayMedia 采集屏幕分享。
通过 videoElement.captureStream 采集 video 标签中正在播放的音视频。
通过 canvas.captureStream 采集 canvas 画布中的动画。

采集 video 标签中正在播放的视频

// 检测您当前的浏览器是否支持从 video 元素采集
if (!HTMLVideoElement.prototype.captureStream) {
  console.log('your browser does not support capturing stream from video element');
  return
}
// 获取您页面在播放视频的 video 标签 
const video = document.getElementByID('your-video-element-ID');
// 从播放的视频采集视频流
const stream = video.captureStream();
const audioTrack = stream.getAudioTracks()[0];
const videoTrack = stream.getVideoTracks()[0];

trtc.startLocalVideo({ option:{ videoTrack } });
trtc.startLocalAudio({ option:{ audioTrack } });

采集 canvas 中的动画


// 检测您当前的浏览器是否支持从 canvas 元素采集
if (!HTMLCanvasElement.prototype.captureStream) {
  console.log('your browser does not support capturing stream from canvas element');
  return
}
// 获取您的 canvas 标签 
const canvas = document.getElementByID('your-canvas-element-ID');

// 从 canvas 采集 15 fps 的视频流
const fps = 15;
const stream = canvas.captureStream(fps);
const videoTrack = stream.getVideoTracks()[0];

trtc.startLocalVideo({ option:{ videoTrack } });

自定义播放渲染

在正常情况下，在 startLocalVideo() startRemoteVideo() 时，传入 view 参数，SDK 会在指定的 element 标签下，创建 video 标签播放视频画面。
如果您需要自定义播放渲染，不需要 SDK 播放视频，可参考如下步骤实现：
在 startLocalVideo 或 startRemoteVideo 方法调用时不填 view 参数或 view 参数传入 null
通过 TRTC.getVideoTrack() 方法获取相应的 videoTrack
利用自己的播放器进行视频的播放渲染。
使用这种自定义播放渲染方式后，VIDEO_PLAY_STATE_CHANGED 事件将不会被触发，您需要自行监听视频轨道 MediaStreamTrack 的 mute/unmute/ended 等事件来判断当前视频数据流的状态。
对于远端视频，还需要监听 REMOTE_VIDEO_AVAILABLE，REMOTE_VIDEO_UNAVAILABLE 事件来处理远端视频的生命周期。

自定义渲染本地视频

await trtc.startLocalVideo();
const videoTrack = trtc.getVideoTrack();

// 使用自定义的播放器进行视频播放渲染
const videoElement = document.getElementById('video-element');
videoElement.srcObject = new MediaStream([videoTrack]);
videoElement.play();

自定义渲染远端视频

trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, async ({ userId, streamType }) => {
  // 只拉流，不播放
  await trtc.startRemoteVideo({ userId, streamType })
  const videoTrack = trtc.getVideoTrack({ userId, streamType });

  // 使用自定义的播放器进行视频播放渲染
  const videoElement = document.getElementById('remote-video-element');
  videoElement.srcObject = new MediaStream([videoTrack]);
  videoElement.play();
});

中国站