腾讯云实时音视频Web_音视频解决方案_同尘科技

本文主要介绍本地流的自定义采集和音视频流的自定义播放渲染等高阶用法。说明：本教程基于 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();});



对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案