摘要：
webrtc是点对点的服务，主要表现webrtc的通信原理，在本创建两个通信实例，实时操作canvas，同步到video上知识点：媒体流https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStreamMSE:媒体源扩展API提供了实现无插件且基于Web的流媒体的功能。canvaswebrtc1.peer-to-peer点对点的步骤：1.pc2监听webrtc，vedio监听组件传入mediastreamconstvideo=document.getElementById;functiongotRemoteStream{if(video.srcObject!==e.streams[0]){video.srcObject=e.streams[0];console.log;}}video.addEventListener;2.pc1canvans捕捉画布，通过webrtc发送blob//webrtc官方文档https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection/createOfferconstcanvas=document.getElementById;conststream=canvas.captureStream();console.log;//创建一个新建的RTCPeerConnection实例，它代表了本地端机器与远端机器的一条连接。
官方文档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);
}