2020-12-02
思维导图
image.png
第一步:播放本地录像
源码路径：https://github.com/WontonSkin/webrtc-sample/tree/master/mySamples/video-video
<!-- playsinline 标志视频将被“inline”播放，即在元素的播放区域内。若无此属性，部分移动浏览器可能会全屏播放。 -->
<!-- controls 如果出现该属性，则向用户显示控件，比如播放按钮。 -->
<!-- loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 -->
<!-- muted 如果出现该属性，视频的音频输出为静音。 -->
<video id="leftVideo" playsinline controls loop muted>
<source src="../video/chrome.webm" type="video/webm"/>
<source src="../video/chrome.mp4" type="video/mp4"/>
<p>This browser does not support the video element.</p>
</video>
<!-- autoplay 如果出现该属性，则视频在就绪后马上播放。 -->
<video id="rightVideo" playsinline autoplay></video>
// leftVideo，为HTML媒体元素接口，HTMLMediaElement
const leftVideo = document.getElementById('leftVideo');
const rightVideo = document.getElementById('rightVideo');
// HTMLMediaElement从父级 HTMLElement, Element, Node, 和 EventTarget 继承属性
// EventTarget.addEventListener()方法，在EventTarget上注册特定事件类型的事件处理程序
// 当浏览器能够开始播放指定的音频/视频时，会发生 canplay 事件；相关事件还有playing/play/pause等等
// 箭头函数，(参数1, 参数2, …, 参数N) => { 函数声明 }
// leftVideo.addEventListener('canplay', () => {
leftVideo.addEventListener('play', () => {
//let 声明的变量只在 let 命令所在的代码块内有效
let stream;
const fps = 0;
// HTMLMediaElement.captureStream()属性，返回MediaStream对象(对实时流捕获返回的MediaStream对象)。
if (leftVideo.captureStream) {
stream = leftVideo.captureStream(fps);
} else if (leftVideo.mozCaptureStream) {
stream = leftVideo.mozCaptureStream(fps);
} else {
console.error('Stream capture is not supported');
stream = null;
}
// HTMLMediaElement.srcObject 属性设定或返回一个媒体对象
rightVideo.srcObject = stream;
});
