如今IT發展迅速,大多數朋友不管是什麼行業或者崗位都在或多或少的學習一些IT方面的知識,而web前端又是最受歡迎的一種。今天小猿圈web前端老師爲你分享一下websocket如何實現直播功能,感興趣的朋友一塊兒看看吧。javascript
WebSocket是HTML5開始提供的一種在單個TCP鏈接上進行全雙工通信的協議。前端
在WebSocketAPI中,瀏覽器和服務器只須要作一個握手的動做,而後,瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。java
瀏覽器經過JavaScript向服務器發出創建WebSocket鏈接的請求,鏈接創建之後,客戶端和服務器端就能夠經過TCP鏈接直接交換數據。web
當你獲取WebSocket鏈接後,你能夠經過send()方法來向服務器發送數據,並經過onmessage事件來接收服務器返回的數據。canvas
作的過程當中,主要的思惟是:在錄像頁面利用setTimeout()每隔固定的時間經過canvas將視頻轉化爲一幀一幀的圖像,而後用websocket的socket.send()將圖片數據發送給服務器。在直播頁面就是先建立一個<img>的結構,經過websocket的socket.onmessage()獲取到圖像數據,並展現<img>標籤上,造成直播。瀏覽器
錄像頁面HTML結構服務器
<videoautoplayid="sourcevid"style="width:1600;height:900px"></video>websocket
<canvasid="output"style="display:none"></canvas>併發
錄像頁面jsdom
<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,但願對你有所幫助。