vue项目里对接海康rtsp_对接海康视频前端页面

尽管提前知道做关于摄像头的项目，也提前学习了相关的知识，可是到了正在需要动手的时候，才发现一步一个坑（可能是自己操作问题）。不过好在最后借助海康提供的插件，勉强实现了需求。做完成就感满满，一定要记录下，省的下次用到忘了，而且发现网上大多数要不就是太复杂，以我目前的知识储备，看不懂，要不就是已经不能使用了。

一、准备方案

因为最开始我准备的是用flv.js来实现所需要的需求。借助的是这位大佬的笔记：使用flv.js实现flv格式的监控视频流播放

html：

<video   muted autoplay id="=flvBlock"></video>

js:

<script>
import flvjs from '@/assets/static/flv.js'";
export default {
    data(){
        return{
            url:""//有可能不止一个所以方便切换
        }
    }，
    mouted(){
        this.beginVideo()
    },
    methods:{
        beginVideo(){
            // 获取video节点
            const videoElement = document.getElementById('flvBlock');
            if (flvjs.isSupported()) {
                flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    url: this.url,//flv格式流地址
                    cors:true//跨域设置，不过不知道有没有用，因为最后flv不行。
                },{
                    enableWorker: false, //不启用分离线程
                    enableStashBuffer: false, //关闭IO隐藏缓冲区
                    reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
                    autoCleanupSourceBuffer: true //自动清除缓存
                });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load(); //加载
                flvPlayer.play();//播放
            }
        }
    }
}
</script>

后端同事给我返回的是一个rtsp视频流链接，本打算让后端转成flv格式的，不过因为一些原因不可行，就想又想了其他方案，看了海康平台的介绍，发现不光可以返回rtsp，还可以返回rtmp和hls格式的，但又听领导说另外两种格式有些什么限制。就依旧想怎么播放rtsp流，

二、最终实现：

最后只能借助于海康平台提供的插件来实现。用到的是视频web插件 地址：open.hikvision.com/download/5c… 最后实现的效果图：

找到上图这个，立即下载会得到一个压缩包，解压后得到一些dom案例。开发指南也可以下载下来。里面有详细的教程。不过刚刚下载的包里也有，在doc文件夹下。

准备：

1.首先要安装bin下的插件：安装完需要重启电脑。