這篇文章給大家分享的是有關(guān)Html5之webcoekt播放JPEG圖片流的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)主營(yíng)四平網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都APP應(yīng)用開(kāi)發(fā),四平h5小程序開(kāi)發(fā)搭建,四平網(wǎng)站營(yíng)銷(xiāo)推廣歡迎四平等地區(qū)企業(yè)咨詢(xún)
一、簡(jiǎn)介
既然webcoekt是基于tcp連接的，理論上講所有的瀏覽器是可以私有協(xié)議處理二進(jìn)制的，如果我們需要播放視頻，我們可以將視頻數(shù)據(jù)在后端解碼后直接將圖片推送到webcoekt前端，然后前端通過(guò)websocket接收?qǐng)D片然后將圖片顯示到img或canvas中即可，當(dāng)然這個(gè)是我自己設(shè)想的，也是應(yīng)該可以做的到了，做到如下需要以下技術(shù)支持：
后端直接ffmpeg轉(zhuǎn)碼為jpeg圖片流
后端定制播放協(xié)議包括基本指令如play、stop、pause、faster、slower
后端需要提供websocket支持發(fā)送圖片流到前端
前端需要接受圖片流并顯示出來(lái)
后端ffmpeg解碼這里就不說(shuō)明了，我有很多庫(kù)，需要的單獨(dú)聯(lián)系我購(gòu)買(mǎi)，前端的顯示jpg流，這里要借助前端顯示圖片放的做法，使用圖片base64數(shù)據(jù)！前端HTML顯示二進(jìn)制jpeg圖片：圖片流=>二進(jìn)制轉(zhuǎn)image的base64編碼=>設(shè)置到img的src中，如前端代碼
二進(jìn)制通過(guò)arraybuffer轉(zhuǎn)base64
function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}最后顯示：
var player = document.getElementById('player');
var url= arrayBufferToBase64(data);
player.src='data:image/jpeg;base64,'+url;當(dāng)然，還有其他的方式：
var wsCtrl = new WebSocket("ws://127.0.0.1/ctrl/");
//Establish channel code
....
var wsVideo = new WebSocket("ws://127.0.0.1/video/channel1");
wsVideo.onmessage = function(evt)
{
//Method 1
document.getElementById("img1").src = URL.createObjectURL(evt.data);
//Method 2
var read = new FileReader();
read.onload = function(e)
{
document.getElementById("img2").src = e.target.result;
}
read.readAsDataURL(evt.data);
}
ws.onmessage = function(evt) {
if(typeof(evt.data)=="string"){
//textHandler(JSON.parse(evt.data));
}else{
var reader = new FileReader();
reader.onload = function(evt){
if(evt.target.readyState == FileReader.DONE){
var url = evt.target.result;
alert(url);
var img = document.getElementById("imgDiv");
img.innerHTML = "";
}
}
reader.readAsDataURL(evt.data);
}
};關(guān)于c++的websocket開(kāi)源工程：websocketpp、QWebSocketServer
二、websocket播放圖片流
多說(shuō)無(wú)益，還不如痛痛快快的來(lái)一把，為了減低復(fù)雜度，我用java的websocket來(lái)實(shí)現(xiàn)圖片流的發(fā)送(當(dāng)然c++的庫(kù)我也一個(gè)實(shí)戰(zhàn)項(xiàng)目中用過(guò)的名為WebSocket的封裝的dll工程項(xiàng)目，需要的自行私下購(gòu)買(mǎi)源碼),前端使用一個(gè)img標(biāo)簽展示圖片，這里說(shuō)明一下，后臺(tái)模擬發(fā)送圖片(這里僅僅是圖片,不是流,如果是流直接連續(xù)不斷發(fā)送即可需要ffmpeg轉(zhuǎn)碼)
首先前端的代碼如下所示：
websocket顯示二進(jìn)制圖片流
WebSocket播放圖片
請(qǐng)求圖片
var websocket = {
send: function (str) {
}
};
window.onload = function () {
if (!'WebSocket' in window) return;
webSocketInit();
};
function webSocketInit() {
// 連接到服務(wù)端端點(diǎn)
websocket = new WebSocket("ws://127.0.0.1:8080/image/show");
// 成功建立連接
websocket.onopen = function () {
console.log("成功連接到
重慶分公司
重慶分公司