网页端接入海康摄像头画面操作指南_如何通过ivms-4200的服务直接在自己的web中播放摄像头视频-程序员宅基地

技术标签: node.js  html5  vue.js  javascript  

一、摄像头rtsp流画面测试

首先根据相关摄像头内附的说明书对摄像头进行安装以及wifi配置或者通过网线直连,配置完成后确保摄像头画面能够在手机APP或者相关应用程序上正常播放。
然后进入海康威视官网下载并安装SADP摄像头IP搜索工具。
在这里插入图片描述
打开SADP(设备网络搜索),即能查看当前局域网下的所有海康摄像头IP地址。
在这里插入图片描述
下面进行摄像头rtsp流播放测试:
1.下载VLC media player,并安装打开。
2.打开媒体 --> 网络串流 --> 网络。
在这里插入图片描述
3.输入海康摄像头的rtsp地址并进行播放。海康的rtsp地址一般组成如下:rtsp://admin:{摄像头背后验证码或密码}@{摄像头IP地址}:554/h264/ch1/main/av_stream
在这里插入图片描述
能够正常播放后,进行下一步操作。

二、流媒体服务器搭建

要将监控画面在web端显示需要流媒体服务器的支持,当前主流的流媒体服务主要通过SRS、nginx、nodejs等搭建,下面主要介绍由node搭建的流媒体服务器。
要求电脑上有node环境,若没有请去node官网进行下载以及安装。安装完成后打开cmd输入node -v查看node版本以及检查node是否安装成功。
在这里插入图片描述
该流媒体服务器采用node-media-server插件,具体搭建流程如下:
1.新建相关文件夹。
2.使用cmd并进入新建的文件夹内,输入npm install node-media-server安装相关插件。
在这里插入图片描述
3.安装完成后在新建的文件夹内新建一个js文件,在js文件内输入相关调用以及配置代码。
在这里插入图片描述

const NodeMediaServer= require('node-media-server');
const config = {
    
    rtmp: {
    
        port: 1935,
        chunk_size: 60000,
        gop_cache: true,
        ping: 60,
        ping_timeout: 30
    },
    http: {
    
        port: 8000,
        allow_origin: '*',
    }
};
var nms = new NodeMediaServer(config)
nms.run();

4.运行node服务。
在这里插入图片描述
在这里插入图片描述
显示如上界面则表示启动完成,可以在浏览器上登录 localhost:8000/admin 查看node服务页面。
在这里插入图片描述

三、视频流转码以及推流

