网页端接入海康监控摄像头画面

网页端接入海康摄像头画面一、摄像头rtsp流画面测试首先根据相关摄像头内附的说明书对摄像头进行安装以及wifi配置或者通过网线直连，配置完成后确保摄像头画面能够在手机APP或者相关应用程序上正常播放。然后进入海康威视官网下载（https://www.hikvision.com/cn/download_more_393.html）并安装SADP摄像头IP搜索工具。打开SADP(设备网络搜索)，即能查

雯浅

10289人浏览 · 2021-09-10 12:49:58

雯浅 · 2021-09-10 12:49:58 发布

网页端接入海康摄像头画面

一、摄像头rtsp流画面测试
首先根据相关摄像头内附的说明书对摄像头进行安装以及wifi配置或者通过网线直连，配置完成后确保摄像头画面能够在手机APP或者相关应用程序上正常播放。
然后进入海康威视官网下载（https://www.hikvision.com/cn/download_more_393.html）并安装SADP摄像头IP搜索工具。

打开SADP(设备网络搜索)，即能查看当前局域网下的所有海康摄像头IP地址。

1、（此步骤可以省略，只是为了看视频流地址是否可用）下载VLC media player（https://www.videolan.org/vlc/），并安装打开。用vlc插件搭建本地rtsp流服务器（具体步骤视频详解https://www.bilibili.com/video/BV1Ha4y1x7ue?spm_id_from=333.999.0.0）
媒体 -->流 -->网络（输入网络URL：rtsp://admin:3312345@169.132.123.64/live.sdp） -->串流–>添加rtsp
在这里插入图片描述

在这里插入图片描述

2、进行摄像头rtsp流播放测试：打开媒体 --> 网络串流 --> 网络。

二、流媒体服务器搭建
1、前期准备：
1.下载node.js：https://nodejs.org/zh-cn/
2.下载ffmpeg：http://ffmpeg.org/download.html
要将监控画面在web端显示需要流媒体服务器的支持，当前主流的流媒体服务主要通过SRS、nginx、nodejs等搭建，下面主要介绍由node搭建的流媒体服务器。
要求电脑上有node环境，若没有请去node官网进行下载以及安装。安装完成后打开cmd输入node -v查看node版本以及检查node是否安装成功。
2、安装，配置环境变量
1.安装node.msi软件包，安装完成会自动配置环境变量。
2.安装并配置ffmpeg环境变量
配置完成后：在cmd命令窗口输入 ffmpeg，会显示下列信息，如果没有，重新下载ffmpeg设置环境变量
在这里插入图片描述
配置node，在桌面新建一个node文件夹，在cmd命令窗口输入 npm install node-rtsp-stream，会显示下列信息

在node文件夹中创建server.js

Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp://admin:xxzx6265@195.254.62.66/live.sdp',//根据自己的拉流地址账号密码
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 25, // options with required values specify the value after the key
'-s': '1024 768',
'-b:v': '4000k',
'-qscale': 1
}
})

在cmd命令窗口输入 node C:\Users\Administrator\Desktop\node\server.js，会显示下列信息
在这里插入图片描述
此窗口不能关闭，因为正在通过ffmpeg拉流
在jsmpeg-master文件夹中创建html
（jsmpeg-master文件下载
链接：https://pan.baidu.com/s/1emFYt1Uxb65_rLUdtjtA7w
提取码：crua）

<html>
<body>
    <canvas id="canvas"></canvas>
</body>

<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
    player = new JSMpeg.Player('ws://localhost:9999', {
      canvas: document.getElementById('canvas') // Canvas should be a canvas DOM element
    })    
</script>
</html>

运行html就能显示效果了