web端播放rtsp视频流(摄像头监控视频)教程

文章目录

  • 前言
  • 一、ffmpeg是什么?
  • 二、ffmpeg安装
    • 1.下载
    • 2.安装
  • 三、node搭建websocket服务
  • 四、web客户端播放视频


前言

像海康大华一些摄像头或者直播源 为rtsp视频流,想在web上播放必须进行协议转换。已知一些方案例如rtsp转rtmp需要flash,现在浏览器基本不支持flash。还有转hls或者flv这些延迟都比较高。经过实践对比比较理想方案是 经转码后视频流通过websocket传送给客户端在将视频流解码成图片通过canvas渲染出来,延迟比较小基本在1s以内。所用工具(插件)为ffmpeg+node(node-rtsp-stream)+jsmpeg


一、ffmpeg是什么?

FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案,简而言之就是一个可以转换各种视频流格式/协议的强大工具。

二、ffmpeg安装

1.下载

ffmpeg下载地址

在这里插入图片描述
进入官网选择window图标-点击windows builds form gyan.dev

在这里插入图片描述
进入内页下拉找ffmpeg-release-essentials.zip点击下载

下载完解压

在这里插入图片描述

在bin目录下有个ffmpeg.exe 程序运行入口
在这里插入图片描述

2.安装

  ffmpeg添加到全局环境变量

window+i 输入’环境变量’搜索打开系统属性窗口

在这里插入图片描述
点击环境变量,在系统变量中找到Path点击编辑

在这里插入图片描述
浏览-选择ffmpeg解压出来的bin目录

在这里插入图片描述
确定-确定-确定关闭窗口

添加成功后验证是否生效
任意地方打开Powershell窗口或cmd窗口
输入 ffmpeg 打印如下表示成功

在这里插入图片描述


三、node搭建websocket服务

此功能需要借助node-rtsp-stream插件,node-rtsp-stream是一个node环境下处理rtsp视频流插件,借助它能通过代码自动调用ffmpeg程序进行推流拉取转换并以websocket形式输出视频流。
由于在node下搭建服务,所以电脑要先安装node环境。怎么安装node环境自行查找其他教程。

新建一个app.js文件,同级目录下npm安装 node-rtsp-stream

npm install node-rtsp-stream -S

在这里插入图片描述
app.js写入:

const stream = require('node-rtsp-stream')new stream({name: 'video-stream',streamUrl: 'rtsp://xxxxx',//rtsp地址wsPort: 9999,//端口号ffmpegOptions: { '-stats': '', '-r': 30 ,//视频帧数'-s': '1920*1080' //视频分辨率}
})

运行

node app.js

在这里插入图片描述

出现上面打印一堆推流数据表示node服务启动成功,服务端工作就完成了

四、web客户端播放视频

web端用到jsmpeg插件播放视频,jsmpeg是个js插件能将视频流解码成图片并渲染出来。

jsmpeg.min.js下载地址:jsmpeg.min.js

新建index.html文件,jsmpeg.min.js放置同一个目录下,index.html写入

<!DOCTYPE >
<html><head><script src="./jsmpeg.min.js"></script><style>#video{width: 1000px;height: 600px;}</style></head><body><canvas id="video"></canvas><button onclick="onPlay()">播放</button><button onclick="onPause()">暂停</button><button onclick="onStop()">停止</button></body><script>var canvas = document.getElementById("video");var url = "ws://127.0.0.1:9999";//node服务ip+端口号,本机node服务默认127.0.0.1var player = new JSMpeg.Player(url, { canvas });//开始播放function onPlay() {player.play();}//暂停播放function onPause() {player.pause();}//停止播放function onStop() {player.stop();}</script>
</html>

测试:打开运行index.html,成功播放

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

将dumpbin从Visual Studio中抠出来,并使用dumpbin查看exe和dll库的依赖关系

