一、简介

既然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 1document.getElementById("img1").src = URL.createObjectURL(evt.data);//Method 2var 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: contentcontent: ""},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播放录像流的，做法类似）

播放效果如下：

源码获取、合作、技术交流请获取如下联系方式：
QQ交流群：961179337

微信账号：lixiang6153
公众号：IT技术快餐
电子邮箱：lixx2048@163.com

H5之webcoekt播放JPEG图片流相关推荐

html5 图片流,Html5之webcoekt播放JPEG图片流
一.简介既然webcoekt是基于tcp连接的,理论上讲所有的浏览器是可以私有协议处理二进制的,如果我们需要播放视频,我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端,然后前端通过 ...
uniapp做H5项目渲染后端接口返回的图片流
这篇文章适用于uniapp做的H5项目,不适用于小程序. 今天接到个需求,是登录页面获取验证码,调后端接口之后得到的是一个图片流信息,要渲染到前端. 如图可以看到返回的是一张图片,我们控制台打印res ...
关于从Image字段读取图片流并显示在PictureBox控件时报‘参数无效’异常的解决方法...
问题出在存储图片信息的代码中,SqlParameter构造函数中的[Size]参数不是Image字段的长度(16),而是字节数组的长度. 可用一下两种构造方式构造SqlParameter SqlPar ...
ThinkPHP微信实例——JSSDK图像接口多张图片上传下载并将图片流写入本地
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html lang="en"> <head ...
微信中H5同层Video播放器接入教程
微信中H5同层Video播放器接入教程 x5-video-player-type 启用H5同层播放器通过video属性"x5-video-player-type"声明启用同层H5 ...
php微信拍照图库js接口,ThinkPHP微信实例——JSSDK图像接口多张图片上传下载并将图片流写入本地...
发布图片最多可添加9张作品发布 wx.config({ debug: false, appId: '{$signPackage["appid"]}', timestamp: { ...
从服务器请求文件流工具类,SpringBoot我想获取图片流，然后将图片流的数据传到服务器上...
我想获取图片流,然后将图片流的数据传到服务器上这行好像是获取图片流的,但是这个buffers我怎么传递给服务器我想把buffers作为参数传给口,不知道怎么实现?ByteBuffer buffer ...
php读取图片输出,php读取图片流输出到页面图片
读取图片流代码 @ header("Content-Type:image/png"); $imagespath = $_GET['imagespath']; $vms_ini_pa ...
java查询图片前台展示_Java +spring MVC 后台图片流在前台页面显示
用户上传图片后 (头像 or 个人照片等) ,需要在页面上显示,现在提供一种显示方式. 后台采用spring mvc的架构前台是html Java代码: @ResponseBody @Request ...

H5之webcoekt播放JPEG图片流

一、简介

二、websocket播放图片流

H5之webcoekt播放JPEG图片流相关推荐

最新文章

热门文章