threejs

画出threejs场景后，是否可以共享3d场景呢，当然可以。threejs的场景一般也都在canvas里面，我们可以抓取canvas的图像甚至直接获取h264编码或者vp8等编码直接共享3d场景。

发送h264

2种方式来发送h264：
1 是直接在网页上抓取，通过websocket发送
2是网页通过图像传输到客户端，由客户端编码发送
2种方式各有好处。

1 通过网页canvas.captureStream(20); 来定时采样canvas的图像并且通过websocket发送，
2 本地启动一个客户端，通过图像也可以发送到客户端，然后由客户端解码重新编码成h264，合成本地话筒的声音，发送出去。

<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <script>
     

     document.addEventListener('DOMContentLoaded', () => {
      
      
       document.querySelector('[data-action="goLive"]').addEventListener('click', (e) => {
      
      
         

           //console.log(createRes);
           let mediaRecorder;
           let mediaStream;

           var addr = "ws://127.0.0.1:3000/1001" ;

           const ws = new WebSocket(addr);

           ws.addEventListener('open', (e) => {
      
      
             console.log('WebSocket Open', e);
             mediaStream = document.querySelector('canvas').captureStream(20); // 10 FPS
             mediaRecorder = new MediaRecorder(mediaStream, {
      
      
               mimeType: 'video/webm;codecs=h264',
               videoBitsPerSecond : 500000
             });

             mediaRecorder.addEventListener('dataavailable', (e) => {
      
      
               console.log(e.data);
               ws.send(e.data);
             });

             mediaRecorder.addEventListener('stop', ws.close.bind(ws));

             mediaRecorder.start(500); // Start recording, and dump data every second


           });

           ws.addEventListener('close', (e) => {
      
      
             console.log('WebSocket Close', e);
             mediaRecorder.stop();
           });

         });
       });
     
   </script>
 </head>
 <body>
  <canvas width="640" height="360"></canvas>
   <nav>
     <button data-action="goLive">Go Live</button>
   </nav>
 </body>
</html>

将threejs场景通过h264压缩发送出去

threejs

发送h264

猜你喜欢