基於canvas+webrtc 實現流式渲染 1

  官方文檔 webrtc ：https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection

  流式渲染最經典的場景是來自於steam 游戲， 可以通過雲服務做gpu的計算，最后將視頻流到客戶端上（看上去很黑科技，其實不好用...）。  作為技術思路 前端方面也可以做類似的嘗試。 

  webrtc 是點對點的服務，主要表現webrtc的通信原理，在本創建兩個通信實例，實時操作canvas，同步到video上

  知識點 ： 

                媒體流(MediaStream)

                   https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream 

               MSE（Media Source Extensions）:

                    媒體源擴展 API（MSE） 提供了實現無插件且基於 Web 的流媒體的功能。使用 MSE，媒體串流能夠通過 JavaScript 創建，並且能通過使用 <audio> 和 <video> 元素進行播放。（圖片視頻直播都是流）

                    場景：基於mse的能力，可以通過blob url 向vedio標簽中灌入二進制流（fpm4格式流）, 或者通過canvas組件實現直播。

              canvas(fabric.js)

              webrtc(adapter.js)

                    1. peer-to-peer 點對點的

          

          

  步驟：

        1. pc2  監聽webrtc ， vedio監聽組件傳入mediastream

const video = document.getElementById('video');

function gotRemoteStream(e) {
  if (video.srcObject !== e.streams[0]) {
    video.srcObject = e.streams[0];
    console.log('pc2 received remote stream');
  }
}

video.addEventListener('loadedmetadata', function() {
  console.log(`Remote video videoWidth: ${this.videoWidth}px,  videoHeight: ${this.videoHeight}px`);
});

    2.pc1 canvans 捕捉畫布，通過webrtc 發送blob

//webrtc 官方文檔  https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection/createOffer

const canvas = document.getElementById('canvas');

const stream = canvas.captureStream();
console.log('Got stream from canvas');


//創建一個新建的  RTCPeerConnection實例，它代表了本地端機器與遠端機器的一條連接。
let pc1 = new RTCPeerConnection(servers);
pc1.onicecandidate = e => onIceCandidate(pc1, e);
pc1.oniceconnectionstatechange = e => onIceStateChange(pc1, e);
stream.getTracks().forEach(
    track => {
        pc1.addTrack(
            track,
            stream
        );
    }
);
// pc1 端通過 createOffer 動創建一個SDP offer，啟動一個新的WebRTC去連接遠程端點
pc1.createOffer(onCreateOfferSuccess, ()=>{}, offerOptions);

function onCreateOfferSuccess(desc) {

    //setlocaldescription( ) 設置本地的描述信息

    pc1.setLocalDescription(desc, () => {}, ()=>{});

    // setRemoteDescription，設置遠端的描述信息。

    pc2.setRemoteDescription(desc, () => {}, ()=>{});

    // pc2端 通過createAnswer 創建出自己的 SDP 描述
    pc2.createAnswer(onCreateAnswerSuccess, ()=>{});
}

function onCreateAnswerSuccess(desc) {

    pc2.setLocalDescription(desc, () => {}, onSetSessionDescriptionError);

    pc1.setRemoteDescription(desc, () => {}, onSetSessionDescriptionError);
}