云端采集器( createStream流的创建方式是使用SDK的默认采集方式的)

　　云端采集器(

createStream流的创建方式是使用SDK的默认采集方式的)

　　const localStream = TRTC.createStream({ userId, audio: false, screen: true });

localStream.initialize().then(() => {

// local stream initialized success

});

　　以上两个本地流是使用 SDK 默认的 采集 方法创建的。为了方便开发者对音视频流进行预处理，createStream支持从外部音视频源创建本地流。通过这种方式创建本地流，开发者可以实现自定义采集，例如：

　　采集页面当前播放的视频源

　　// 检测您当前的浏览器是否支持从 video 元素采集 stream

const isVideoCapturingSupported = () => {

['captureStream', 'mozCaptureStream', 'webkitCaptureStream'].forEach((item) => {

if (item in document.createElement('video')) {

return true;

}

});

return false;

};

// 检测您当前的浏览器是否支持从 video 元素采集 stream

if (!isVideoCapturingSupported()) {

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];

const localStream = TRTC.createStream({ userId, audioSource: audioTrack, videoSource: videoTrack });

// 请确保视频属性跟外部传进来的视频源一致，否则会影响视频通话体验

localStream.setVideoProfile('480p');

localStream.initialize().then(() => {

// local stream initialized success

});

　　采集 画布中的*敏*感*词*

　　// 检测您当前的浏览器是否支持从 canvas 元素采集 stream

const isCanvasCapturingSupported = () => {

['captureStream', 'mozCaptureStream', 'webkitCaptureStream'].forEach((item) => {

if (item in document.createElement('canvas')) {

return true;

}

});

return false;

};

// 检测您当前的浏览器是否支持从 canvas 元素采集 stream

if (!isCanvasCapturingSupported()) {

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];

const localStream = TRTC.createStream({ userId, videoSource: videoTrack });

// 请确保视频属性跟外部传进来的视频源一致，否则会影响视频通话体验

localStream.setVideoProfile('480p');

localStream.initialize().then(() => {

// local stream initialized success

});

　　自定义播放渲染

　　对于TRTC.createStream()创建并初始化的本地流或Client.on('stream-added')接收到的远程流，可以通过音视频流对象的方法进行音视频播放和渲染。Stream .play() 会自动创建一个音频播放器和一个视频播放器，并将对应的 / 标签插入到 App 传下来的 Div 容器中。

　　如果App想使用自己的播放器，可以绕过Stream.play()/stop()方法调用，通过/方法获取对应的音视频轨道，然后使用自己的播放器播放和渲染音频和视频。使用该自定义播放渲染方式后，不会触发Stream.on('player-state-changed')事件，App需要自行*敏*感*词*音视频轨MediaStreamTrack的静音/取消静音/结束事件判断当前音视频数据流的状态。

　　同时，App层需要*敏*感*词*Client.on('stream-added')、Client.on('stream-updated')和Client.on('stream-removed')等事件来处理音频和视频流的生命周期。

　　注意：