小猿圈简述HTML5中的websocket如何实现直播功能
现在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，希望对你有所帮助。
