小猿圈簡述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，但願對你有所幫助。