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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.前言

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

2.初探

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

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

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

<style scoped lang="scss">
    .media-container {
        padding-top: 50px;
        height: 100vh;
        width: 100%;

        div {
            height: 200px;
            width: 100%;
            background-color: red;
        }
    }
</style>

<template>
    <div class="media-container">
        <div id="playWind"></div>
    </div>
</template>

<script>
    import \'../../../../static/ezuikit.js\'

    export default {
        data() {
            return {
                playerInstance: null
            }
        },

        mounted() {
            this.initPlayer()
        },

        methods: {
            /**
             * 初始化播放器实例
             */
            initPlayer() {
                this.playerInstance = new EZUIKit.EZUIPlayer({
                    id: \'playWind\',
                    autoplay: true,
                    url: \'ezopen://open.ys7.com/序列号/1.hd.live\',
                    accessToken: \'xxx\',
                    decoderPath: \'\',
                    width: \'400\',
                    height: \'300\'
                });
            },
        }

    }
</script>

　　按照常理我们需要引入ezuikit.js文件，直接可以使用我代码所写的引入形式，引入之后就像官方示例一样new一个实例。但是我们回到浏览器一看报错了：

 第一个错误是萤石下载的demo，ezuikit.js报错。正常人可能很这么想，别人官方写得东西怎么会报错，完了是不是我的东西哪里写错了，赶紧上网找解决方案，典型面向百度编程。其实我一开始的反应也是这样的，但是这样很久都没有解决。然后就静下来，打开它的ezuikit源码文件看看什么原因。好我们定位到这个报错的地方。

 175行，可能大家都发现为什么报错了，i 没有定义就使用了，肯定报错呀。当然在你原生的时候语法要求并没有这么严格，他是不会报错的。这是官方js的书写人员犯了一个小错误。那我就给他加一个let那就定义了，所以现在代码改为（如下图），回到浏览器打开看不会报错了。

回到来看看第二个报错。JSPlugin没有定义，仔细观看官方文档的同学应该都发现了，其实这个JSPlugind对应就是下图的decorderPath路径，如果你的路径写错了肯定是JSPlugin未定义，那这个路径到底怎么书写：

 　　官方文档说需要绝对路径（这个绝对路径意思是你部署到服务器上的时候，你在网站输入的服务器部署这个文件路径要在浏览器上找得到才算成功），其实我开始不是很明白，然后我们来尝试看看它的源码是怎么样的，我们就知道如何书写了，定位到浏览器报错的地方：

 　　我们可以看到报错地方在1331行，但是我们看看1325行发现了他是怎么找到这个路径的，就是使用我们的参数后面拼接/js/jsPlugin得到的。那现在就清楚这个路径怎么书写了。有的同学可能会直接把vue项目打包部署到服务器上，但是这样依旧会JSPlugin is not defined。因为即使你在vue中引入了这个JSPlugin的js文件，但是经过打包之后，文件的名字就会发生变化。你打包的服务器上路径依旧都是错误的。那解决办法就是手动自己在Vue目录的public下创建一个static目录，然后把所有的资源都放在这个static下，为什么放在public目录，原因在于Vue的打包的时候是不会解析这个publc目录，他会把public目录下的文件原封不动的输出到你的dist中，这样就不怕打包之后文件名称或者路径错误，当然如果不知道的话就build之后，在dist文件中创建这个目录也可以。最后部署到服务器上就可以了。最后Vue打包目录如下图，static就是装有官方的js：

 点击static：

 js装有：

 最后配置这么写：

 最后部署到服务器上就可以正常使用了。

总结：

　　整个视频的引用真的很多坑，有时有错误的时候要大胆看看别人的源码怎么写的，总比一直百度找解决方案好。

以上是 记录Vue结合萤石视频ezuikit.js的爬坑记录 的全部内容， 来源链接： utcz.com/z/375161.html

回到顶部