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

web浏览器播放rtsp视频流，海康监控API

news 文章来源：https://blog.csdn.net/qq_33982898/article/details/140899662 2024/12/23 19:33:47

概述

这里记录一下如何让前端播放rtsp协议的视频流

​ 项目中调用海康API，生成的视频流(hls、ws、rtmp等)通过PotPlayer播放器都无法播放，说明视频流有问题，唯独rtsp视频流可以播放。

但是浏览器本身是无法播放rtsp视频的，即使是使用videojs、flvjs等工具。

​ 网上的方案都是通过后端基于ffmpeg工具进行转码。那么我的理解是后端Node起到的是中转作用：调用ffmpeg工具对传入的rtsp流进行转码再传给前端

这里记录整个过程与出现的问题解决

准备

需要三部分的准备：

  • ffmpeg工具
  • nodeJS转码
  • 前端播放

ffmpeg安装与配置

  1. 下载ffmpeg https://ffmpeg.org/download.html

在这里插入图片描述
在这里插入图片描述

  1. 下载并解压完成后

    我这里放在 D:\DevelopSoftware\ffmpeg

  2. 配置环境变量

    我的电脑 => 属性 => 高级系统设置 => 环境变量 => Path => 添加 D:\DevelopSoftware\ffmpeg\bin

    在这里插入图片描述

  3. 打开cmd输入 ffmpeg 或者 ffmpeg -version

    出现东西就说明OK了

    如果 'ffmpeg' 不是内部或外部命令，也不是可运行的程序或批处理文件, 重启cmd窗口, 还是不行的话网上搜一下吧

    在这里插入图片描述

本节参考自 ffmpeg安装教程（windows版）

nodejs编写转码服务

先随便建个文件夹

npm i express express-ws fluent-ffmpeg websocket-stream

或者

yarn add express express-ws fluent-ffmpeg websocket-stream

新建 index.js

var express = require('express')
var expressWebSocket = require('express-ws')
var ffmpeg = require('fluent-ffmpeg')
var webSocketStream = require('websocket-stream/stream')
var WebSocket = require('websocket-stream')
var http = require('http')ffmpeg.setFfmpegPath('ffmpeg')// config
let rtspServerPort = 2156function localServer() {let app = express()app.use(express.static(__dirname))expressWebSocket(app, null, {perMessageDeflate: true})// :id是动态参数, 前端调用时传递, 可以去掉app.ws('/rtsp/:id/', rtspRequestHandle)app.listen(rtspServerPort)console.log('express listened on port : ' + rtspServerPort)
}function rtspRequestHandle(ws, req) {console.log('rtsp request handle')const stream = webSocketStream(ws,{binary: true,browserBufferTimeout: 1000000},{browserBufferTimeout: 1000000})let url = req.query.urlconsole.log('rtsp url:', url)console.log('rtsp params:', req.params)try {ffmpeg(url).addInputOption('-rtsp_transport', 'tcp', '-buffer_size', '102400') // 这里可以添加一些 RTSP 优化的参数.on('start', function () {console.log(url, 'Stream started.')}).on('codecData', function () {console.log(url, 'Stream codecData.')// 摄像机在线处理}).on('error', function (err) {console.log(url, 'An error occured: ', err.message)}).on('end', function () {console.log(url, 'Stream end!')// 摄像机断线的处理}).outputFormat('flv').videoCodec('copy').noAudio().pipe(stream)} catch (error) {console.log(error)}
}localServer()

运行

node index.js

在这里插入图片描述

前端调用转码服务

新建 demo.html

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script><!--  <script src="./js/flv.min.js"></script>--><style>body,center {padding: 0;margin: 0;}.v-container {width: 640px;height: 360px;border: solid 1px red;}video {width: 100%;height: 100%;}</style></head><body><div class="v-container"><video id="player1" muted autoplay="autoplay" preload="auto" controls="controls"></video></div><script>if (flvjs.isSupported()) {var videoElement = document.getElementById('player1')var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'ws://localhost:2156/rtsp/111/?url=rtsp://xxx.xxx.xxx:554/openUrl/jmQgiJi'})flvPlayer.attachMediaElement(videoElement)flvPlayer.load()}</script></body>
</html>

这两节源自 rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务

videojs + flvjs使用

yarn add video.js flv.js videojs-flvjs-es6

