2020-12-02
思維導圖
image.png
第一步:播放本地錄像
源碼路徑：https://github.com/WontonSkin/webrtc-sample/tree/master/mySamples/video-video
<!-- playsinline 標志視頻將被“inline”播放，即在元素的播放區(qū)域內稍坯。若無此屬性窟她，部分移動瀏覽器可能會全屏播放齿梁。 -->
<!-- controls 如果出現(xiàn)該屬性沫勿，則向用戶顯示控件筒繁，比如播放按鈕噩斟。 -->
<!-- loop 如果出現(xiàn)該屬性库倘，則當媒介文件完成播放后再次開始播放临扮。 -->
<!-- muted 如果出現(xiàn)該屬性，視頻的音頻輸出為靜音教翩。 -->
<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 如果出現(xiàn)該屬性杆勇，則視頻在就緒后馬上播放。 -->
<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上注冊特定事件類型的事件處理程序
// 當瀏覽器能夠開始播放指定的音頻/視頻時彪笼，會發(fā)生 canplay 事件钻注；相關事件還有playing/play/pause等等
// 箭頭函數(shù)，(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => { 函數(shù)聲明 }
// 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;
});
