Html5之webcoekt播放JPEG图片流

2024-11-2 22:15| 发布者: 2ae29| 查看: 48| 评论: 0

摘要: 一、简介既然webcoekt是基于tcp连接的，理论上讲全部的浏览器是可以私有协议处理二进制的，如果我们须要播放视频，我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端，然后前端通过websocket接收图片然

一、简介

既然webcoekt是基于tcp连接的，理论上讲全部的浏览器是可以私有协议处理二进制的，如果我们须要播放视频，我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端，然后前端通过websocket接收图片然后将图片表现到img或canvas中即可，当然这个是我本身设想的，也是应该可以做的到了，做到如下须要以下技能支持：

后端直接ffmpeg转码为jpeg图片流
后端定制播放协议包罗基本指令如play、stop、pause、faster、slower
后端须要提供websocket支持发送图片流到前端
前端须要担当图片流并表现出来

后端ffmpeg解码这里就不阐明白，我有许多库，须要的单独联系我购买，前端的表现jpg流，这里要借助前端表现图片放的做法，使用图片base64数据！前端HTML表现二进制jpeg图片：图片流=>二进制转image的base64编码=>设置到img的src中，如前端代码

[code] <body> <img id="player" style="width:704px;height:576px"/> </body>[/code]

二进制通过arraybuffer转base64

[code] 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); }[/code]

末了表现：

[code] var player = document.getElementById('player'); var url= arrayBufferToBase64(data); player.src='data:image/jpeg;base64,'+url;[/code]

当然，还有其他的方式：

[code] 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 = "<img src = "+url+" />"; } } reader.readAsDataURL(evt.data); } };[/code]

关于c++的websocket开源工程：websocketpp、QWebSocketServer

二、websocket播放图片流

多说无益，还不如痛痛快快的来一把，为了减低复杂度，我用java的websocket来实现图片流的发送(当然c++的库我也一个实战项目中用过的名为WebSocket的封装的dll工程项目，须要的自行私下购买源码),前端使用一个img标签展示图片，这里阐明一下，后台模拟发送图片(这里仅仅是图片,不是流,如果是流直接接二连三发送即可须要ffmpeg转码)

起首前端的代码如下所示：

[code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>websocket表现二进制图片流</title> <style type="text/css"> </style> </head> <script src="jquery.min.js"></script> <script> $(document).ready(function(){ $("#send").click(function(){ //var content = $("#content").val(); $.ajax({ url: "/test/send", data: { //content: content content: "" }, success: function( result ) { console.log("请求成功!"); } }); }); }); </script> <body> <h1>WebSocket播放图片</h1> <img id="player" style="width:500px;height:400px"/><br/> <button id="send">请求图片</button> </body> <script type="application/javascript"> 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() }; } </script> </html>[/code]

每次点击发送的时候就向后台请求一张图，后台将改图发送出去（我简朴的使用websocket群发,可以使用websocket的可变参数将websocket和http关联起来,这个应该很容易我这里不再赘述，不了解的进群讨论)

[code] 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+ "】发送成功!"; } }[/code]

我这里多一句嘴，如果是音视频应用的录像播放，这里可以使用websocket传输图片流，然后通过盘算发送定点的图片流数据到前端来实现自定义的播放器功能（海康萤石云使用的就是websocket播放录像流的，做法雷同）

播放效果如下：

到此这篇关于Html5之webcoekt播放JPEG图片流的文章就介绍到这了,更多相关Html5播放JPEG图片流内容请搜索脚本之家从前的文章或继续浏览下面的相关文章，希望各人以后多多支持脚本之家！

来源：https://www.jb51.net/html5/746110.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：如安在Canvas上的图形/图像绑定事件监听的实现下一篇：Html5 webRTC简单实现视频调用的示例代码

账号		自动登录	找回密码
密码			立即注册

Html5之webcoekt播放JPEG图片流

相关分类

站长推荐 /6