扣丁學堂HTML5培訓簡述HTML5中的websocket如何實現直播功能

時間 2019-12-05

標籤學堂 html5 html 培訓簡述 websocket 如何實現直播功能欄目 HTML5 简体版

原文原文鏈接

本篇文章扣丁學堂HTML5培訓小編給讀者們分享一下HTML5中的websocket如何實現直播功能，對HTML5開發感興趣或者是想要學習HTML5開發技術的小夥伴就隨小編來了解一下吧。javascript

WebSocket是HTML5開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。java

在WebSocket API中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。web

瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據。canvas

當你獲取 Web Socket 鏈接後，你能夠經過send()方法來向服務器發送數據，並經過onmessage事件來接收服務器返回的數據。瀏覽器

作的過程當中，主要的思惟是：在錄像頁面利用setTimeout()每隔固定的時間經過canvas將視頻轉化爲一幀一幀的圖像，而後用websocket的socket.send()將圖片數據發送給服務器。在直播頁面就是先建立一個<img>服務器

的結構，經過websocket的socket.onmessage()獲取到圖像數據，並展現微信

need-to-insert-imgwebsocket

<img>標籤上，造成直播。併發

need-to-insert-imgdom

錄像頁面HTML結構

<canvas id="output" style="display:none"></canvas>

錄像頁面js

//建立一個+實例 

    var socket = new WebSocket("ws://"+document.domain+":8080"); 

    var back = document.getElementById('output'); 

    //返回一個用於在畫布上繪圖的環境。 

    var backcontext = back.getContext('2d'); 

    var video = document.getElementsByTagName('video')[0]; 

    var success = function(stream){ 

        //獲取視屏流，轉換爲url 

        video.src = window.URL.createObjectURL(stream); 

    } 

    //打開socket 

    socket.onopen = function(){ 

        draw(); 

        console.log("open success") 

    } 

    // 將視頻幀繪製到Canvas對象上,Canvas每100ms切換幀，造成肉眼視頻效果   

    var draw = function(){ 

        try{ 

            backcontext.drawImage(video,0,0, back.width, back.height); 

        }catch(e){ 

            if (e.name == "NS_ERROR_NOT_AVAILABLE") { 

                return setTimeout(draw, 100); 

            } else { 

                throw e; 

            } 

        } 

        if(video.src){ 

            // Canvas的內容轉化成PNG data URI併發送到服務器，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結構：

直播頁面JS

//建立一個socket實例 

    var receiver_socket = new WebSocket("ws://"+document.domain+":8008"); 

    alert("ws://"+document.domain+":8008") 

    var image = document.getElementById('receiver'); 

    // 監聽消息 

    receiver_socket.onmessage = function(data) 

    { 

        image.src=data.data; 

    } 

</script>

想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育有專業的HTML5講師爲您指導，此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。