本文主要介绍Html5播放JPEG图像流的webcoekt，通过样例代码详细介绍，对大家的学习或工作有一定的参考学习价值。需要的朋友可以和边肖一起学习。

一、简介

由于webcoekt是基于tcp连接的，理论上，所有浏览器都可以处理带有私有协议的二进制文件。如果需要播放视频，可以在后端对视频数据进行解码，将图片直接推送到webcoekt的前端，然后前端通过websocket接收图片，然后在img或canvas中显示。当然这是我自己的想法，也是应该做的。需要以下技术支持：

后端直接ffmpeg转码为jpeg图像流

后端定制回放协议包括基本指令，如播放、停止、暂停、更快和更慢

后端需要提供websocket来支持向前端发送图片

前端需要接受图片流并显示

这里不解释后端ffmpeg解码。我有很多图书馆，需要单独联系我购买。前端显示jpg流。这里要用前端显示图片的方法，用图片的base64数据！前端HTML显示二进制jpeg图片：图片流=base64编码从二进制到图像=在img的src中设置，如前端代码

身体

img id=' player ' style=' width :704 px；高度：576px'/

/body

二进制通过arraybuffer转换为base64

函数arrayBufferToBase64(缓冲区){

var binary=

var bytes=new Uint8Array(缓冲区)；

var len=bytes.byteLength

for(var I=0；i leni ) {

binary=String.fromCharCode(字节[I])；

}

return window.btoa(二进制)；

}

最后一次显示：

var player=document . getelementbyid(' player ')；

var url=arrayBufferToBase64(数据)；

player . src=' data : image/JPEG；base64，' url

当然，还有其他方法：

var WSctrl=new WebSocket(' ws ://127 . 0 . 0 . 1/ctrl/')；

//建立通道代码

.

var WSVIDEO=new WebSocket(' ws ://127 . 0 . 0 . 1/video/channel 1 ')；

wsVideo.onmessage=function(evt)

{

//方法1

document.getElementById('img1 ')。src=URL . CreateObjectURL(evt . data)；

//方法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(type of(evt . data)=' string '){

//TextHandler(JSON . parse(evt . data))；

}else{

var reader=new FileReader()；

reader.onload=function(evt){

if(evt . target . ReadyState==FileReader。完成){

var URL=evt . target . result；

警报(URL)；

var img=document . getelementbyid(' IMgdiv ')；