视频监控 ezuikit.js-Toy模板网

这篇具有很好参考价值的文章主要介绍了视频监控 ezuikit.js。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

视频监控

1、官网下载js包

https://open.ys7.com/mobile/download.html

2、（把下载好的ezuikit.js、 js包）放进vue 的 static 下

3、在index.html引入

<script src="static/ezuikit.js"></script>

4、关闭eslint

config/index.js

useEslint: false, // (设置为false）

5、组件中使用

<video
 id='myPlayer'
 src='你的视频播放地址'
 controls // 是否使用控制器 
 autoplay //是否自动播放
></video>

<script>     
    let palyer
    setTimeout(function(){ 
      player=new EZUIKit.EZUIPlayer('myPlayer')
    },2) 
    // 注意：因为vue项目是一次性读取数据，初始化的时候要设延迟，不然会报找不到dom             
    palyer.stop() // 页面跳转时注意关闭视频流，vue跳转原有任务不会停止   
</script>

完整的代码如下：文章来源地址https://www.toymoban.com/news/detail-546666.html

<template>
  <el-dialog
    append-to-body
    destroy-on-close
    :title="videoname"
    :visible="show"
    top="10vh"
    width="40%"
    :before-close="handleClose"
  >
    <div
      class="videoPlayerOnline"
      v-loading.fullscreen="loading"
      element-loading-text="加载中,请稍后......"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div id="myPlayer" class="myplayer" ref="myPlayer"></div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false
    },
    videoname:{
      type:String,
      default:"",
    },
    videourl:{
      type:String,
      default:"",
    },
    videotoken:{
      type:String,
      default:"",
    }
  },

  data() {
    return {
      projId: 56800,
      loading: false,
      player: null,
      show: false
    }
  },

  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal, newVal) {
      this.show = this.addOrUpdateVisible;
      if (this.show == true) {
        this.$nextTick(() => {
          this.initVideoPlayer(this.videoname,this.videourl,this.videotoken);
        })
      }
    }
  },

  mounted() {},

  methods: {
    handleClose(done) {
      if (this.player.stop) {
        this.player.stop();
        this.player = null;
      }
      this.$emit("changeShow", "false");
      done();

    },

    //初始化视频
    initVideoPlayer(name,url,token) {
      this.loading = true;
      this.videoname = name;
      if (this.player) {
        this.player.stop();
        this.player = null;
      }
      // console.log(this.$refs.myPlayer);zz

      this.player = new EZUIPlayer({
        id: "myPlayer",
        url: url,
        accessToken: token,
        // url: "ezopen://open.ys7.com/D76895974/7.live", // 监控地址
        // accessToken: "at.8lz1o5grbxjtbc118f5awz4n8edfqpnm-2a3a3xrudd-08r5q74-gxlc6toxn", //通过官网或接口获取的accesstoken
        width: this.$refs.myPlayer.offsetWidth - 2,
        height: this.$refs.myPlayer.offsetHeight - 2,
        autoplay: true,
        decoderPath: "/static", //*必填，请填写ezuikit绝对路径
        handleError: error => {
          this.loading = false;
          // console.log("播放错误回调函数，此处可执行播放成功后续动作");
        },

        handleSuccess: () => {
          this.loading = false;
          // console.log("播放成功回调函数，此处可执行播放成功后续动作");
        }
      })

      // 这里是打印日志，本例抛出到播放页面
      // this.player.on('log', str => {
      //   console.log((new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str))
      // })
    }
  }
}
</script>


<style lang="scss" scoped>
.videoPlayerOnline {
  height: 48vh;
  display: flex;
  font-size: 1rem;
  padding-bottom: 20px;
  .myplayer {
    flex: 1;
  }
}
</style>

到了这里，关于视频监控 ezuikit.js的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！