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

.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.lryc.cn/news/547813.html

相关文章:

  • 【单片机通信技术】串口通信的几种方式与比较,详细解释SPI通信
  • PDF转JPG(并去除多余的白边)
  • 题目 3217 ⭐成绩统计⭐【滑动窗口 + 二分搜索】蓝桥杯2024年第十五届省赛
  • URL中的特殊字符与web安全
  • 八卡5090服务器首发亮相!
  • esp32驱动带字库芯片TFT屏幕
  • 为AI聊天工具添加一个知识系统 之138 设计重审 之2 文章学 引言之2 附加符号学附属诠释学附随工程学(联系)
  • java环境部署
  • 正点原子[第三期]Arm(iMX6U)Linux移植学习笔记-2.1 uboot简介
  • CentOS 7.9 安装 ClickHouse 文档
  • 高考數學。。。
  • 使用GitLink个人建站服务部署Allure在线测试报告
  • Linux 上离线安装 python3
  • js操作字符串的常用方法
  • 自动化学习-使用git进行版本管理
  • GCC RISCV 后端 -- GCC Passes 注释
  • Ollama存在安全风险的情况通报及解决方案
  • IDEA Generate POJOs.groovy 踩坑小计 | 生成实体 |groovy报错
  • 阿里云云监控资源告警常用模板
  • Tailwind CSS 问题:npm error could not determine executable to run
  • vue基本功
  • .NET10 - 预览版1新功能体验(一)
  • java下载多个网络文件并压缩成压缩包保存到本地
  • 23种设计模式之单例模式(Singleton Pattern)【设计模式】
  • [项目]基于FreeRTOS的STM32四轴飞行器: 四.LED控制
  • 使用 dynamic-datasource-spring-boot-starter 实现多数据源动态切换
  • springboot中注解有什么用
  • Spring Boot 缓存最佳实践:从基础到生产的完整指南
  • Linux网络相关内容与端口
  • Python Flask框架学习汇编