您现在的位置是：网站首页> 编程资料编程资料
Html5之webcoekt播放JPEG图片流HTML5播放实现rtmp流直播html5用video标签流式加载的实现基于 HTML5 WebGL 实现的医疗物流系统Html5 实现微信分享及自定义内容的流程HTML5 canvas 瀑布流文字效果的示例代码HTML5移动端手机网站开发流程HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影HTML5梦幻之旅——炫丽的流星雨效果实现过程HTML5 离线应用之打造零请求、无流量网站的解决方法
2021-08-30
1640人已围观
简介 这篇文章主要介绍了Html5之webcoekt播放JPEG图片流,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、简介
既然webcoekt是基于tcp连接的，理论上讲所有的浏览器是可以私有协议处理二进制的，如果我们需要播放视频，我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端，然后前端通过websocket接收图片然后将图片显示到img或canvas中即可，当然这个是我自己设想的，也是应该可以做的到了，做到如下需要以下技术支持：
- 后端直接ffmpeg转码为jpeg图片流
- 后端定制播放协议包括基本指令如play、stop、pause、faster、slower
- 后端需要提供websocket支持发送图片流到前端
- 前端需要接受图片流并显示出来
后端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播放图片
每次点击发送的时候就向后台请求一张图，后台将改图发送出去（我简单的使用websocket群发,可以使用websocket的可变参数将websocket和http关联起来,这个应该很容易我这里不再赘述，不了解的进群讨论)
package com.easystudy.controller; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import java.net.URL; import java.util.Random; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import com.easystudy.websocket.ImgEndPoint; /** * @文件名称: TestController.java * @功能描述: 图片流请求请求发送接口(websocket发送图片到web端) * @版权信息： www.easystudy.com * @技术交流： 961179337(QQ群) * @编写作者： lixx2048@163.com * @联系方式： 941415509(QQ) * @开发日期： 2020年9月21日 * @历史版本： V1.0 * @备注信息： */ @RestController @RequestMapping("/test") public class TestController { /** * @功能描述: 发送请求接口 * @版权信息： www.easystudy.com * @编写作者： lixx2048@163.com * @开发日期： 2020年9月21日 * @备注信息： */ @SuppressWarnings("unused") @GetMapping("/send") public String reponseMsgToClient(@RequestParam(name="content", required = true)String content) throws Exception{ System.out.println("开始发送图片数据"); // 随机选择一张图片发送 int index = new Random().nextInt(4) + 1; String imgName = index + ".jpg"; // 判断图片是否存在 URL url = getClass().getClassLoader().getResource(imgName); File file = new File(url.getFile()); if (!file.exists()) { return "未找到图片!"; } // 创建输入图片流 InputStream in = new FileInputStream(file); if (null == in) { return "打开文件失败!"; } // 读取图片数据 int size = (int)file.length(); byte[] buffer = new byte[ size]; int count = in.read(buffer, 0, size); System.out.println("文件长度:" + size + ", 读取长度:" + count); // 发送图片数据(理论上讲应该只发对端连接的) ImgEndPoint.fanoutMessage(buffer); // 关闭文件流 try { in.close(); } catch (IOException e) { e.printStackTrace(); } // 接口响应 return "消息【" +content+ "】发送成功!"; } }我这里多一句嘴，如果是音视频应用的录像播放，这里可以使用websocket传输图片流，然后通过计算发送定点的图片流数据到前端来实现自定义的播放器功能（海康萤石云使用的就是websocket播放录像流的，做法类似）
播放效果如下：
到此这篇关于Html5之webcoekt播放JPEG图片流的文章就介绍到这了,更多相关Html5播放JPEG图片流内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
相关内容
- 如何在Canvas上的图形/图像绑定事件监听的实现如何在Canvas中添加事件的方法示例html5中监听canvas内部元素点击事件的三种方法详解Canvas事件绑定HTML5 Canvas的事件处理介绍一个不错的HTML5 Canvas多层点击事件监听实例HTML5 Canvas鼠标与键盘事件demo示例详解如何在Canvas中添加事件的方法
- canvas 绘图时位置偏离的问题解决html2canvas生成的图片偏移不完整的解决方法
- 关于canvas.toDataURL 在iOS运行失败的问题解决 详解canvas.toDataURL()报错的解决方案全都在这了canvas.toDataURL image/png 报错处理方法推荐
- canvas绘制图片drawImage使用方法详解canvas drawImage()方法绘制图片不显示的问题HTML5 Canvas API中drawImage()方法的使用实例
- HTML5中外部浏览器唤起微信分享功能的代码html5的pushstate以及监听浏览器返回事件的实现HTML5中外部浏览器唤起微信分享html5使用html2canvas实现浏览器截图的示例处理HTML5新标签的浏览器兼容版问题如何查看浏览器对html5的支持情况
- 如何使用canvas绘制可移动网格的示例代码详解使用HTML5 Canvas创建动态粒子网格动画
- HTML5 body设置全屏背景图片的示例代码HTML5轻松实现全屏视频背景的示例HTML5画渐变背景图片并自动下载实现步骤
- Html5基于canvas实现电子签名并生成PDF文档canvas画布实现手写签名效果的示例代码html5 利用canvas手写签名并保存的实现方法如何用canvas实现在线签名的示例代码
- HTML5基于flash实现播放RTMP协议视频的示例代码HTML5播放实现rtmp流直播使用HTML5加载音频和视频的实现代码Html5 webRTC简单实现视频调用的示例代码HTML5 video循环播放多个视频的方法步骤HTML5 通过Vedio标签实现视频循环播放的示例代码html5视频自动横过来自适应页面且点击播放功能的实现
- 前端水印的简单实现代码示例前端canvas水印快速制作（附完整代码)手摸手教你用canvas实现给图片添加平铺水印的实现html5 canvas实现给图片添加平铺水印canvas 下载二维码和图片加水印的方法前端使用canvas生成盲水印的加密解密的实现
