摄像头集成以及在前端展示qq41906696的博客-

1.视频流协议：
RTMP协议：
（1）是流媒体协议。
（2）RTMP协议是 Adobe 的私有协议，未完全公开。
（3）RTMP协议一般传输的是 flv，f4v 格式流。
（4）RTMP一般在 TCP 1个通道上传输命令和数据
RTSP协议
（1）是流媒体协议。
（2）RTSP协议是共有协议，并有专门机构做维护。.
（3）RTSP协议一般传输的是 ts、mp4 格式的流。
（4）RTSP传输一般需要 2-3 个通道，命令和数据通道分离。
HTTP协议
（1）不是是流媒体协议。
（2）HTTP协议是共有协议，并有专门机构做维护。
（3）HTTP协议没有特定的传输流。
（4）HTTP传输一般需要 2-3 个通道，命令和数据通道分离

我这边拿到的海康摄像头，市面上大多数摄像头的视频流都是基于RTSP协议，因此摄像头的集成采用直播推流的方式进行效果展示。

海康威视：
RTSP地址：rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/ av_stream
默认IP地址：192.168.1.64
port: 端口号默认为554，若为默认可不填写。
codec：有h264、MPEG-4、mpeg4这几种。
channel: 通道号，起始为1。例如通道1，则为ch1。
subtype: 码流类型，主码流为main，辅码流为sub。

集成步骤：

1. 获取海康摄像头的视频流（基于RTSP协议的视频流）
   （1） 登陆摄像头IP地址，修改摄像头基本配置，如IP等
   注意在摄像头账号密码设置的时候,不能包含@等这样的字符，会给流地址解析造成影响,导致视频流无法播放
   （2） 使用VLC播放工具检查流地址是否可用
2. 流媒体服务器搭建
   （1） rtsp转码 目前没有浏览器支持rtsp流，所以需要转码
   格式：m3u8格式（基于HLS协议 延迟较大），FLV格式（基于RTMP协议 几乎没延迟） 转码方式：ffmpeg进行转码+推流
   (2)ffmpeg -i “rtsp://账号:密码@IP:554/h264/ch1/main/av_stream” -f flv -r 25 -s 640×360 -an rtmp://localhost:1935/live/test
   第一个URL为视频流地址 第二个地址为流媒体地址,ip后面路径可更换
   （3）用VLC再次检验是否推流成功
   3.前端选用合适的播放器进行播放
   Vue：（1）HLS 流，需要安装 videojs-contrib-hls
   （2） RTMP流，需要安装 videojs-flash npm install vue-video-player -S

VUE前端展示
1.npm install vue-video-player -S
2.要么在main.js 要么写在自己需要的那个页面 我这边用在自己的页面
import videojs from ‘video.js’
import ‘video.js/dist/video-js.css’
import ‘vue-video-player/src/custom-theme.css’
import {videoPlayer} from ‘vue-video-player’
import ‘videojs-flash’

components: {videoPlayer},

<video-player  class="video-player vjs-custom-skin"        ref="videoPlayer"        :playsinline="true"        :options="playerOptions"     ></video-player>   playerOptions : {                 playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度                 autoplay : false, //如果true,浏览器准备好时开始回放。                 muted : false, // 默认情况下将会消除任何音频。                 loop : false, // 视频一结束就重新开始。                 preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）                 language : 'zh-CN',                 aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）                 fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。                 techOrder: ['flash'], // 兼容顺序                 flash: {                 hls: {                     withCredentials: false                 },                // swf: SWF_URL                 },                 sources : [ {                     type : "rtmp/flv",                     src : ''//url地址                 } ],                 poster : "", //你的封面地址                 width: document.documentElement.clientWidth,                 notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。             /*     controlBar : {                     timeDivider : true,//当前时间和持续时间的分隔符                     durationDisplay : true,//显示持续时间                     remainingTimeDisplay : false,//是否显示剩余时间功能                     fullscreenToggle : true  //全屏按钮                 } */             } 流媒体搭建参考：https://blog.csdn.net/little__superman/article/details/89071764  这个文章讲的很清晰