vue 萤石_记录Vue结合萤石视频ezuikit.js的爬坑记录

1.前言

由于开发需要，项目需要接入萤石的视频监控。萤石官方提供了三种协议的的视频方式，hls，rtmp，ezopen。三种协议是视频直播有一定差别，由于hls有十多秒的延迟，不符合项目的要求，所以本人采用了延迟最低的ezopen。在使用的过程中遇到了很多很多的坑，即使在尝试别人的解决方案依旧无用。希望这篇文章对使用的同学有所帮助。

2.初探

看看官方文档，他有一个UIKit JavaScript的demo示例，请使用的同学先下载官方demo示例。同时看看官方文档他是这么描述使用的：

官方示例demo是使用原生的书写形式没有使用框架，刚开始看到官方示例就照着他模仿写一些，我把官方demo的ezuikit.js和它的js复制粘贴到我的项目当中。现在我的vue目录是这样的，其中static就是装入了我复制的文件。static目录和js目录分别如下图：

现在我的Vue代码模仿着官方文档书写如下，为了让大家看清楚整个.vue复制给了大家：

.media-container {

padding-top: 50px;

height: 100vh;

width: 100%;

div {

height: