.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();



    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/980816.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【ATXServer2】Android无法正确显示手机屏幕

文章目录 现象原因分析与解决排查手机内部minicap 解决minicap问题查看移动端Android SDK版本查看minicap支持版本单次方案多次方案 现象 原因分析与解决 由于atxserver2在与Android动终端的链接过程中使用了agent&#xff1a;atxserver2-android-provider&#xff0c;按照项目…

Halcon 算子-承接车牌识别

1.rgb1_to_gray&#xff08;Image,GrayImage&#xff09; Image: 输入的图像GrayImage&#xff1a; 输出的灰度图像 2.threshold&#xff08;GrayImage,Regions,Sigma,Sigma&#xff09; GrayImage: 输入的图像Regions&#xff1a; 输出的区域Sigma&#xff1a; 调节的参数 3…

【Spark+Hive】基于Spark大数据技术小红书舆情分析可视化预测系统(完整系统源码+数据库+开发笔记+详细部署教程+虚拟机分布式启动教程)✅

目录 一、项目背景 二、项目目标 三、算法介绍 四、开发技术介绍 五、项目创新点 六、项目展示 七、权威教学视频 源码获取方式在文章末尾 一、项目背景 在数字经济蓬勃发展的当下&#xff0c;社交电商平台小红书凭借其"内容电商"的独特模式&#xff0c;已…

Markdown 区块的妙用

Markdown 区块是我们最常用且功能强大的区块之一。它从轻量级文本提示到简单的 HTML 样式&#xff0c;甚至可以承担重要的业务逻辑&#xff0c;功能多样而灵活。 一、Markdown 区块的基本功能 由于 Markdown 区块具有灵活、公开和随时可更改的特点&#xff0c;它常被用于展示…

c++(7)模板初阶

1. 泛型编程 如何实现一个通用的交换函数呢&#xff1f; void Swap(int& left, int& right) {int temp left;left right;right temp; } void Swap(double& left, double& right) {double temp left;left right;right temp; } void Swap(char& left,…

anything文本分割优化

1、文本分割优化&#xff0c;建议 200 和40&#xff0c;把文档切得更碎一些方便检索命中。 2、RAG接口进一步优化 /*** RAG知识库接口** param prompt* return*/GetMapping(value "/rag/chat", produces MediaType.TEXT_EVENT_STREAM_VALUE)public Flux<ChatCom…

HarmonyOS学习第13天:布局进阶,从嵌套到优化

布局嵌套初体验 在 HarmonyOS 应用开发中&#xff0c;布局嵌套是构建复杂界面的重要手段。就像搭建一座高楼&#xff0c;布局嵌套能让各个界面元素有序组合&#xff0c;构建出功能丰富、层次分明的用户界面。我们以日常使用的电商 APP 为例&#xff0c;在商品展示区&#xff0c…

基于机器学习的智能谣言检测系统

在信息爆炸的时代&#xff0c;谣言和虚假信息的传播速度比以往任何时候都快。为了应对这一挑战&#xff0c;我们可以利用机器学习技术构建一个智能谣言检测系统。本文将带你从零开始&#xff0c;使用 Python 和 PyQt5 构建一个功能强大的谣言检测工具&#xff0c;并深入探讨其背…

数据结构——单调栈

一.单调栈简介 1.1单调栈定义与特性 本质&#xff1a;单调栈是一种特殊的栈结构&#xff0c;其内部元素始终保持单调递增或单调递减的顺序。核心规则&#xff1a;当新元素入栈时&#xff0c;会通过弹出破坏单调性的栈顶元素来维持有序性。单调方向&#xff1a; 单调递增栈&…

网络编程相关概念

一 网络概念 1.国际网络体系结构&#xff1a; OSI模型: open system interconnect 理论模型 1977 国际标准化组织 各种不同体系结构的计算机能在世界范围内互联成网。 OSI模型 应用层:要传输的数据信息&#xff0c;如文件传输&#xff0c;电子…

Trae:国内首款AI原生IDE,编程效率大提升

