当前位置: 首页 > article >正文

.h264/.h265文件 前端直接播放

由于接收摄像头 告警视频,需要前端直接播放,不想后端转码后传输。

摄像头 判断到告警后往服务器上报 .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();



    }


http://www.kler.cn/a/572089.html

相关文章:

  • 2 Redis 字符串(String) 命令大全
  • 【TCP/IP协议栈】【网络层】子网划分、子网掩码
  • STM32程序的加密与破解以及烧录方法
  • FastGPT 引申:基于 Python 版本实现 Java 版本 RRF
  • Kali CentOs 7代理
  • 【华为OD机试真题29.9¥】(E卷,100分) - IPv4地址转换成整数(Java Python JS C++ C )
  • vmware虚拟机安装银河麒麟高级服务器操作系统V10
  • 物联网感应层数据采集器实现协议转换 数据格式化
  • .NET内存居高不下排查怎么解决
  • 4-3自定义加载器,并添加功能
  • 策略模式的C++实现示例
  • Python 图像处理之 Pillow 库:玩转图片
  • 【我的Android进阶之旅】如何使用NanoHttpd在Android端快速部署一个HTTP服务器?
  • maven推送jar包到nexus
  • 如何将JAR交由Systemctl管理?
  • BambuStudio学习笔记:FlushVolCalculator类
  • Spring项目中常用操作记录
  • 【数据结构】二叉树总结篇
  • React:Router路由
  • Kmeans算法来实现RFM指标计算步骤