连续图片在前端播放为视频思路

背景

C++的同事先写好关于开始录制视频的native接口——startJniRecord

Java思路

1、随便写个测试接口，将数据经过一定的清洗，通过webSocket发送给前端

    @Operation(summary = "测试")@GetMapping("/startFaceRecordingTest")public void startFaceRecordingTest() {videoCapture.stopJniRecord();videoCapture.startJniRecord((byte[] frame, int width, int height) -> {//将图像通过webSocket发送给前端if (WebSocketService.session != null) {byte[] jpegFrame = VideoCapture.convertToJpeg(frame, width, height);WebSocketMessageUtil.sendMessage(WebSocketService.session, Base64Utils.encode(jpegFrame));}});}

    public static void sendMessage(Session session, String message) {if (ObjectUtil.isNotNull(session)) {try {synchronized (session){session.getBasicRemote().sendText(message);}} catch (IOException e) {log.error(e.getMessage());}}}

2、告知前端同事你的webSocket地址

ws://127.0.0.1:8085/api/monitor/websocket

前端思路

使用webSocket接收后端传过来的base64数据
预先准备：
1、建立webSocket连接，并接收消息

websocket = new WebSocket("ws://127.0.0.1:8085/api/monitor/websocket");
websocket.onmessage = function (event) {const player = document.getElementById('player');player.src='data:image/jpeg;base64,'+event.data;}

2、写一个方法每次点击开启视频命令按钮时，触发事件

    function sendCmdStartFaceRecording() {let xmlHttp = new XMLHttpRequest;xmlHttp.open('GET', 'http://127.0.0.1:8085/api/monitor/command/startFaceRecordingTest');xmlHttp.setRequestHeader('content-type', 'application/json');xmlHttp.send();}

3、写前端展示信息

<div><button onclick="sendCmdStartFaceRecording()"> 开启视频命令</button><img id="player" style="width:704px;height:576px"/>
</div>

处理base64图片连续播放形成视频步骤：
步骤1 先写个防止图片位置的

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

步骤2 获取dom元素

const player=document.getElementById('player')

步骤3 赋值资源使其播放

player.src='data:image/jpeg;base64,'+后端传过来的base64数据;

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>test</title>
</head>
<body>
<div>等待收到消息
</div>
<div><div id="message"></div><button onclick="sendCmdStartFaceRecording()"> 开启视频命令</button><img id="player" style="width:704px;height:576px"/></div><script type="text/javascript">var websocket = null;var init = function () {connect();}();function connect() {if ("WebSocket" in window) {websocket = new WebSocket("ws://127.0.0.1:8085/api/monitor/websocket");websocket.onopen = function (event) {setMessageHtml("onopen");}websocket.onclose = function (event) {setMessageHtml("onclose");}websocket.onmessage = function (event) {// setMessageHtml(event.data);// const url = window.URL.createObjectURL(new Blob([event.data]))const player = document.getElementById('player');player.src='data:image/jpeg;base64,'+event.data;// window.URL.revokeObjectURL(url)}} else {alert("not find socket")}}function sendCmdStartFaceRecording() {let xmlHttp = new XMLHttpRequest;xmlHttp.open('GET', 'http://127.0.0.1:8085/api/monitor/command/startFaceRecordingTest');xmlHttp.setRequestHeader('content-type', 'application/json');xmlHttp.send();}function setMessageHtml(innerHTML) {document.getElementById("message").innerHTML += innerHTML + "<br/>";}</script>
</body>
</html>

连续图片在前端播放为视频思路相关推荐

C#+Vue推送连续图片到前端播放视频解决方案
解决方案在如下连接: https://www.bilibili.com/read/cv14071049
Vue 媒体处理（摄像头，截图，播放本地视频）
Vue 媒体处理(摄像头,截图,播放本地视频) 一. 打开摄像头 ```javascriptthis.constraint = {// video属性设置video: {width: 300,heig ...
前端播放大视频卡顿的解决（m3u8视频流）
前言最近在一个大屏看板项目中有一个需求是:要求视频和看板要进行来回切换. 最开始的做法是将MP4视频放在项目里,在本地运行时是没什么问题的,但是在往仓库里提交代码时出现了问题.当单个文件超过100M ...
RequestBody获取前端数据_360视频云Web前端HEVC播放器实践剖析
360视频云前端团队围绕HEVC前端播放及解密实现了一套基于WebAssembly.WebWorker的通用模块化Web播放器,在LiveVideoStackCon2019深圳的演讲中360奇舞团We ...
前端播放视频有声音没有画面
前端播放视频有声音没有画面 MP4编码格式主要有三种,分别是mpg4(xdiv),mpg4(xvid),avc(h264),只有h264才是公认的MP4标准编码,所以视频有声音没画面需要将视频转码成h ...
Matlab将连续图片处理为视频
在一些视频的制作过程中,因为视频软件自身的原因,导出的视频质量很低,而连续图片的质量效果相对较好,对于该问题可用Matlab将图片进行串联起来.具体代码如下. framesPath = 'D:\wud ...
python-将连续图片转换为视频
连续图片转换为视频:需要修改输入文件路径.输出文件路径.输出视频的分辨率.输入图片的张数 import cv2 img = cv2.imread('./CameraIrRaw/1.bmp') imgI ...
Qt - OpenCV 连续图片生成视频
Qt - OpenCV 连续图片生成视频此博客始创于:http://blog.csdn.net/lys211 转载请注明出处主要是测试OpenCV将连续命名的图片转换成视频的过程. OpenCV的 ...
【web前端】JavaScript实现图片幻灯片滚动播放动画效果
JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...

连续图片在前端播放为视频思路

背景

Java思路

前端思路

连续图片在前端播放为视频思路相关推荐

最新文章

热门文章