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

一、摄像头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端显示监控画面。

本文链接：https://blog.csdn.net/weixin_45350072/article/details/112346145

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Android初步进阶之事件总线使用_intent事件总线-程序员宅基地

文章浏览阅读125次。不同的Activity和Fragment之间的信息交互，总是使用广播可不是个好办法。使用EventBus或者otto是个不错的选择。先说明一下EventBus的三要素以及它的四种ThreadMode。三要素：Event：事件。任意类型的对象。（浮想连篇）Subscriber：事件订阅者。Publisher：事件发布者。四种ThreadMode：POSTING(默认)：发布事件和接收事件在一个线程中。MAIN：事件的处理会在UI的线程中执行。处理不能太长时间，否则会导致ANR。B_intent事件总线

美化HTML复选框（checkbox）的CSS样式_css checkbox样式美化-程序员宅基地

文章浏览阅读376次。在Web开发中，经常需要使用HTML复选框（checkbox）来实现用户的选择和多选功能。然而，默认的HTML复选框样式通常比较简单和普通，无法满足一些特殊设计需求。为了提升用户体验和界面美观度，我们可以使用CSS来自定义HTML复选框的样式。通过以上的HTML和CSS代码，我们成功地实现了一个自定义样式的HTML复选框。，我们为标签元素留出了空间来放置自定义的复选框样式，同时设置了。，我们将其定位在复选框内的适当位置，并设置了一些样式属性如。在上述代码中，我们使用了一个隐藏的复选框和一个相邻的。_css checkbox样式美化

Qt如何实现后台运行，无界面进程(不是系统托盘)_qt 界面程序转无界面工程-程序员宅基地

文章浏览阅读2.8k次。一招就好：_qt 界面程序转无界面工程

解决安卓模拟器系统中已经是root用户，mount仍然报错：Permission denied_mount: permission denied (are you root?)-程序员宅基地

文章浏览阅读3.4k次。错误信息：root@android:/ # mount -o rw,remount,rw /systemroot@android:/ # mount -o rw,remount,rw /system mount: Permission denied原因分析：可能是系统在启动的时候/system目录已经被分成ro（read-only）权限。所以需要在启动的预先设置为rw权限。1. 找..._mount: permission denied (are you root?)

计算机丢失concrt140,小编教你解决concrt140 dll 【解决教程】的技巧_-程序员宅基地

文章浏览阅读4.5w次。近日有小伙伴发现电脑出现问题了，在突然遇到concrt140 dll时不知所措了，对于concrt140 dll带来的问题，其实很好解决concrt140 dll带来的问题，下面小编跟大家介绍concrt140 dll解决方法：丢失CONCRT140.dll，怎么办？答：分析及解决：网上下载这个DLL文件，将其放置到system32目录下面。重启系统，或者在CMD下面运行regsvr32*.dl..._concrt140.dll下载教程

微信小程序源码案例大全_微信小程序switch页面demo-程序员宅基地

文章浏览阅读4.3k次，点赞4次，收藏62次。微信小程序demo：足球，赛事分析小程序简易导航小程序demo：办公审批小程序Demo：电魔方小程序demo：借阅伴侣微信小程序demo：投票微信小程序demo：健康生活小程序demo：文章列表demo 微商城（含微信小程序）完整源码+配置指南微信小程序Demo：一个简单的工作系统微信小程序Demo：用于聚会的小程序微信小程序Demo：Growth 是一款..._微信小程序switch页面demo

随便推点

busybox构建根文件系统_busybox mount-程序员宅基地

文章浏览阅读1.3k次，点赞2次，收藏14次。rootfs有两种格式：nfs方式启动的文件夹形式的rootfs和用来烧录的镜像形式的rootfs。一、busybox移植1、busybox下载busybox是一..._busybox mount

sass-loader版本过高_sass loader-程序员宅基地

文章浏览阅读8.6k次，点赞11次，收藏20次。今天在学习狂神的vue实战上手的时候运行项目就死了，配置了半天终于好了第一个错误：Module build failed: TypeError: loaderContext.getResolve is not a functionsass-loader版本太高解决:（1和2选一个）修改配置文件，重新安装//1.修改sass-loader的版本为^7.3.1//2.重新安装配置环境npm install卸载当前，重新下载// 卸载当前版本npm uninstall sass_sass loader

C程序设计第五版(谭浩强)-第四章习题_1、什么是算术运算?什么是关系运算?什么是逻辑运算?-程序员宅基地

文章浏览阅读1.7k次，点赞5次，收藏12次。1、什么是算术运算？什么是关系运算？什么是逻辑运算？算术运算：即“四则运算”，是加法、减法、乘法和除法四种运算的统称；关系运算：所谓“关系运算”就是“比较运算”，将两个数值进行比较，判断其比较的结果是否符合给定的条件；逻辑运算：逻辑运算又称布尔运算，有与、或、非三种基本逻辑运算；2、C语言中如何表示“真”和“假”？系统如何判断一个量的“真”和“假”？C语言编译系统在表示逻辑运算结..._1、什么是算术运算?什么是关系运算?什么是逻辑运算?

iptables-程序员宅基地

文章浏览阅读65次。iptables介绍和禁icmpnetfilter --> iptables 防火墙名字是netfilter iptables是命令1.filter（过滤包，用的最多的,）内建三个链： 1.INPUT作用于进入本机的包 2.OUTPUT作用于本机送出的包 3.FORWARD作用于那些跟本机无关的包2.nat (主要用处是..._linux iptables 计数器实现在哪

Win7/10-Anaconda3-【Python3.7】详细安装教程_python3.7版本的anaconda-程序员宅基地

文章浏览阅读1.1w次，点赞19次，收藏89次。Win7/10-Anaconda3-【Python3.7】详细安装教程一.资源下载二.安装过程2.1 详细过程2.2 环境变量三.检查是否安装成功3.1 检查开始菜单3.2 cmd控制台检查一.资源下载第一种方式（镜像下载）由于Anaconda3-python3.7属于老版本的，所以 Anaconda官网已经不存在了，大家可以去清华镜像下载自己所需要的，为什么去清华镜像下载呢？因为下载的快呀~链接: 清华镜像-Anaconda3-python3.7-5.3.1这个版本.第二种方式这个_python3.7版本的anaconda

《重构-改善既有代码》-程序员宅基地

文章浏览阅读1.2k次，点赞15次，收藏21次。1、如果你发现自己需要为程序添加一个特性，而代码结构使你无法很方便地达成目的，那就先重构哪个程序，使特性的添加比较容易的进行，然后再添加特性2、重构前，先检查自己是否有一套可靠的测试机制，这些测试必须有自我检验能力3、重构技术就是以微小的步伐修改程序，如果你犯下错误，很容易便可发现它4、任何一个傻瓜都能写出计算机可以理解的代码，唯有写出人类容易理解的代码，才是优秀的程序员5、重构（名词）：对软件内部结构的一种调整，目的是在不改变软件可观察行为的前提下，提高其可理解性，降低其修改成本。