RTC Engine
  • 产品概述
  • Web
    • 跑通 Demo
    • SDK 快速启动
    • 基础功能
      • 屏幕分享
      • 直播
      • 媒体设备
      • 音量
      • 设置编码配置文件
      • 检测网络质量
      • 检测能力
    • 高级功能
      • 启用 AI 降噪
      • 启用混音
      • 启用水印
      • Enable Virtual Background
      • 启用美颜和特效
      • 数据消息
      • 自定义采集和渲染
    • 接口列表
    • 发布说明
    • 支持平台
    • Web 常见问题
      • 优化多人视频通话
      • 处理自动播放受限
      • 应对防火墙限制
      • 其他
  • Android
    • Run Sample Code
    • Integration
    • 集成
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 设置视频质量
      • 10. 旋转视频
    • Advanced Features
      • 测试网络质量
      • 自定义采集和渲染
      • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • 类型定义
      • 废弃接口
      • 错误码
    • 解决方案
      • 实时合唱 (TUIKaraoke)
        • 快速集成
        • 实施步骤
        • 歌曲同步
        • 歌词同步
        • 语音同步
        • 混流解决方案
        • TRTCKaraoke 相关接口
        • 常见问题
    • 发布说明
  • iOS
    • Run Sample Code
    • Integration
    • 集成
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 设置视频质量
      • 10. 旋转视频
    • Advanced Features
      • 测试网络质量
      • 自定义采集和渲染
      • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • 类型定义
      • 废弃接口
      • ErrorCode
    • 解决方案
      • 快速集成
      • 实施步骤
      • 歌曲同步
      • 歌词同步
      • 语音同步
      • 混流解决方案
      • TRTCKaraoke 相关接口
      • 常见问题
    • 发布说明
  • macOS
    • Run Sample Code
    • Integration
    • 集成
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 共享电脑声音
      • 10. 设置视频质量
      • 11. 旋转视频
    • Advanced Features
      • 测试硬件设备
      • 测试网络质量
      • 自定义采集和渲染
      • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • 类型定义
      • 废弃接口
      • ErrorCode
      • 发布说明
    • 发布说明
  • Windows
    • Run Sample Code
    • Integration
    • 集成
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 设置视频质量
      • 10. 旋转视频
    • Advanced Features
      • 测试硬件设备
      • 测试网络质量
      • 自定义采集和渲染
      • 自定义音频采集和播放
    • 客户端API
      • 产品概述
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • 类型定义
      • 废弃接口
      • 错误码
    • 发布说明
  • Electron
    • 集成
      • 1. 接口示例
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 共享电脑声音
      • 10. 设置视频质量
      • 11. 旋转视频
    • 客户端API
      • 产品概述
      • 错误码
  • Flutter
    • 集成
      • 1. 接口示例
      • 2. 导入 SDK
      • 3. 进入房间
      • 4. 订阅音视频流
      • 5. 发布音视频流
      • 6. 退出房间
      • 7. 检测网络质量
      • 8. 开启屏幕共享
      • 9. 共享电脑声音
      • 10. 设置视频质量
      • 11. 旋转视频
    • 客户端API
      • 产品概述
      • 错误码
  • Unity
    • 集成
      • 1. 接口示例
      • 2. 导入 SDK
    • 客户端API
      • 产品概述
      • 错误码
  • QT
    • 集成
      • 1. 导入 SDK
  • 产品概述
    • 产品概述
  • 概念
  • 产品特性
  • 性能统计
  • 价格中心
    • 免费时长
    • RTC-Engine 套餐
    • 订阅套餐时长计费说明
    • 现收现付
      • 音视频时长计费说明
      • 云端录制计费说明
      • 混流转码与旁路转推计费说明
  • 常见问题
    • 入门常见问题
    • 迁移指南
      • Twilio Video 到 TRTC 的迁移
      • 计费
      • 产品特性
      • UserSig
      • 防火墙限制
      • 如何缩减安装包
      • TRTCCalling Web 相关
      • 音视频质量
      • 其他
