网页端接入海康摄像头画面操作指南_如何通过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

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

智能推荐

华三SDN产业链分析-程序员宅基地

文章浏览阅读218次。为什么80%的码农都做不了架构师？>>> ..._h3c virtual converged framework切片

手把手教你开发第一个HarmonyOS （鸿蒙）移动应用_鸿蒙移动应用开发-程序员宅基地

文章浏览阅读1.9w次，点赞44次，收藏268次。AndroidIOSHarmonyOS （鸿蒙）文档概览-HarmonyOS应用开发官网2.1.1 系统的定位搭载该操作系统的设备在系统层⾯融为⼀体、形成超级终端，让设备的硬件能⼒可以弹性扩展，实现设备之间硬件互助，资源共享。对消费者⽽⾔，HarmonyOS能够将⽣活场景中的各类终端进⾏能⼒整合，实现不同终端设备之间的快速连接、能⼒互助、资源共享，匹配合适的设备、提供流畅的全场景体验。⾯向开发者，实现⼀次开发，多端部署。_鸿蒙移动应用开发

AndroidStudio无代码高亮解决办法_android studio 高亮-程序员宅基地

文章浏览阅读2.8k次。AndroidStudio 升级到 4.2.2 版本后，没有代码高亮了，很蛋疼。解决办法是：点开上方的 File，先勾选 Power Save Mode 再取消就可以了。_android studio 高亮

swift4.0 valueForUndefinedKey:]: this class is not key value coding-compliant for the key unity.'_forundefinedkey swift4-程序员宅基地

文章浏览阅读1k次。使用swift4.0整合Unity出现[ valueForUndefinedKey:]: this class is not key value coding-compliant for the key unity.'在对应属性前加@objc 即可。或者调回swift3.2版本_forundefinedkey swift4

Spring Security2的COOKIE的保存时间设置_springsecurity 设置cookie失效时间-程序员宅基地

文章浏览阅读1.3k次。http auto-config="true" access-denied-page="/common/403.htm"> intercept-url pattern="/login.**" access="IS_AUTHENTICATED_ANONYMOUSLY"/> form-login login-page="/login.jsp" defau_springsecurity 设置cookie失效时间

view滑动冲突解决实战篇2（外部拦截法）_viewpage2外部拦截事件-程序员宅基地

文章浏览阅读1.1k次。继上篇内部拦截法需求还是跟上篇一样。只不过这次用外部拦截法来解决；只要在父容器添加如下代码就可以解决了滑动冲突，很简单，套模板就行 // 分别记录上次滑动的坐标(onInterceptTouchEvent) private int mLastXIntercept = 0; private int mLastYIntercept = 0; @Override public bo_viewpage2外部拦截事件

随便推点

Kotlin相关面试题_kotlin面试题-程序员宅基地

文章浏览阅读1.9w次，点赞26次，收藏185次。目录一.请简述下什么是kotlin？它有什么特性？二.Kotlin 中注解 @JvmOverloads 的作用？三.Kotlin中的MutableList与List有什么区别？四.kotlin实现单例的几种方式？五. kotlin中关键字data的理解？相对于普通的类有哪些特点？六.什么是委托属性？简单说一下应用场景？七.kotlin中with、run、apply、let函数的区别？一般用于什么场景？八.kotlin中Unit的应用以及和Java中void的区别？九.Ko_kotlin面试题