Html5之webcoekt播放JPEG图片流
发布时间：2020-09-22 16:36:46 作者：贝壳里的沙 
我要评论
我要评论这篇文章主要介绍了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中，如前端代码
<body>
<img id="player" style="width:704px;height:576px"/>
</body>
二进制通过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 = "<img src = "+url+" />";
}
}
reader.readAsDataURL(evt.data);
}
};
关于c++的websocket开源工程：websocketpp、QWebSocketServer
二、websocket播放图片流
多说无益，还不如痛痛快快的来一把，为了减低复杂度，我用java的websocket来实现图片流的发送(当然c++的库我也一个实战项目中用过的名为WebSocket的封装的dll工程项目，需要的自行私下购买源码),前端使用一个img标签展示图片，这里说明一下，后台模拟发送图片(这里仅仅是图片,不是流,如果是流直接连续不断发送即可需要ffmpeg转码)
首先前端的代码如下所示：
<!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>
每次点击发送的时候就向后台请求一张图，后台将改图发送出去（我简单的使用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图片流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了HTML5播放实现rtmp流直播,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-16
这篇文章主要介绍了html5用video标签流式加载的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-05-20
物联网( IoT )，简单的理解就是物体之间通过互联网进行链接。这篇文章给大家介绍基于 HTML5 WebGL 实现的医疗物流系统，感兴趣的朋友跟随小编一起看看吧2019-10-08- 这篇文章主要介绍了Html5 实现微信分享及自定义内容的流程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-20
这篇文章主要介绍了HTML5 canvas 瀑布流文字效果的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-31- 这篇文章主要为大家介绍了HTML5移动端手机网站开发流程，想要进行移动端手机网站开发的朋友可以参考一下2016-04-25
- 一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成，除了实现瀑布流，还加入了CSS5的图片修饰效果，比如图片的圆角边框、图片阴影立体效果2014-03-07
- 流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿望就能实现，最近出于兴趣，制作一个拖尾效果，后来想到可以通过拖尾效果来实现一下流星雨的效果2013-08-06
- 今天Web应用程序已经很复杂了，以现在的发展，会将越来越复杂，但他有一个致命缺点，不能脱离internet链接，因此在HTML中新增了一API，它使用一个本地存储机制很好地解决了2013-04-25
最新评论