import videojs from 'video.js'
import flvjs from 'flv.js'
import 'video.js/dist/video-js.css'
import 'videojs-flvjs-es6'let myPlayerconst initVideo = (videoUrl) => {// videojs初始化myPlayer = videojs(document.querySelector('#videoBox'),   // video元素, vue2或vue3推荐使用ref方式{// poster: '//vjs.zencdn.net/v/oceans.png',autoplay: 'muted', //自动播放controls: true, //用户可以与之交互的控件loop: true, //视频一结束就重新开始muted: true, //默认情况下将使所有音频静音// aspectRatio: '16:9', //显示比率techOrder: ['html5', 'flvjs'], // 兼容顺序flvjs: {mediaDataSource: {cors: true,withCredentials: false,},},controlBar: {remainingTimeDisplay: {displayNegative: false,},},playbackRates: [0.5, 1, 1.5, 2],},function onPlayerReady() {this.on('play', function () {console.log('视频开始播放')})this.on('pause', function () {console.log('视频暂停播放')})this.on('error', function () {console.log('加载错误')isError.value = true})})// 播放myPlayer.reset()myPlayer.src({src: 'ws://localhost:2156/rtsp/?url=' + videoUrl,type: 'video/x-flv',})// myPlayer.load('ws://localhost:2156/rtsp/1/?url=rtsp://xxxx:554/openUrl/rMYr6w0')myPlayer.play()
}

<video ref="videoPlayer" id="videoBox" style="width:100%;height:100%;"></video>

总结

海康平台支持多种协议的视频流，如果流无法播放，可能是设备配置或者分辨率或者… 出了问题！！

这种事情当然是让后端去处理咯，是跟厂商联调还是怎么着，关我前端啥事儿！！！把精力用到更有意义的地方才是正解，例如像我一样水一篇文章， Nice！

当然，尽量直接使用海康平台API返回的流，转码始终是下策。

感谢各大佬的文章:

rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务

ffmpeg安装教程（windows版）

相关文章：

web浏览器播放rtsp视频流，海康监控API

概述 这里记录一下如何让前端播放rtsp协议的视频流 ​ 项目中调用海康API&#xff0c;生成的视频流(hls、ws、rtmp等)通过PotPlayer播放器都无法播放&#xff0c;说明视频流有问题&#xff0c;唯独rtsp视频流可以播放。 但是浏览器本身是无法播放rtsp视频的&#xff0c;即使…...

编程日记 2024/8/4 5:00:51

操作系统原理：程序、进程、线程的概念

文章目录 程序、进程、线程的概念程序&#xff08;Program&#xff09;进程&#xff08;Process&#xff09;线程&#xff08;Thread&#xff09;关系总结 在日常对操作系统的使用中&#xff0c;大家肯定对程序、进程和线程多少有所耳闻。作为操作系统的重要一部分&#xff0c;…...

编程日记 2024/8/4 4:59:48

Golang是如何实现动态数组功能的?Slice切片原理解析

Hi 亲爱的朋友们&#xff0c;我是 k 哥。今天&#xff0c;咱们聊一聊Golang 切片。 当我们需要使用数组&#xff0c;但是又不能提前定义数组大小时&#xff0c;可以使用golang的动态数组结构&#xff0c;slice切片。在 Go 语言的众多特性里&#xff0c;slice 是我们经常用到的数…...

编程日记 2024/8/4 4:58:48

SQL注入 报错注入+附加拓展知识，一篇文章带你轻松入门

第5关--------------------------------------------> 前端直接不会显示账号密码的打印&#xff1b;但是在接收前端的数据的那部分后端那里&#xff0c;会看前端传递过来的值是否正确&#xff0c;如果不正确&#xff0c;后端接收值那里就会当MySQL语句执行错误&#xff0c;…...

编程日记 2024/8/4 4:57:44

springboot项目里的包spring-boot-dependencies依赖介绍

springboot项目里的包’spring-boot-dependencies‘依赖 我们一般是在项目的pom dependencyManagement标签里引入spring-boot-dependencies&#xff0c;或者根spring-boot-starter-parent里也是继承了它,也正是因为继承了这个依赖&#xff0c;所以我们在写依赖时才不需要写版本…...

编程日记 2024/8/4 4:56:43

C# 下的限定符运算详解（全部，任意，包含）与示例

文章目录 1.限定符概述2. 全部限定符运算&#xff08;All&#xff09;3. 任意限定符运算&#xff08;Any&#xff09;4. 包含限定符运算&#xff08;Contains&#xff09;总结 当我们在C#编程中需要进行条件判断或集合操作时&#xff0c;限定符&#xff08;qualifiers&#xff…...

编程日记 2024/8/4 4:54:41

消息队列RabbitMQ部分知识

