由于接收摄像头 告警视频,需要前端直接播放,不想后端转码后传输。
摄像头 判断到告警后往服务器上报 .h264 /.h265 视频文件。
解决方式:html5直接采用 ffmpeg 进行转码 ,然后塞入 video标签,进行播放
目前改动ffmpeg加载wsam 路径以及 ffmpeg-core.js。
1. ffmpeg 下载或加载
如果绑定资源下载要vip ,就不要下载了,直接 从npm.js中去下载对应 的包,然后把其中814.ffmpeg.js 中修改路径就行了
资源地址:https://download.csdn.net/download/apgk1/90447992
2.主要加入代码如下:
async function convert(blob, id) {
var ffmpeg = new FFmpegWASM.FFmpeg();
await ffmpeg.load();
var buffer =await blob.arrayBuffer();
await ffmpeg.writeFile('input', new Uint8Array(buffer));
await ffmpeg.exec(['-i', 'input', '-c:v', 'copy', 'output.mp4']);
var data = await ffmpeg.readFile('output.mp4');
var videoBlob = new Blob([data.buffer], { type: 'video/mp4' });
var videoURL = URL.createObjectURL(videoBlob);
$("#video_" + id).empty().append("<video src='" + videoURL + "' type='video/mp4' controls></video>");
}
function getVideo(src, id) {
var xhr = new XMLHttpRequest();
xhr.open("get", src, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response;
top.blob = blob;
convert(blob, id);
}
}
xhr.send();
}