这篇文章主要是讲如何在web端实现自定义采集视频的方法。
使用场景
在有些开发场景下，我可能在视频的时候不需要播放摄像头的内容，我需要播放页面上某一块区域的内容（动画、视频等）。这个时候就需要使用到自定义视频采集的方式去实现了。
实现步骤
步骤2：获取自定义区域视频流数据
这里主要是使用的是WebRTC的HTMLMediaElement.captureStream()方法，抓取canvas动画效果。
代码语言：javascript复制tips: captureStream方法在抓取canvas的视频流时，canvas必须要有动画效果，如果没有的话，画面会是黑屏
let canvas = document.querySelector('#pdfCanvas').querySelector('canvas');
let canvasStream = canvas.captureStream();
let track = canvasStream.getTracks()[0];步骤2：创建本地流并设置视频流
代码语言：javascript复制// 从外部App指定的音视频源创建本地音视频流
//我做的这一步的话，是想录本地的麦克风的音，然后录canvas的动画
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => {
const audioTrack = stream.getAudioTracks()[0];
// 对audioTrack和videoTrack处理之后，
this.client.localStream = TRTC.createStream({
audioSource: audioTrack,
videoSource: track,
mirror: false
});
});还可以通过调用addTrack和replaceTrack方法进行切换视频轨道，但是这两个方法要注意的一点是必须在本地流初始化（
initialize）完毕之后进行，否则会报错。
总结
在web端自定义采集视频的方法还是比较局限的，因为要依赖webRTC，兼容性上也不怎么强，如果使用场景比较复杂的话，还是推荐使用electron。