1.简述RabbitMQ的架构设计 RabbitMQ 是一个开源的消息代理&#xff0c;采用了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;其架构设计主要包括以下几个关键组件和概念&#xff1a; 1.消息生产者&#xff08; Producer&#xff09;&#xff1a; 负责发送消息到…...

编程日记 2024/8/4 4:53:40

看门狗应用编程-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板

看门狗应用编程 看门狗应用编程介绍 看门狗定时器的基本概念 看门狗是一个可以在一定时间内被复位/重置的计数器 如果在规定时间内没有复位&#xff0c;看门狗计时器溢出会对CPU产生复位信号使系统重启 有些看门狗可以只产生中断信号而不会使系统复位 I.MX6UL/I.MX6ULL So…...

编程日记 2024/8/4 4:52:39

Bug 解决 | 本地项目上线后出现错误

目录 一、前言 二、原因分析 1、本地代码误发线上 2、环境差异 3、配置差异 4、资源路径差异 5、API 接口差异 6、用量差异 一、前言 大家好&#xff0c;我是小洪爱分享。在开发上线项目的过程中&#xff0c;我们经常会遇到一种让人头疼的情况。那就是开发好的项目功能…...

编程日记 2024/8/4 4:51:37

为什么我工作 10 年后转行当程序员？逆袭翻盘！

今天文章的主人公暂且称他为 A 君。不过 A 君有点特别&#xff0c;非科班&#xff0c;工作 10 年后才转行 iOS 程序员。今年 36 岁&#xff0c;目前在某行业头部企业任职前端负责人&#xff0c;管理 40 人的前端团队。 废话不多说&#xff0c;我们开始 A 君&#xff08;为了描…...

编程日记 2024/8/4 4:50:35

见证中国数据库的崛起：从追赶到引领的壮丽征程《四》

见证中国数据库的崛起&#xff1a;从追赶到引领的壮丽征程《四》 四、未来展望&#xff1a;中国数据库的机遇与挑战新技术带来的机遇全球化竞争的挑战数据安全与隐私保护的挑战人才培养的持续挑战 【纪录片】中国数据库前世今生 在数字化潮流席卷全球的今天&#xff0c;数据库作…...

编程日记 2024/8/4 4:49:34

OpenCV||超细节的基本操作

一、图像读取 retval cv2.imread(filename[, flags]) filename&#xff1a;需要读取的图片路径名&#xff0c;支持多种图片格式&#xff0c;如JPEG、PNG、TIFF等。flags&#xff1a;一个可选参数&#xff0c;指定加载图像的颜色类型。常用的值包括&#xff1a; cv2.IMGEAD_A…...

编程日记 2024/8/4 4:48:33

算法训练（leetcode）第三十八天 | 1143. 最长公共子序列、1035. 不相交的线、53. 最大子数组和、392. 判断子序列

刷题记录 *1143. 最长公共子序列1035. 不相交的线53. 最大子数组和392. 判断子序列 *1143. 最长公共子序列 leetcode题目地址 本题和718. 最长重复子数组相似&#xff0c;只是本题不要求连续&#xff0c;需要记录前面最长的子序列&#xff0c;在此基础上累计长度。 dp[i][j]…...

编程日记 2024/8/4 4:47:32

STM32——外部中断（EXTI）

目录 前言 一、外部中断基础知识 二、使用步骤 三、固件库实现 四、STM32CubeMX实现 总结 前言 外部中断&#xff08;External Interrupt&#xff0c;简称EXTI&#xff09;是微控制器用于响应外部事件的一种方式&#xff0c;当外部事件发生时&#xff08;如按键按下、传感器信号…...

编程日记 2024/8/4 4:46:31

MySQL多实例部署

1、软件包下载 //环境&#xff1a;一台rocky Linux虚拟机&#xff0c;并且做好的基本配置及时钟同步&#xff0c;使用Xshell连接 [rootmysql ~]# yum -y install tar lrzsz libncurses* libaio perl//将包文件拖进去 [rootmysql ~]# rz -E rz waiting to receive. [rootmysql…...

编程日记 2024/8/4 4:44:28

云开发喝酒小程序3.6全新漂亮UI猜拳喝酒小程序 【已去除流量主】

云开发喝酒小程序3.6全新漂亮UI猜拳喝酒小程序 已去除流量主。UI特别漂亮&#xff0c;实属精品代码。 【已测】云开发喝酒小程序3.6漂亮UI猜拳喝酒小程序 已去除流量主。 云开发&#xff08;serverless&#xff09;小程序无需服务器&#xff0c;注册一个小程序就可以直接上线…...

