web通過轉發視頻信息方式實現視頻聊天

大概流程就是獲取視頻流，推送服務器，轉發到另一邊

1. 藉助webrtc獲取瀏覽器的攝像頭

2. 視頻流的切片、轉base64發送

try {
        var options = {mimeType: mimeType};
        mediaRecorder = new MediaRecorder(stream, options);
    } catch (e) {
        console.error('Exception while creating MediaRecorder: ' + e);
        log('Exception while creating MediaRecorder: ' + e);
        alert('Exception while creating MediaRecorder: '
            + e + '. mimeType: ' + options.mimeType);
        return;
    }
    mediaRecorder.start(1000);//視頻流會主動切片調用下面的方法
    mediaRecorder.ondataavailable = handleDataAvailable;//切片後轉換爲base64發送


function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        console.log('正在發送數據...');
            var reader = new FileReader();
                reader.readAsDataURL(event.data);
                reader.onload = function (e) {
                    sendVideo(reader.result);
                    }
    }
}

3. 接收轉發過來的流，通過MediaSource和SourceBuffer解決接收問題

var oSourceBuffer, oMediaSource;
	 var mimeCodec='video/webm; codecs="vp8,opus"';
	 if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
    	 console.log("oMediaSource");
    	 oMediaSource = new MediaSource();
    	 var url = URL.createObjectURL(oMediaSource);
    	 remoteVideoVid.src = url;
         oMediaSource.addEventListener('sourceopen', sourceOpen);
    	} else {
    	  console.log("The Media Source Extensions API is not supported.")
      }
     function sourceOpen () {
         console.log("oMediaSource2:"+this.readyState); // open
         oSourceBuffer = oMediaSource.addSourceBuffer(mimeCodec);
         oSourceBuffer.addEventListener('updateend', streamPlay);
       };
       
      function streamPlay(e) {
    	  remoteVideoVid.play();
       }
	  //視頻流接收
	 function remotStream(stream){
		 console.log(index);
		 if (oSourceBuffer) {
			 oSourceBuffer.appendBuffer(dataURItoArray(stream));
            } else {
                console.log('no init sourceBuffer');
          }
		 if(index%3!=0){
			 console.log("skip..."+index);
			 index=index+1;
			 //remoteVideoPlayer.reset();
			 return;
		 }
		 if(index==0){
		    console.log("succ:"+successStream);
		 }else{
			 console.log("stream:"+stream);
		 }
		 index=index+1;
		 console.log("accept audio...");
		 console.log(dataURItoBlob(stream));
		 return;
		 }

4. 效果圖（還有點不太穩定）

5. 參考 https://blog.csdn.net/liulangdeyue/article/details/38944679

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

6. PingPangChat
   歡迎star