整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
需要在WEB端实时查看现场的视频监控（公司选型的是大华摄像机）
11. ffmpeg通过rtsp协议拉取视频流
2. 使用vlc media player 组件拉取视频流，在web端显示
3. 使用h5Stream在线对视频流拉取
123局域网内摄像头配置
公司选型的大华摄像机，所有摄像机出厂统一IP是192.168.1.108
这个IP是可变的，可配置，但是前提这个IP可以访问到摄像头才允许更改
12在地址栏输入192.168.1.108，第一次登陆默认账号密码都为admin，默认端口37777，第一次登陆会提醒你更改账号密码，记得不要忘记，后面视频拉取的需要用到，进入摄像头更具自己需要做个性化的配置。相关协议端口开放如下：
摄像头的ip地址穿刺
使用路由器映射的方法，需要拿到路由器的账号密码，这个得跟公司的运维沟通下。
用花生壳做穿刺，会免费赠送一个域名，但是端口是不固定的，如果配置固定的端口，花生壳需要免费收费
在百度上输入本地IP会出现公司路由的外网IP。测试下两种方式是否可以通过外网IP来访问。
拉取视频流
我选用的的是rtsp协议来拉取视频流，大华摄像机的rtsp地址格式如下：
rtsp://[账号]:[密码]@[IP]:[端口]/cam/realmonitor?channel=1&subtype=0channel=1，此属性值对应渠道。subtype=0对应使用主码流还是辅码流
不管大华摄像机也好，还是海康威视摄像机，他们官网都提供本地局域网内的摄像头管理软件。进入官网，导航找到技术支持，里面有工具软件。比如大华的可以用smartPss，海康威视的有iVMS，视频流通过可以通过多个渠道来传输，所以channel要和本地软件中输出通道一致
比如的本地地址：rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0本地摄像头IP地址做穿刺后，把账号密码换成公网的ip和端口即可。
使用h5Stream拉取视频流
h5Stream网上的配置文档很多，不做一一赘述，其主要配置文件为：conf目录下的h5ss.conf文件。
我这里用的是rtsp协议，根据自己的需要配置，一般配置一个空闲的端口即可。
在web端的显示，在h5stream安装目录里, www目录下有相关的使用样例。
优点：配置简单，实时视频同步延迟小，画面清晰。firefox,chrom,ie都可以使用缺点：web页面操作相对复杂，在使用多个摄像头，配置清单驳长，h5stream为收费软件，h5stream为收费软件，h5stream为收费软件，重要的事情说三遍原免费版，会在实时视频流播放一个小时后断流，且当前暂时没有找到破解版。我在官网找到电话，打电话过去咨询，收费是100块钱一个摄像头，具体的价格可以再谈。
vlc media player 拉取
省事儿的话先下载vlc media player安装，也可以单独下载相应的控件。下载完成后：
把rtsp地址copy进地址栏，测试是否可正常显示，若不正常请检查网络是否通畅，账号密码是否正确，ip端口是否正确，通道是否一致而在web端是根据相关的标签来的：实例如下：
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
<param name="autostart" value="true" />
<param name="allowfullscreen" value="false" />
</object>
1234链接: vlc使用操作文档.
优点：测试简单，操作简单，WEB页面操作最简单，视频清晰度无损，延迟级小。缺点：谷歌只支持43版本及其更早，现在都70+版本了。火狐更直接，直接提示不支持。现在通过安装谷歌应用程序可以解决，但是面向客户的时候，客户不会使用体验版，所以注定就不会使用面就不会广
ffmpeg拉取视频流
首先ffmpeg是十分强大，且无比灵活，使用命令行来操作，相对来说就复杂得多，网上有很多安装ffmpeg介绍和ffmpeg命令介绍，这里就不做一一赘述。ffmpeg对视频流进行拉取，转成我们需要的视频码流，比如我们使用的rtsp协议，可以转成rtmp协议或者HLS(m3u8)协议。本文着重介绍此两种，其它的协议格式，原理上相同，只是转码后页面显示的细节不同。ffmpeg允许截图：
NGINX并不是一定要用，只要能读取到此今天文件即可。我是通过nginx吧request请求，定向到此文件，当然web项目比较灵活，可以通过web来做访问。生成的文件如下：
静态资源只要支持hls协议，使用今天资源，访问test.m38u文件即可引入video.js,我使用的是7.4.1
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay width="960" height="400">
<source src="http://192.168.0.118:1935/hls/test.m38u" type='rtmp/flv'>
</video>
123缺点：此方法对网络依赖要求比较高，延迟高，容易卡顿
使用ffmpeg优缺点：优点：谷歌火狐IE都可以用。缺点： ffmpeg很强大，使用命令很灵活，很多细节问题需要琢磨，比如清晰度的问题，比如帧数的问题。ffmpeg比h5stream和vlc使用上确实麻烦许多，而且清晰度不如以上两种，延迟相对也高一下。需要建立相对完善的管理机制，因为全部使用命令，在客户页面关闭视频流时，后台还在不停的拉取视频流，造成极大的资源浪费。
近工作上有个需求，要实现监控摄像头的视频在浏览器中进行点播播放，之前没接触过这方面的技术，在网上研究了一段时间，相关的实现方案有很多，相对来说搭建比较简单同时又不需要购买付费功能的方案是基于FFmpeg和nginx的flv实现方式，总结了一下相关的实现步骤，有需要的同学可以拿去。
一、安装ffmpeg
首先需要安装ffmpeg，ffmpeg是开源的音视频处理软件，功能强大，也很稳定，既能实现视频的编解码进行格式转换，也能进行视频流的推送和拉取，同时支持rtsp、rtmp、hls等多种协议。
ffmpeg的下载地址如下：
http://ffmpeg.org/download.html
我选择的版本是4.4，大家可以根据需要自己选择合适的版本，注意下载的是ffmpeg的源码，后面要根据不同的平台进行编译安装。
ffmpeg下载页面
在编译ffmpeg之前需要安装第三方库yasm，下载地址如下：http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
将安装包上传服务器，按照如下步骤进行yasm的安装。
tar zxvf yasm-1.3.0.tar.gz
cd yasm-1.3.0
./configure
make
make install
yasm安装完后，再通过yum安装gcc编译器。
yum install gcc
gcc编译器安装完成之后就可以编译ffmpeg，并进行安装了。
tar zxvf ffmpeg-4.4.tar.gz
cd ffmpeg-4.4
./configure --enable-shared --prefix=/usr/local/ffmpeg
make
make install
ffmpeg安装完后，需要修改配置文件，引入相关的类库。
vi /etc/ld.so.conf
输入以下内容
include ld.so.conf.d/*.conf
/usr/local/ffmpeg/lib/
执行如下命令，使设置生效：
ldconfig
查看下ffmpeg版本，是否是预期的版本。
/usr/local/ffmpeg/bin/ffmpeg -version
查看ffmpeg版本
二、安装nginx
注意这里使用的nginx需要在原始nginx的基础上增加编译nginx-http-flv-module模块。nginx-http-flv-module是github上开源的项目。
github项目地址：https://github.com/winshining/nginx-http-flv-module
分别下载Nginx（http://nginx.org/en/download.html）和nginx-http-flv-module源码，进行编译安装。我使用的nginx版本是1.18.0，编译命令中--prefix参数执行nginx安装路径，--add-module参数指定nginx-http-flv-module源码路径。
cd nginx-1.18.0/
./configure --prefix=/usr/local/nginx-media --with-http_gzip_static_module --with-http_stub_status_module --with-http_ssl_module --add-module=../nginx-http-flv-module-1.2.9
make
make install
安装完成之后，修改nginx配置文件/usr/local/nginx-media/conf/nginx.conf，配置流媒体服务器。配置可以参考https://github.com/winshining/nginx-http-flv-module主页的说明样例。
三、启动推流
nginx配置完成之后，就可以使用ffmpeg从摄像头中拉取原始rtsp视频流，转换为trmp视频流，并推送到nginx服务器中，由nginx服务器对外提供flv格式的视频流。
可以通过如下命令启动推流。-i参数执行原始rtsp视频流地址，需要包含认证信息。rtmp协议地址是在nginx中配置的服务器地址。
/usr/local/ffmpeg/bin/ffmpeg -i rtsp://username:password@rtsp视频流地址 -vcodec copy -acodec copy -f flv rtmp://nginx服务器IP/myapp/s1
四、前端通过flv.js播放视频流
flv.js也是一个github上的开源项目，项目地址：https://github.com/Bilibili/flv.js/
在前端项目中引入flv.js包，在页面代码中通过flvPlayer播放视频流。url是通过nginx提供的flv的视频流地址，http://nginx地址:端口/live?port=1935&app=myapp&stream=s1
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://example.com/flv/video.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>至此，免费的流媒体服务已经搭建好了，有需要的同学可以尝试一下，本人亲自测试可用。
最近需要在web项目中显示监控视频，采用了webrtc+webrtc-streamer+coturn的方案实现，能够在公网上做很低的延时，对于实时监控视频有很好的效果，是目前来讲比较好的一个选择方案。
1、webrtc 用于视频流的显示。
2、webrtc-streamer负责去监控视频主机（这里多数是NVR或DVR）去拉取RSTP视频流，并转发到Webrtc中进行显示。
3、coturn用于webrtc与webrtc-streamer之间的通信穿透服务，主要作用是穿透做NAT穿透，让双方找到能互相找到。
网络逻辑结构图
一、webrtc-streamer安装
这里采用的是CentOS 7系统，直接采用的Docker安装，关于Docker安装可以参考《Kubernetes安装记录》的docker部分。
docker pull mpromonet/webrtc-streamer
docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer -s120.92.19.150:3478 -tnoka:noka@120.92.19.150:3478这里后面的-t和-s参数分别指向cotum的strun和tun服务，这里同内一定要用自己搭建的穿透服务，webrtc-streamer内置的服务是指向goole提供的一个服务，国内访问及其不稳定，关于cotum的安装请参照官网。这里启动好以后，就可以通过浏览器访问8000端口的服务了，这里可以通过以下地址来验证视频流服是否成功。
http://ip:8000/webrtcstreamer.html?rtsp://admin:admin@ip:554/Streaming/Channels/101如果上面的地址能播放视频，说明配置成功了，地址后面的参数是视频流的地址。
二、web端视频显示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- webrtc公用库-->
<script src="/js/adapter.js"></script>
<!-- webrtc-streamer调用库，来自webrtc-streamer-->
<script src="/js/webrtcstreamer.js"></script>
</head>
<body>
<!-- 视频显示部分 -->
<div id="play_div"></div>
<script>
var webRtcServerList = [];//视频流服务对象部分
var urls=[
'rtsp://admin:HUAN1415@192.168.1.106:554/Streaming/Channels/102',//视频流地址
'rtsp://admin:HUAN1415@210.201.225.44:554/Streaming/Channels/202'//视频流地址
];
var rsurl='http://210.201.225.42:8000/';//webrtc-streamer服务地址
//---------创建视频播放界面--------------------------------------------------------
function plays(idx){
var videoelt = document.createElement("video");//创建一个播放器
var vi_tag='videoTag_'+idx;//播放器的id
videoelt.id = vi_tag;//播放器id
videoelt.muted = true;
videoelt.width=500;
videoelt.height=600;
videoelt.controls=true;//开启进度条
document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中
var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//创建webrtc流对象
//连接视频,参数1 视频地址，参数2 音频地址（这里没有），参数3 连接参数(这里采用的是tcp,120秒超时等）
webRtcServer.connect(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0");
webRtcServerList[idx]=webRtcServer;//缓存视频流对象
}
//----------页面退出时关闭播放流---------------------
window.onbeforeunload = function() {
for(var i=0;i<webRtcServerList.length;i++){
webRtcServerList[i].disconnect();
}
}
//---------初始化加载视频----------------------------
window.onload= function() {
for(var i=0;i<urls.length;i++){
plays(i);
}
}
</script>
</body>
</html>这样就完成了整个项目实现，这里如果视频没有播放成功，最有可能是穿透服务的问题，需要检查穿透服务。
*请认真填写需求信息，我们会在24小时内与您取得联系。