RTC Engine
当前内容仅提供英语版本,中文版我们将尽快补充,感谢您的理解。

自定义采集和渲染

This tutorial mainly introduces the advanced usage of custom capturing and custom rendering.

Custom Capturing

By default, trtc.startLocalVideo() and trtc.startLocalAudio() will start camera and microphone, trtc.startScreenShare() will start screen sharing.

You can specify the audioTrack or videoTrack parameters of trtc.startLocalVideo() trtc.startLocalAudio() trtc.startScreenShare() to publish the custom capturing MediaStreamTrack.
// Passing an audioTrack parameter to publish a custom audioTrack.
await trtc.startLocalAudio({ option: { audioTrack }});

// If microphoneId and audioTrack are set at the same time, the capture priority is
// microphoneId > audioTrack, but it is not recommended to mix them.
// Passing an videoTrack parameter to publish a custom videoTrack on the main stream.
await trtc.startLocalVideo({ option: { videoTrack }});

// If you set cameraId, useFrontCamera, videoTrack at the same time, the capture priority is
// cameraId > useFrontCamera > videoTrack, but it is not recommended to mix them.
// Passing an videoTrack parameter to publish a custom videoTrack on the sub stream.
await trtc.startScreenShare({ option: { videoTrack }});
There are usually several ways to capture audioTrack and videoTrack:
Use getUserMedia to capture the camera and microphone.
Use getDisplayMedia to capture screen sharing.
Use videoElement.captureStream to capture the audio and video being played in the video tag.
Use canvas.captureStream to capture the content in the canvas.

Capture the Video Being Played in the Video Element

// Check if your current browser supports capturing streams from video elements
if (!HTMLVideoElement.prototype.captureStream) {
console.log('your browser does not support capturing stream from video element');
return
}
// Get the video tag that is playing video on your page
const video = document.getElementById('your-video-element-ID');
// Capture the video stream from the playing video
const stream = video.captureStream();
const audioTrack = stream.getAudioTracks()[0];
const videoTrack = stream.getVideoTracks()[0];

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

Capture the Content in the Canvas

// Check if your current browser supports capturing streams from canvas elements
if (!HTMLCanvasElement.prototype.captureStream) {
console.log('your browser does not support capturing stream from canvas element');
return
}
// Get your canvas tag
const canvas = document.getElementById('your-canvas-element-ID');

// Capture a 15 fps video stream from the canvas
const fps = 15;
const stream = canvas.captureStream(fps);
const videoTrack = stream.getVideoTracks()[0];

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

Custom Rendering

By default, when calling trtc.startLocalVideo() or trtc.startRemoteVideo(), you need to pass in the view parameter. The SDK will create a video element under the specified view element to play the video.

If you need to customize the rendering, and do not need the SDK to play the video, you can refer to the following steps:
1. Do not fill in the view parameter or pass in null when calling the trtc.startLocalVideo() or trtc.startRemoteVideo().
2. Listen for the TRTC.EVENT.TRACK event, the SDK will trigger this event when there is a new MediaStreamTrack, then you can get the MediaStreamTrack for custom rendering.
3. Use your own player for video rendering.
4. If you use custom rendering, the VIDEO_PLAY_STATE_CHANGED event will not be triggered. You need to listen for the mute/unmute/ended events of the video track MediaStreamTrack to detect the state of the video track.
trtc.on(TRTC.EVENT.TRACK, event => {
// userId === '' means event.track is a local track, otherwise it's a remote track
const isLocal = event.userId === '';
// Usually the sub stream is a screen-sharing video stream.
const isSubStream = event.streamType === TRTC.TYPE.STREAM_TYPE_SUB;
const mediaStreamTrack = event.track;
const kind = event.track.kind; // audio or video
})