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);
    }
    

      

        

  • 相关阅读:
    XML操作
    C# 相等(==,Equals)
    VS插件 选项卡竖排列
    springcloud版本号
    @EnableDiscoveryClient和@EnableEurekaClient的区别
    在mvn构建时直接将项目jar包做成服务第三方工具
    java引用的强制转型
    java基础类型的byte为长度
    springboot访问服务器本地静态文件的方法
    nginx反向代理和负载均衡的基本配置
  • 原文地址:https://www.cnblogs.com/breakdown/p/15089446.html
Copyright © 2011-2022 走看看