现在IT发展迅速,大多数朋友无论是什么行业或者岗位都在或多或少的学习一些IT方面的知识,而web前端又是最受欢迎的一种。今天小猿圈web前端老师为你分享一下websocket如何实现直播功能,感兴趣的朋友一起看看吧。
WebSocket是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')[0]; varsuccess=function(stream){ //获取视屏流,转换为url video.src=window.URL.createObjectURL(stream); } //打开socket socket.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,希望对你有所帮助。
|