zoukankan      html  css  js  c++  java
  • 基于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);
    }
    

      

        

  • 相关阅读:
    TestNG入门教程-6-enabled和priority属性
    TestNG入门教程-5-timeOut属性
    TestNG入门教程-4-Testng中注释简介
    Unicode、UTF-8 和 ISO8859-1到底有什么区别
    java数目
    sql必知必会-总结篇
    mysql监控、性能调优及三范式理解
    loadrunner常用函数总结
    loadrunner监控度量项及中文解释
    linux下crontab的使用实现
  • 原文地址:https://www.cnblogs.com/breakdown/p/15089446.html
Copyright © 2011-2022 走看看