小猿圈简述HTML5中的websocket如何实现直播功能
现在IT发展迅速，大多数朋友无论是什么行业或者岗位都在或多或少的学习一些IT方面的知识，而web前端又是最受欢迎的一种。今天小猿圈web前端老师为你分享一下websocket如何实现直播功能，感兴趣的朋友一起看看吧。https://upload-images.jianshu.io/upload_images/15397392-38078ecf96e6ef5b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。当你获取WebSocket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。做的过程中，主要的思维是：在录像页面利用setTimeout()每隔固定的时间通过canvas将视频转化为一帧一帧的图像，然后用websocket的socket.send()将图片数据发送给服务器。在直播页面就是先创建一个<img>的结构，通过websocket的socket.onmessage()获取到图像数据，并展示<img>标签上，形成直播。录像页面HTML结构<videoautoplayid="sourcevid"style="width:1600;height:900px"></video><canvasid="output"style="display:none"></canvas>录像页面js<scripttype="text/javascript"charset="utf-8">//创建一个+实例varsocket=newWebSocket("ws://"+document.domain+":8080");varback=document.getElementById('output');//返回一个用于在画布上绘图的环境。varbackcontext=back.getContext('2d');varvideo=document.getElementsByTagName('video');varsuccess=function(stream){//获取视屏流，转换为urlvideo.src=window.URL.createObjectURL(stream);}//打开socketsocket.onopen=function(){draw();console.log("opensuccess")}//将视频帧绘制到Canvas对象上,Canvas每100ms切换帧，形成肉眼视频效果vardraw=function(){try{backcontext.drawImage(video,0,0,back.width,back.height);}catch(e){if(e.name=="NS_ERROR_NOT_AVAILABLE"){returnsetTimeout(draw,100);}else{throwe;}}if(video.src){//Canvas的内容转化成PNGdataURI并发送到服务器，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结构：<imgid="receiver"style="width:1600px;height:900px"/>直播页面JS<scripttype="text/javascript"charset="utf-8">//创建一个socket实例varreceiver_socket=newWebSocket("ws://"+document.domain+":8008");alert("ws://"+document.domain+":8008")varimage=document.getElementById('receiver');//监听消息receiver_socket.onmessage=function(data){image.src=data.data;}</script>最后想要了解更多关于web前端开发方面内容的小伙伴，请关注小猿圈怎么上官网，小猿圈竭力为你提供更全面更有竞争力的视频web前端自学②群：738735873，希望对你有所帮助。
页:
[1]