这篇文章给大家分享的是有关Html5之webcoekt播放JPEG图片流的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联主营四平网站建设的网络公司,主营网站建设方案,成都APP应用开发,四平h5小程序开发搭建,四平网站营销推广欢迎四平等地区企业咨询
一、简介
既然webcoekt是基于tcp连接的，理论上讲所有的浏览器是可以私有协议处理二进制的，如果我们需要播放视频，我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端，然后前端通过websocket接收图片然后将图片显示到img或canvas中即可，当然这个是我自己设想的，也是应该可以做的到了，做到如下需要以下技术支持：
后端ffmpeg解码这里就不说明了，我有很多库，需要的单独联系我购买，前端的显示jpg流，这里要借助前端显示图片放的做法，使用图片base64数据！前端HTML显示二进制jpeg图片：图片流=>二进制转image的base64编码=>设置到img的src中，如前端代码
二进制通过arraybuffer转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;当然，还有其他的方式：
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);
}
};关于c++的websocket开源工程：websocketpp、QWebSocketServer
二、websocket播放图片流
多说无益，还不如痛痛快快的来一把，为了减低复杂度，我用java的websocket来实现图片流的发送(当然c++的库我也一个实战项目中用过的名为WebSocket的封装的dll工程项目，需要的自行私下购买源码),前端使用一个img标签展示图片，这里说明一下，后台模拟发送图片(这里仅仅是图片,不是流,如果是流直接连续不断发送即可需要ffmpeg转码)
首先前端的代码如下所示：
websocket显示二进制图片流
WebSocket播放图片
请求图片
var websocket = {
send: function (str) {
}
};
window.onload = function () {
if (!'WebSocket' in window) return;
webSocketInit();
};
function webSocketInit() {
// 连接到服务端端点
websocket = new WebSocket("ws://127.0.0.1:8080/image/show");
// 成功建立连接
websocket.onopen = function () {
console.log("成功连接到服务器");
websocket.send("成功连接到服务器");
};
// 接收到消息
websocket.onmessage = function (event) {
// 文本数据包
if(typeof(event.data)=="string"){
// JSON.parse(evt.data)
console.log("收到服务端发送的消息：" + event.data);
// 图片数据包Blob
}else{
var reader = new FileReader();
reader.onload = function(evt){
if(evt.target.readyState == FileReader.DONE){
// base64数据
var url = evt.target.result;
document.getElementById("player").src = url;
}
}
reader.readAsDataURL(event.data);
}
};
// 连接发生错误
websocket.onerror = function () {
console.log("WebSocket连接发生错误");
};
// 连接关闭
websocket.onclose = function () {
console.log("WebSocket连接关闭");
};
// 监听窗口关闭事件，当窗口关闭时，主动关闭websocket连接
window.onbeforeunload = function () {
websocket.close()
};
}