编程日记 2024/8/4 4:42:27

图论进阶之路-最短路（Floyd）

时间复杂度&#xff1a;O(n^3) 使用场景&#xff1a;当需要得知任意两个点的最短距离以及其路径时使用 准备&#xff1a;需要两个矩阵 一个记录最短距离&#xff08;D&#xff09; 一个记录最短路径的最后一个结点&#xff08;P&#xff09; 其核心在于不断的判断越过中间…...

编程日记 2024/8/4 4:41:26

安装sqllab靶机之后，练习关卡报403 forbidden

解决办法&#xff1a; 在nginx的conf文件中添加上访问index.php vim /usr/local/nginx/conf/nginx.conf 保存退出 再重启一下nginx&#xff0c;就完成了。 ./nginx -s reload...

编程日记 2024/8/4 4:40:24

微信VX多开 免扫码 登录 互斥体 可视化 Exui v1.1 易语言源码附成品软件

UI设计&#xff1a; 1. EXUI界面库20240204 调用的模块&#xff1a; 1. wow64_hook_3.02.ec&#xff08;压缩包内含&#xff09; 2. 精易模块[v11.1.0].ec&#xff08;自行下载&#xff09; 更新日志&#xff1a; v1.1 2024年7月25日13:28:43 { 1. 有人反馈 设置了V…...

编程日记 2024/8/4 4:39:23

JavaEE 从入门到精通(一) ~ Maven

晚上好&#xff0c;愿这深深的夜色给你带来安宁&#xff0c;让温馨的夜晚抚平你一天的疲惫&#xff0c;美好的梦想在这个寂静的夜晚悄悄成长。 目录 前言 1.1 概念 什么是 Maven&#xff1f; Maven 的核心概念 1.2 maven依赖坐标 1.3 maven仓库 1.4 maven安装 1.5 mave…...

编程日记 2024/8/4 4:38:22

滚珠丝杆与丝杆支撑座：稳定性与精度的双重保障

丝杆支撑座是连接滚珠丝杆与电机的轴承&#xff0c;采用优质的轴承能确保支撑座与滚珠丝杆之间的刚性平衡。那么&#xff0c;滚珠丝杆搭连接杆支撑座有哪些优缺点呢&#xff1f; 正常情况下&#xff0c;丝杆支撑座能够提供稳定的支撑力&#xff0c;确保滚珠丝杆在复杂工况下保持…...

编程日记 2024/8/4 4:36:20

实验5-11 空心的数字金字塔

本题要求实现一个函数&#xff0c;输出n行空心的数字金字塔。 函数接口定义&#xff1a; void hollowPyramid( int n );其中n是用户传入的参数&#xff0c;为[1, 9]的正整数。要求函数按照如样例所示的格式打印出n行空心的数字金字塔&#xff0c;请注意&#xff0c;最后一行的…...

编程日记 2024/8/4 4:35:19

C#对象和类型

属性、方法、字段 字段和属性的区别 在C#中&#xff0c;字段&#xff08;fields&#xff09;和属性&#xff08;properties&#xff09;都是类的成员&#xff0c;它们提供了类存储数据的方式&#xff0c;但它们在用途和功能上有着明显的区别。 字段 字段通常用来存储类…...

编程日记 2024/8/4 4:34:18

免费分享一套SpringBoot+Vue图书(图书借阅)管理系统【论文+源码+SQL脚本】，帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue图书(图书借阅)管理系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue图书(图书借阅)管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 本论文阐述了一套先进的图书管理系…...

编程日记 2024/8/4 4:33:17

数据结构与算法--队列

文章目录 提要队列的定义队列的认识队列的应用队列的抽象数据类型队列的存储结构队列的链式存储结构与实现链队的进队和出队操作链队的数据类型初始化链队列入队操作出队操作队列的顺序存储结构与实现顺序队列的假溢出问题队列上溢循环队列循环队列取下一相邻单元下标运算队满与…...

编程日记 2024/8/4 4:32:16

＜Qt＞ 常用控件

目录 一、控件概述 二、QWidget 核心属性 &#xff08;一&#xff09;QWidget的核心属性概览 1. enabled 2. geometry 3. WindowFrame的影响 4. windowTitle 5. window Icon 6. windowOpacity 7. cursor 8. font 9. toolTip 10. focusPolicy 11. styleSheet 三、…...

编程日记 2024/8/4 4:27:11

关于C/C++的编译、构建、CMake、x86_amd64等问题（自用）