今年一月&#xff0c;在新闻上看到字节跳动面向海外市场推出了一款名为Trae的AI集成开发环境&#xff08;IDE&#xff09;。起初&#xff0c;我并未给予过多关注&#xff0c;因为市面上已有不少IDE集成了AI插件&#xff0c;功能也非常全面&#xff0c;而字节跳动自家的MarsCode…

Metasploit multi/handler 模块高级选项解析

multi/handler 是 Metasploit 框架中至关重要的模块&#xff0c;主要用于监听目标机的连接并处理来自目标的反向 shell 或会话。它可以灵活地适应不同渗透测试场景&#xff0c;提供高度的自定义选项以优化监听器的行为。 在 Metasploit msf6 框架中&#xff0c;当使用 exploit…

【前端】在WebStorm中安装Node.js与nvm与npm的详细过程

文章目录 一、Node.js安装二、nvm安装三、验证安装成功总结 一、Node.js安装 首先到node.js官网下载安装文件。 https://nodejs.org/zh-cn 直接运行安装文件进行安装&#xff1a; 跳过继续安装&#xff1a; 完成安装&#xff1a; 完成后的安装路径&#xff1a; 环境变量的…

广域互联方案与技术概述

《广域互联方案与技术概述》属于博主的“广域网”专栏&#xff0c;若想成为HCIE&#xff0c;对于广域网相关的知识需要非常了解&#xff0c;更多关于广域网的内容博主会更新在“广域网”专栏里&#xff0c;请持续关注&#xff01; 一.前言 广域网有着悠久的历史&#xff0c;广…

华硕电脑开启电池保养模式的方法

华硕电脑开启电池保养模式的方法 打开华硕电脑管家(可以桌面左下角搜索MyASUS打开)进入首页(可以不注册&#xff0c;点击跳过&#xff0c;进入首页)&#xff0c;点击电池&#xff1a; 之后在新的页面点击电池保养模式&#xff1a; 开启电池保养模式

一键安装Mysql部署脚本之Linux在线安装Mysql,脚本化自动化执行服务器部署(附执行脚本下载)

相关链接 一键安装Redis部署脚本之Linux在线安装Redis一键安装Mysql部署脚本之Linux在线安装Mysql一键安装JAVA部署脚本之Linux在线安装JDK一键安装Nginx部署脚本之Linux在线安装NginxNavicat最新版(17)详细安装教程Xshell客户端免费版无需注册XFtp客户端免费版无需注册 前言…

JavaScript阻塞

JS对DOM树的阻塞 DOM的定义&#xff1a;文档对象模型&#xff0c;是JS操作网页的接口&#xff0c;指代页面中的元素。DOM树的定义&#xff1a;是指元素与元素之间的关系&#xff0c;可以指页面的结构。 JS在执行时会阻塞DOM树的结构&#xff0c;此时DOM树是不完整的&#xff0…

Mysql进阶(一)

1. 在ubuntu下安装MySQL数据库 1.1 查看操作系统版本 操作系统版本为Ubuntu22.04. LTS lsb_release -a; 安装成功之后&#xff0c;查看mysql的状态 1.2 查看mysql的状态 1.3 登录mysql mysql -uroot -p; 1.4 退出mysql quit&#xff1b; exit&#xff1b; 2. mysql 程序的…

安卓基础组件Looper - 03 java层面的剖析

文章目录 workflow工作线程 准备Looper创建LooperActivity主线程其他情况 Looper.prepare()大体流程java申请Loopernew LooperMessageQueue初始化 nativejniNativeMessageQueue Looper.loop()大体流程java获取Looper获取msg&#xff0c;处理msgLooper.loop()Looper.loopOnce &a…

DataStructsRECITE

1、绪论 什么是数据结构&#xff1f; 数据结构是相互之间存在一种或多种特定关系的数据元素的集合。 数据结构包括三个方面&#xff1a;逻辑结构、存储结构、数据的运算。 逻辑结构有&#xff1a; 集合&#xff08;数据元素除属于“同一个集合”外&#xff0c;别无其他关系…