• 周六. 10月 8th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

基于canvas+webrtc 实现流式渲染 1

admin

11月 28, 2021

  官方文档 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);
}

  

    

发表回复

您的电子邮箱地址不会被公开。