被这些玩意整红温了 编译器版本 x86&#xff1a;编译器为x86版本&#xff0c;输出文件为x86。amd64_x86&#xff1a;编译器为amd64版本&#xff0c;输出文件为x86。amd64&#xff1a;编译器为amd64版本&#xff0c;输出文件为amd64。x86_amd64&#xff1a;编译器为x86版本&am…...

编程日记 2024/8/4 4:25:06

【设计模式】工厂模式详解

1.简介 工厂模式是一种创建型设计模式&#xff0c;通过提供一个接口或抽象类来创建对象&#xff0c;而不是直接实例化对象。工厂模式的主要思想是将对象的创建与使用分离&#xff0c;使得创建对象的过程更加灵活和可扩展。 工厂模式主要包括以下角色&#xff1a; 抽象工厂&a…...

编程日记 2024/8/4 4:24:05

【Spring Boot】用 Spring Security 实现后台登录及权限认证功能

用 Spring Security 实现后台登录及权限认证功能 1.引入依赖2.创建权限开放的页面3.创建需要权限验证的页面4.配置 Spring Security4.1 配置 Spring MVC4.2 配置 Spring Security 5.创建登录页面6.测试权限 1.引入依赖 使用前需要引入相关依赖&#xff0c;见以下代码&#xff…...

编程日记 2024/8/4 4:23:04

PHP开发【石头剪刀布小游戏】

石头剪刀布小游戏 玩法超级简单&#xff0c;你只需要在下面选择石头、剪刀或者布&#xff0c;然后提交&#xff0c;系统就会随机生成电脑的选择&#xff0c;告诉你最终的结果哦&#xff01; 游戏规则&#xff1a; 如果你的选择和电脑一样&#xff0c;那么就是平局。如果你赢…...

编程日记 2024/8/4 4:22:02

淮安品牌网站建设/网站优化关键词

本文介绍 Stanford《From Languages to Information》课程中讲到的 单词拼写错误 纠正。背后的数学原理主要是贝叶斯公式。单词拼写错误纠正主要涉及到两个模型&#xff1a;一个是Nosiy Channel模型&#xff0c;它是贝叶斯公式中的似然函数&#xff1b;另一个模型是Language Mo…...

编程日记 2024/12/23 19:30:38

支持快钱支付的网站/网络推广图片大全

本报讯&#xff08;记者李奎&#xff09;石某等8人构成团伙在海淀盗割通讯电缆&#xff0c;招致通讯阻断36小时。往日上午&#xff0c;除一名未成年涉案人被另案告状外&#xff0c;石某等7人因破坏公用电信行动措施罪在海淀法院受审。据检方控诉&#xff0c;2010年6月30日拂晓&…...

编程日记 2024/12/23 18:36:26

我自己做个网站怎么做/sem是什么显微镜

LINUX PXE网络安装远程客户端计算机启动&#xff0c;由于BIOS设置了网卡启动&#xff0c;所以网卡PXE ROM中的程序被调入内存执行。首先&#xff0c;客户端在网络中寻找DHCP服务器&#xff0c;然后请求一个IP地址&#xff1b;同时DHCP服务器联系到TFTP服务器为此客户端发送一个…...

编程日记 2024/12/23 17:01:58

404网站怎么做/如何在网上推广自己

刘勇 Email: lyssymsina.com 本博客记录作者在工作与研究中所经历的点滴&#xff0c;一方面给自己的工作与生活留下印记&#xff0c;另一方面若是能对大家有所帮助&#xff0c;则幸甚至哉矣&#xff01; 简介 鉴于高频中心库task&#xff08;核心业务处理与存储逻辑&#xf…...

编程日记 2024/12/23 14:44:50

大连手机自适应网站建设电话/竞价推广哪里开户

本节我们将会使用jquery&#xff0c;首先我们要引入一个jquery库&#xff0c;如下&#xff1a;写入代码这里我们引入jquery库&#xff1a;“http://libs.baidu.com/jquery/1.7.2/jquery.min.js”管理员登录使用的是click单击标签来实现显示和隐藏登录窗口。使用 jquery toggle(…...

编程日记 2024/12/23 12:11:54

怎么进入网站后台图片/国外免费推广平台有哪些

git操作---跟踪分支设置和预览 从一个远程跟踪分支检出一个本地分支会自动创建所谓的“跟踪分支”。跟踪分支是与远程分支有直接关系的本地分支。 以下有三种方式创建跟踪分支&#xff08;本地分支&#xff09;&#xff1a; 1、git checkout - b <branch> <remote&…...

编程日记 2024/12/23 10:18:25