摄像头集成以及在前端展示

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 640x360 -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},

  playerOptions : {
                playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
                autoplay : false, //如果true,浏览器准备好时开始回放。
                muted : false, // 默认情况下将会消除任何音频。
                loop : false, // 视频一结束就重新开始。
                preload : 'auto', // 建议浏览器在