因为rtsp流无法直接在web端播放,因此通常将rtsp流转化为rtmp、httpFlv、hls等编码格式,因为rtmp依赖flash,hls流的延迟太大,因此选用httpFlv作为传输的码流格式,转码方式如下:
1.下载并安装ffmpeg
2.配置环境变量并在cmd使用ffmpeg -h测试。
在这里插入图片描述
3.使用ffmpeg指令对rtsp流进行转码以及推流(下方的node端地址中的STREAM_NAME_agv_1可以随意更改表示直播的“房间”)。
在这里插入图片描述
4.再次打开VLC并打开网络串流,输入httpFlv码流地址进行播放,能够正常播放即转码完成。(将上方图片的node端地址中的rtmp改为http并加入后缀.flv即http://{node服务的IP地址以及端口}/live/STREAM_NAME_agv_1.flv)。
在这里插入图片描述

四、网页显示

web端显示需要支持httpFlv格式的播放器,这边选用的是LivePlayer.js。根据其相关配置配置完后,即可在web端显示监控画面。
测试

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45350072/article/details/112346145

智能推荐

javascript 实现Vue.js路由_js将数组转化成vue路由的形式-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏6次。javascript 原生实现 Vue.js的路由切换功能,模拟单页应用上效果图:源码如下:<!-- author:helang Email:[email protected]><!DOCTYPE html><html lang="en"><head> <meta charset="U..._js将数组转化成vue路由的形式

C++——STL标准模板库——容器详解——set_c++ set容器-程序员宅基地

文章浏览阅读1.1k次,点赞24次,收藏17次。set容器和multiset容器详解。第一次接触对组的概念。使用中要小心迭代过程中插入或者删除元素迭代器迭代器失效的可能性。_c++ set容器

CRLF学习了解-程序员宅基地

文章浏览阅读1k次。在ASCII中,回车(CR)字符用十进制值13或十六进制值0x0D表示,换行(LF)字符用十进制值10或十六进制值0x0A表示。这两个字符通常一起使用,表示将光标移到下一行的开头位置。CRLF在许多操作系统和编程环境中被广泛使用,例如Windows中的文本文件和网络通信中的协议,如HTTP和SMTP。它们是文本格式化和解析的重要元素。_crlf

python全栈开发—函数再战—实现模块化设计_全栈开发与数学-程序员宅基地

文章浏览阅读256次。函数再战—熟练基础,精通技能,触类旁通之所以又整理了一遍函数,主要是因为当我进行后续学习的时候,发现函数比想象的要NB的多,于是又厚着脸皮又来了一遍,嗯,果然很NB。建议在学习的过程中遇到了难题,记得回头复习复习,也许正是那些你忽略的内容,给未来的你营造出自己是SB的难题。内容概括:函数基本语法及特性函数与局部变量返回值嵌套函数递归匿名函数函数式编程介绍高阶函数内置函数..._全栈开发与数学

在vs开发环境中用opencv读取图片,Debug模式下成功,release模式下失败的可能原因_visual studio的debug模式可以include opencv release模式不行-程序员宅基地

文章浏览阅读921次。1 检查一下release模式下的链接器的输入,其依赖的lib名称最后一个字母是没有"d",d代表debug如图:2 检查一下路径,看是否因为带中文的路径导致编码错误..._visual studio的debug模式可以include opencv release模式不行

教你一步一步使用Excel获取API接口的金融数据_excel的api key-程序员宅基地

文章浏览阅读5.6k次,点赞7次,收藏26次。在用EXCEL做量化分析的时候,经常需要通过一些金融数据平台的API接口,获取各种数据。最常用的公共API接口有Yahoo Finance,Google Finance,新浪财经,搜狐财经等。这些都不需要注册,就可以直接使用。获取方式相对简单,但数据种类不够丰富,通常只包括交易数据和财务数据。另外一些免费的金融数据平台,如国外的Quandl和国内的Tushare也都提供了API接口,数据种类更..._excel的api key

随便推点

PLC与触摸屏通信_plc和触摸屏如何通信-程序员宅基地

文章浏览阅读5.5k次。下载plc程序;a.插上线时,设置PG/PC接口会出现下载线的名字,可以单击进行修改参数,设置和PLC一样的参数(这里的地址对应接口0,1)就可以通信了;b.记住PLC上的两个接口0,1接口,不要改plc软件中的系统块参数。下载触摸屏程序;a.需要注意的是在MCGS中,设置通用串口父设备中选择COM2,COM2是485通信,然后设置设备0(PLC S7-200)中的设备地址,这里的地址对应与PLC中系统块的地址,不是实际的接口号0,1;b设置触摸屏通信地址:断电重启触摸屏。开机后.._plc和触摸屏如何通信

使用 CI/CD 优化前端构建的五种策略-程序员宅基地

文章浏览阅读311次。如今使用 CI/CD 工具是网页应用程序开发的一个必要条件。作为关键开发路径的一部分,加快构建系统的速度对于提高开发人员的生产效率是至关重要的。原文地址:5 Strategies to R..._cicd优化

Crank Storyboard Suite入门(一)_crank_storyboard_suite-v5.3.0-程序员宅基地

文章浏览阅读3.5k次,点赞4次,收藏5次。Crank Storyboard Suite是一个十分容易学习的用来设计嵌入式界面的软件,软件可以导出为Android上可执行的apk文件。下面从最简单的例子开始,建立一个如下所示的界面,上面的图标有按下的效果。1)选择File->New->Storyboard Application新近一个工程。2. 在工程里面的文件夹里_crank_storyboard_suite-v5.3.0

爬虫框架 - feapder_feapder 网盘-程序员宅基地

文章浏览阅读1.0k次。1. 前言众所周知,Python 最流行的爬虫框架是 Scrapy,它主要用于爬取网站结构性数据今天推荐一款更加简单、轻量级,且功能强大的爬虫框架:feapder项目地址:https://github.com/Boris-code/feapder2. 介绍及安装和 Scrapy 类似,feapder 支持轻量级爬虫、分布式爬虫、批次爬虫、爬虫报警机制等功能内置的 3 种爬虫如下: AirSpider 轻量级爬虫,适合简单场景、数据量少的爬虫 Spider._feapder 网盘

《数据结构与算法分析:Java语言描述》.pdf-程序员宅基地

文章浏览阅读6k次,点赞2次,收藏6次。关注“Java后端技术全栈”回复“面试”获取全套大厂面试资料程序=数据结构+算法这好比是软件工程师的“武林秘籍”。数据结构指的是数据与数据之间的逻辑关系;算法指的是解决特定问题的步骤和方..._数据结构与算法分析java语言描述pdf

PyTorch——自注意力(self-attention)机制实现(代码详解)_自注意力机制代码-程序员宅基地

文章浏览阅读8w次,点赞111次,收藏691次。参考链接https://www.bilibili.com/video/BV1JE411g7XF?p=54https://arxiv.org/abs/1706.03762https://blog.csdn.net/qq_36653505/article/details/83375160简述自注意力机制(self-attention)self-attention可以视为一个特征提取层,给定输入特征a1,a2,⋅⋅⋅ana^{1},a^{2},\cdot \cdot \cdot a^{n}a1,a2_自注意力机制代码

推荐文章

热门文章

相关标签