您好,登錄后才能下訂單哦!
這篇文章給大家介紹怎么在HTML5中使用websocket實(shí)現(xiàn)直播功能,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
錄像頁(yè)面HTML結(jié)構(gòu)
<video autoplay id="sourcevid" style="width:1600;height:900px"></video> <canvas id="output" style="display:none"></canvas>
錄像頁(yè)面js
<script type="text/javascript" charset="utf-8"> //創(chuàng)建一個(gè)+實(shí)例 var socket = new WebSocket("ws://"+document.domain+":8080"); var back = document.getElementById('output'); //返回一個(gè)用于在畫(huà)布上繪圖的環(huán)境。 var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var success = function(stream){ //獲取視屏流,轉(zhuǎn)換為url video.src = window.URL.createObjectURL(stream); } //打開(kāi)socket socket.onopen = function(){ draw(); console.log("open success") } // 將視頻幀繪制到Canvas對(duì)象上,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的內(nèi)容轉(zhuǎn)化成PNG data URI并發(fā)送到服務(wù)器,0.5為和壓縮系數(shù) socket.send(back.toDataURL("image/jpeg", 0.5)); } setTimeout(draw, 100); } //調(diào)用設(shè)備的攝像頭,并將資源放入video標(biāo)簽 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getUserMedia({video:true, audio:false}, success, console.log); </script>
直播頁(yè)面HTML結(jié)構(gòu):
<img id="receiver" style="width:1600px;height:900px"/>
直播頁(yè)面JS
<script type="text/javascript" charset="utf-8"> //創(chuàng)建一個(gè)socket實(shí)例 var receiver_socket = new WebSocket("ws://"+document.domain+":8008"); alert("ws://"+document.domain+":8008") var image = document.getElementById('receiver'); // 監(jiān)聽(tīng)消息 receiver_socket.onmessage = function(data) { image.src=data.data; } </script>
關(guān)于怎么在HTML5中使用websocket實(shí)現(xiàn)直播功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。