目录 1、初步说明 2、在开发的机器上使用dumpbin工具查看dll库的依赖关系 3、将dumpbin.exe从Visual Studio中抠出来 3.1、找到dumpbin.exe文件及其依赖的dll文件 3.2、在cmd中运行dumpbin&#xff0c;提示找不到link.exe文件 3.3、再次运行dumpbin.exe提示找不到mspdb10…

SpringBoot-开启Admin监控服务

SpringBoot-Admin是一个用于管理和监控SpringBoot应用程序的开源项目。它提供了一个易于使用的Web界面&#xff0c;可以实时监控应用程序的健康状况、性能指标、日志和环境配置等信息。通过Actuator模块来收集和暴露应用程序的监控信息&#xff0c;使用Web Socket或者Server-Se…

SpringSecurity完整认证流程(包含自定义页面和自定义登录逻辑)

认证基本流程图&#xff1a; 1. 用户发起表单登录请求后&#xff0c;首先进入UsernamePasswordAuthenticationFilter ​ 在 UsernamePasswordAuthenticationFilter 中根据用户输入的用户名、密码构建了 UsernamePasswordAuthenticationToken&#xff0c;并将其交给 Authentic…

智能分析网关V4太阳能风光互补远程视频智能监控方案

一、背景需求 在一些偏远地区&#xff0c;也具有视频监控的需求。但是这类场景中&#xff0c;一般无法就近获取市电&#xff0c;如果要长距离拉取市电&#xff0c;建设的成本非常高且长距离传输有安全隐患&#xff0c;因此风光互补远程视频监控方案的需求也较多。利用风光电转化…

React Native 桥接原生实现 JS 调用原生方法

一、为什么需要桥接原生 为了满足在React 层无法实现的需求 复杂高性能的组件&#xff1a;复杂表格、视频播放原生层开发能力&#xff1a;传感器编程、widget平台属性&#xff1a;系统信息、设备信息对接第三方应用&#xff1a;相机、相册、地图 真实的开发过程中是不可能完…

开放平台系统架构设计

一、概述 背景与目标 本开放平台旨在构建一个可扩展、高可用的生态体系&#xff0c;通过提供统一标准的API接口和SDK工具包&#xff0c;让第三方开发者能够安全、高效地接入我们的服务和资源&#xff0c;实现业务的互联互通。 定位与功能描述 系统主要包含用户认证授权、资…

ffmpeg.c(4.3.1)源码剖析

文章目录 前言一、FFmpeg 源码结构图二、ffmpeg.h 头文件详解三、main 函数主要流程分析四、ffmpeg_parse_options1、命令行例子①、解析命令行 split_commandline()②、parse_optgroup()③、MATCH_PER_XXX_OPT() 2、vf 选项解析①、filters②、vf 术语③、avfilter_graph_pars…

阿里云RDMA通信库XRDMA论文详解

RDMA(remote direct memory access)即远端直接内存访问&#xff0c;是一种高性能网络通信技术&#xff0c;具有高带宽、低延迟、无CPU消耗等优点。RDMA相比TCP在性能方面有明显的优势&#xff0c;但在编程复杂度上RDMA verbs却比TCP socket复杂一个数量级。 开源社区和各大云厂…

微信扫码进入小程序特定页面

小程序配置 开发 - 开发管理 - 开发设置-普通链接二维码打开小程序 配置好的截图 如下&#xff1a;二维码规则建议是自己的域名 /mini/ 功能页面 pages/index/index 是为了方便跳转其他页面 记得把校验文件发给后端 web 端处理 二维码格式为&#xff1a;二维码规则/功能页…

怎么一边讲PPT一边录视频 如何一边录制PPT一边录制人像 录屏软件免费录屏 PPT录制怎么录制

随着新媒体技术的发展&#xff0c;短视频和直播越来越火。越来越多的小伙伴加入了视频制作的大军&#xff0c;那么你想知道怎么一边讲PPT一边录视频&#xff0c;如何一边录制PPT一边录制人像吗&#xff1f; 一、怎么一边讲PPT一边录视频 我们可以借助PPT本身自带的屏幕录制功能…

