这篇文章给大家介绍怎么在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实现直播功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。