- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 组件介绍（TUICallKit）
- 开通服务（TUICallKit）
- 跑通 Demo（TUICallKit）
- 快速接入（TUICallKit）
- Chat 集成通话能力（TUICallKit）
- 界面定制（TUICallKit）
- 离线唤醒（TUICallKit）
- AI 降噪（TUICallKit）
- 虚拟背景（TUICallKit）
- 会话聊天（TUICallKit）
- 云端录制（TUICallKit）
- 更多特性（TUICallKit）
- 解决方案（TUICallKit）
- 服务端 API（TUICallKit）
- 客户端 API（TUICallKit）
- 错误码表（TUICallkit）
- 发布日志（TUICallKit）
- 常见问题（TUICallKit）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- Live 视频直播计费说明
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 组件介绍（TUICallKit）
- 开通服务（TUICallKit）
- 跑通 Demo（TUICallKit）
- 快速接入（TUICallKit）
- Chat 集成通话能力（TUICallKit）
- 界面定制（TUICallKit）
- 离线唤醒（TUICallKit）
- AI 降噪（TUICallKit）
- 虚拟背景（TUICallKit）
- 会话聊天（TUICallKit）
- 云端录制（TUICallKit）
- 更多特性（TUICallKit）
- 解决方案（TUICallKit）
- 服务端 API（TUICallKit）
- 客户端 API（TUICallKit）
- 错误码表（TUICallkit）
- 发布日志（TUICallKit）
- 常见问题（TUICallKit）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- Live 视频直播计费说明
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
本文主要介绍本地流的自定义采集和音视频流的自定义播放渲染等高阶用法。
自定义采集
如果您需要自定义采集，可以通过
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 } });
自定义播放渲染
如果您需要自定义播放渲染，不需要 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();});
是
否
本页内容是否解决了您的问题？