如何绘制PAD图和N-S图(详细步骤)

在软件详细设计阶段有四个要点&#xff1a;N-S图&#xff0c;PAD图&#xff0c;程序流程图&#xff0c;PDL语言 对于程序流程图的绘制较简单&#xff0c;想详细了解可以看&#xff1a; 程序流程图详解&#xff08;六大部分&#xff09; (zhihu.com) 对于PDL语言这里也不是重点…

Apache Doris (六十一): Spark Doris Connector - (1)-源码编译

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. Spark Doris Connector

Lava多模态大模型调试(基于vscode框架)

文章目录 前言一、整体概括二、launch.json文件配置三、调试展示前言 之前博客这里介绍LLava1.5多模态大模型的安装、训练、预测等。但对于你想查看源码或多或少都有些麻烦,也不利于代码调试。基于此,本文是一篇基于vscode框架调试llava大模型的教程。 一、整体概括 我是在…

基于net6的asp.net core webapi项目打包为docker镜像,并推送至私有镜像仓库harbor中

基于net6的asp.net core webapi项目打包为docker镜像&#xff0c;并推送至私有镜像仓库harbor中 0、环境说明1、打包步骤1.1 创建Asp.net core WebApi项目1.2 在Asp.net core WebApi项目根目录下创建Dockerfile文件1.3 在子系统Ubuntu20.04.4中通过docker build生成docker镜像1…

处理机调度与死锁

目录 进程调度算法先来先服务调度算法FCFS最短作业优先调度算法SJF最高优先级调度算法***HPF***高响应比优先调度算法 ***HRRN***时间片轮转调度算法***RR***多级队列调度算法MFQ 进程调度算法 进程调度算法也称为CPU调度算法 当 CPU 空闲时&#xff0c;操作系统就选择内存中…

Cacti 监控工具 | 因严重 SQL 注入漏洞而受到攻击

攻击者可以利用该问题访问Cacti数据库中的所有数据&#xff1b;并且&#xff0c;当与先前的漏洞链接时&#xff0c;它会启用 RCE。 用于监控网络性能的基于 Web 的 Cacti 开源框架中存在一个严重漏洞&#xff0c;该漏洞为攻击者提供了泄露 Cacti 整个数据库内容的方法&#xf…

windows同时安装mysql5.0和8.0步骤(完美测试)

mysql5.0和mysql8.0配置如下 1.把如下配置复制下替换到my.ini中 mysql5.0配置如下 [mysqld] # 设置3306端口 port3306 # 设置mysql的安装目录 basedirF:\mysql-5.7.38 # 设置mysql数据库的数据的存放目录 datadirF:\mysql-5.7.38\data # 允许最大连接数 max_connections200 #…

使用curl命令在Linux中进行HTTP请求

在Linux中&#xff0c;curl是一个非常强大的命令行工具&#xff0c;用于发送HTTP请求。它允许用户发送各种类型的HTTP请求&#xff0c;如GET、POST、PUT、DELETE等&#xff0c;并能够处理响应数据。 首先&#xff0c;确保您的Linux系统已经安装了curl。如果未安装&#xff0c;…

Java18:网络编程

一.对象序列化&#xff1a; 1.对象流&#xff1a; ObjectInputStream 和 ObjectOutputStream 2.作用&#xff1a; ObjectOutputSteam&#xff1a;内存中的对象-->存储中的文件&#xff0c;通过网络传输出去 ObjectInputStream:存储中的文件&#xff0c;通过网络传输出去…

数据结构-函数题

6-2.求二叉树的高度 本题要求给定二叉树的高度。 函数接口定义&#xff1a; int GetHeight( BinTree BT ); typedef struct TNode *Position; typedef Position BinTree; struct TNode{ElementType Data;BinTree Left;BinTree Right; }; 要求函数返回给定二叉树BT的高度值…