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;
});

第二步

第三步