web端播放rtsp视频流(摄像头监控视频)教程及window下开机自启动部署

这篇具有很好参考价值的文章主要介绍了web端播放rtsp视频流(摄像头监控视频)教程及window下开机自启动部署。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

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


一、ffmpeg是什么?

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

二、ffmpeg安装

1.下载

ffmpeg下载地址

web显示监控摄像头,前端,音视频
进入官网选择window图标-点击windows builds form gyan.dev

web显示监控摄像头,前端,音视频
进入内页下拉找ffmpeg-release-essentials.zip点击下载

下载完解压

web显示监控摄像头,前端,音视频

在bin目录下有个ffmpeg.exe 程序运行入口
web显示监控摄像头,前端,音视频

2.安装

  ffmpeg添加到全局环境变量

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

web显示监控摄像头,前端,音视频
点击环境变量,在系统变量中找到Path点击编辑

web显示监控摄像头,前端,音视频
浏览-选择ffmpeg解压出来的bin目录

web显示监控摄像头,前端,音视频
确定-确定-确定关闭窗口

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

web显示监控摄像头,前端,音视频


三、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

web显示监控摄像头,前端,音视频
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

web显示监控摄像头,前端,音视频

出现上面打印一堆推流数据表示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.1
    var player = new JSMpeg.Player(url, { canvas });

    //开始播放
    function onPlay() {
      player.play();
    }

    //暂停播放
    function onPause() {
      player.pause();
    }

    //停止播放
    function onStop() {
      player.stop();
    }
  </script>
</html>

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

web显示监控摄像头,前端,音视频

五、window下开机自启动部署

window环境(服务器)下开机自启动推流实现,一般用于本地局域网使用

1.node项目根目录下新建start.bat 脚本并写入

@echo off
cd /d %~dp0
node app.js
exit

web显示监控摄像头,前端,音视频

此时双击start.bat就能自动运行app.js

2.新建init.vbs脚本写入

CreateObject("WScript.Shell").Run "cmd /c D:\javaworkspace\node\start.bat",0

其中D:\javaworkspace\node\start.bat换成自己的start.bat路径

3.vbs脚本放入开机自启动文件夹

win+R运行shell:startup打开开机自启动文件夹把init.vbs放入
web显示监控摄像头,前端,音视频
web显示监控摄像头,前端,音视频
这样每次开机都会自启动推流服务,而且是在后台静默推流隐藏cmd窗口。

demo示例

文章顶部提供了demo示例,从网上找的公用测试rtmp资源(未找到rtsp资源用rtmp代替,该方案2种格式都支持),rtmp随时都可能失效,如失效请换成自己的资源测试。文章来源地址https://www.toymoban.com/news/detail-846156.html

到了这里,关于web端播放rtsp视频流(摄像头监控视频)教程及window下开机自启动部署的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WSL2通过OpenCV调用并展示本机摄像头的RTSP视频流

    本篇博客的由来如上图哈哈,WSL2 相关安装教程可以参考我之前的博客:Win11安装WSL2和Nvidia驱动 更多文章欢迎来我的博客小站看呀,会有更多的技术细节~ ubuntu上请执行 或者编译安装 如果报错 Could NOT find OpenSSL ,安装如下依赖即可解决 下载解压 EasyDarwin Easydarwin是国内团队开

    2024年02月09日
    浏览(71)
  • WSL2 ubuntu子系统OpenCV调用本机摄像头的RTSP视频流做开发测试

    由于WSL2环境与主机系统隔离,访问本机摄像头是有限的,但是,可以通过第三方库或网络摄像头来解决这个问题,本文将本地摄像头通过rtsp流来给WSL2访问。 详见链接:https://blog.csdn.net/weixin_46119406/article/details/132271955?spm=1001.2014.3001.5501 Easydarwin是国内团队开发的开源流媒体框架

    2024年02月11日
    浏览(43)
  • 使用nginx和ffmpeg搭建HTTP FLV流媒体服务器(摄像头RTSP视频流->RTMP->http-flv)

    名词解释   RTSP (Real-Time Streaming Protocol) 是一种网络协议,用于控制实时流媒体的传输。它是一种应用层协议,通常用于在客户端和流媒体服务器之间建立和控制媒体流的传输。RTSP允许客户端向服务器发送请求,如播放、暂停、停止、前进、后退等,以控制媒体流的播放和

    2024年02月16日
    浏览(51)
  • Qt推流程序(视频文件/视频流/摄像头/桌面转成流媒体rtmp+hls+webrtc)可在网页和播放器远程观看

    推流直播就是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号从手机端,电脑端,摄影机端打包传到服务器的过程。“推流”对网络要求比较高,如果网络不稳定,直播效果就会很差,观众观看直播时就会发生卡顿等现象,观看体验比较糟糕。主流

    2024年02月04日
    浏览(66)
  • ffmpeg从摄像头获取视频流

    使用FFmpeg获取本地摄像头设备 ffmpeg -list_devices true -f dshow -i dummy ffmpeg -f dshow -i video=\\\"e2eSoft iVCam\\\" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp rtsp://127.0.0.1/test ffmpeg -f dshow -i video=\\\"OBS Virtual Camera\\\" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp

    2024年02月11日
    浏览(46)
  • OpenCV获取网络摄像头实时视频流

    参考文章: [常用工具] OpenCV获取网络摄像头实时视频流_opencv网络摄像头 [常用工具] OpenCV获取网络摄像头实时视频流_opencv网络摄像头_落痕的寒假的博客-CSDN博客 在使用OpenCv处理视频时,无论是视频文件还是摄像头画面,都要使用VideoCapture类来进行每一帧图像的处理。当我们

    2024年02月01日
    浏览(48)
  • opencv基本操作二(读取视频流与保存视频、读取摄像头并保存视频)

    opencv常用 读视频函数 cv2.VideoCapture 、 cv2.VideoCapture.get 等,可以参考这里 opencv常用 写视频函数 cv2.VideoWriter 等可以参考这里 ,其中视频格式可以参考这里 videoCapture.read() 是按帧读取视频, ret,frame 是获 .read() 方法的两个返回值。其中 ret 是布尔值,如果读取帧是正确的则返回

    2023年04月08日
    浏览(85)
  • 网络摄像头-流媒体服务器-视频流客户端

    当涉及交通事件检测算法和摄像头视频数据处理时,涉及的代码案例可能会非常复杂,因为这涉及到多个组件和技术。以下是一个简单的Python代码示例,演示如何使用OpenCV库捕获摄像头视频流并进行实时车辆检测,这是一个常见的交通事件检测任务。请注意,这只是一个入门

    2024年02月09日
    浏览(61)
  • Vue实现摄像头视频分屏, 使用flv.js接收rtmp/flv视频流

    1. 现有的平台系统播放实时视频。 因为用户电脑都是Linux系统,无法直接使用海康前端SDK,讨论决定由后台推视频流,简单调研后发现最流行的是flv,而且有B站开源的flv.js适配。前期后台推给我RTMP前缀的视频流,我尝试使用video.js,西瓜视频等都失败了,后来后端改为http前

    2024年02月03日
    浏览(51)
  • 树莓派学习:学习opencv+用opencv获取树莓派mjpg摄像头视频流

    目录 前提步骤 打开树莓派摄像头 查看是否有图像,登录游览器打开树莓派IP地址的8080端口 获取mjpg的视频流url 代码 先设定好mjpg的视频流的url 利用opencv库中的v2.VideoCapture类读取mjpg视频流   cv2.VideoCapture() 检查摄像头是否成功打开,如果没有,则打印错误消息并退出程序 

    2024年02月03日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包