怎么在HTML5中使用websocket实现直播功能

这篇文章给大家介绍怎么在HTML5中使用websocket实现直播功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

录像页面html结构

<video autoplay id="sourcevid" style="width:1600;height:900px"></video>      <canvas id="output" style="display:none"></canvas>

录像页面js

<script type="text/javascript" charset="utf-8">          //创建一个+实例          var Socket = new WEBSocket("ws://"+document.domain+":8080");          var back = document.getElementById('output');          //返回一个用于在画布上绘图的环境。          var backcontext = back.getContext('2d');          var video = document.getElementsByTagName('video')[0];          var success = function(stream){              //获取视屏流，转换为url              video.src = window.URL.createObjectURL(stream);          }          //打开socket          socket.onopen = function(){              draw();              console.log("open success")          }          // 将视频帧绘制到Canvas对象上,Canvas每100ms切换帧，形成肉眼视频效果            var draw = function(){              try{                  backcontext.drawImage(video,0,0, back.width, back.height);              }catch(e){                  if (e.name == "NS_ERROR_NOT_AVAILABLE") {                      return setTimeout(draw, 100);                  } else {                      throw e;                  }              }              if(video.src){                  // Canvas的内容转化成PNG data URI并发送到服务器，0.5为和压缩系数                  socket.send(back.toDataURL("image/jpeg", 0.5));              }              setTimeout(draw, 100);          }          //调用设备的摄像头,并将资源放入video标签          navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||          navigator.mozGetUserMedia || navigator.msGetUserMedia;          navigator.getUserMedia({video:true, audio:false}, success, console.log);      </script>

直播页面HTML结构：

<img id="receiver" style="width:1600px;height:900px"/>

直播页面JS

<script type="text/javascript" charset="utf-8">          //创建一个socket实例          var receiver_socket = new WebSocket("ws://"+document.domain+":8008");          alert("ws://"+document.domain+":8008")          var image = document.getElementById('receiver');           // 监听消息          receiver_socket.onmessage = function(data)          {              image.src=data.data;          }      </script>

关于怎么在HTML5中使用websocket实现直播功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。