在ezuikit-js萤石云播放器Vue.js中使用beforeDestory销毁播放器实例

Posted 2023-02-05 bosaidongmomo

EZUIKit_js_v7.2_build20221125.zip
https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm

npm install ezuikit-js 

ezuikit-js

 beforeDestroy() 
    var stopPromise = this.player.stop();
    stopPromise.then((data) => 
      console.log("promise 获取 数据", data);
    );
,

问题概述

由于萤石云播放器控件stop方法,在关闭取流通道之前,会先重置播放器所有页面布局。
而在Vue控件中,使用v-if对控件进行重置和销毁,在执行befeoreDestory函数时,已经将dom元素销毁了。故stop函数在执行时, this.reSetTheme找不到dom元素的位置,直接终止执行。
执行到这里的时候,流未停止关闭。所以会产生,你在播放另外一个视频,但是页面上有两个声音，程序里有两个流在占用内存。

源码概述

播放器js

<template>
  <div class="hello-ezuikit-js">
    <div :id="id"></div>
    <div style="color: black">
      <button v-on:click="stop">暂停</button>
      <!--  <button v-on:click="play">播放</button>
      <button v-on:click="openSound">打开声音</button>
      <button v-on:click="closeSound">关闭声音</button>
      <button v-on:click="startSave">开始录制</button>
      <button v-on:click="stopSave">停止录制</button>
      <button v-on:click="capturePicture">截屏</button>
      <button v-on:click="fullScreen">全屏</button>
      <button v-on:click="getOSDTime">getOSDTime</button>
      <button v-on:click="ezopenStartTalk">开始对讲</button>
      <button v-on:click="ezopenStopTalk">结束对讲</button>
      <button v-on:click="destroy">销毁</button> -->
    </div>
  </div>
</template>

<script>
// 这是从dist包里拿到的数据包JS 然后稍加修改的js,更改已在下文中给出。
import EZUIKit from "./ezuikit";
// 这是引用原文js
// import EZUIKit from "ezuikit-js";
export default 
  name: "HelloWorld",
  props: 
    msg: String,
    col: 
      type: Number,
      default: 1,
    ,
    row: 
      type: Number,
      default: 1,
    ,
    id: 
      type: String,
      default: "",
    ,
    channelNo: 
      type: String,
      default: "",
    ,
    deviceSerial: 
      type: String,
      default: "",
    ,
    accessToken: 
      type: String,
      default: "",
    ,
  ,
  data() 
    return 
      player: null,
    ;
  ,
  watch: 
    // 开发者文档 http://open.ys7.com/doc/zh/uikit/uikit_javascript.html
    // 当url变更,则替换
    deviceSerial(n, o) 
      this.$message("切换线路");
      this.player.stop();
      // 切换播放地址场景（注意先执行stop方法停止上次取流）
      this.player.play(
        url: `ezopen://open.ys7.com/$this.deviceSerial/$this.channelNo.live`,
        accessToken: this.accessToken,
      );
    ,
  ,
  mounted() 
    console.log(this.accessToken, this.deviceSerial, this.channelNo);
    let width =
      document.getElementsByClassName("grid-container")[0].clientWidth /
      this.col;
    let height =
      document.getElementsByClassName("grid-container")[0].clientHeight /
      this.row;
    var accessToken = this.accessToken;
    let player = new EZUIKit.EZUIKitPlayer(
      id: this.id, // 视频容器ID
      accessToken: accessToken,
      url: `ezopen://open.ys7.com/$this.deviceSerial/$this.channelNo.live`,
      // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
      //template: 'simple',
      template: "pcLive",
      plugin: ["talk"], // 加载插件，talk-对讲
      width: width,
      height: height,
    );
    this.player = player;

    window.addEventListener("resize", this.resize, true);
  ,
  created() ,

  beforeDestroy() 
    var stopPromise = this.player.stop();
    stopPromise.then((data) => 
      console.log("promise 获取 数据", data);
    );
    window.removeEventListener("resize", this.resize, true);
  ,
  methods: 
    resize() 
      let width =
        document.getElementsByClassName("grid-container")[0].clientWidth /
        this.col;
      let height =
        document.getElementsByClassName("grid-container")[0].clientHeight /
        this.row;
      this.player.reSize(width, height);
    ,
    getUrl() 
      return axios(
        method: "POST",
        url: "https://open.ys7.com/api/lapp/v2/live/address/get",
        params: 
          accessToken: this.accessToken,
          deviceSerial: this.serial.trim(),
          channelNo: this.channelNo.trim(),

          protocol: 1,
        ,
        headers: 
          "Content-Type": "application/x-www-form-urlencoded",
        ,
        withCredentials: false,
      ).then((res) => 
        return res;
      );
    ,

    play() 
      var playPromise = this.player.play();
      playPromise.then((data) => 
        console.log("promise 获取 数据", data);
      );
    ,
    stop() 
      var stopPromise = this.player.stop();
      stopPromise.then((data) => 
        console.log("promise 获取 数据", data);
      );
    ,
    getOSDTime() 
      var getOSDTimePromise = this.player.getOSDTime();
      getOSDTimePromise.then((data) => 
        console.log("promise 获取 数据", data);
      );
    ,
    capturePicture() 
      var capturePicturePromise = this.player.capturePicture(
        `$new Date().getTime()`
      );
      capturePicturePromise.then((data) => 
        console.log("promise 获取 数据", data);
      );
    ,
    openSound() 
      var openSoundPromise = this.player.openSound();
      openSoundPromise.then((data) => 
        console.log("promise 获取 数据", data);
      );
    ,
    closeSound() 
      var openSoundPromise = this.player.closeSound();
      openSoundPromise.then((data) => 
        console.log("promise 获取 数据", data);
      );
    ,
    startSave() 
      var startSavePromise = this.player.startSave(`$new Date().getTime()`);
      startSavePromise.then((data) => 
        console.log("promise 获取 数据", data);
      );
    ,
    stopSave() 
      var stopSavePromise = this.player.stopSave();
      stopSavePromise.then((data) => 
        console.log("promise 获取 数据", data);
      );
    ,
    ezopenStartTalk() 
      this.player.startTalk();
    ,
    ezopenStopTalk() 
      this.player.stopTalk();
    ,
    fullScreen() 
      this.player.fullScreen();
    ,
    destroy() 
      var destroyPromise = this.player.destroy();
      destroyPromise.then((data) => 
        console.log("promise 获取 数据", data);
      );
    ,
  ,
;
</script>

主页面

<template>
  <div class="container">
    <div class="background">
      <a-row type="flex">
        <a-col class="card-title" flex=" 0 1 50%">视频监控 </a-col>
        <a-col flex="1 1 20%">
          <!-- 1-5按钮 -->
          <a-button
            v-for="(item, index) in adapt"
            :key="index"
            class="button"
            @click="changeVolumn(item.col, item.row)"
            type="primary"
            > item.col x item.row </a-button
          >
          <a-button @click="goBack" class="button" type="primary"
            >返回</a-button
          >
        </a-col>
      </a-row>
      <div v-if="urls.length > 0" :class="'grid-container ' + gridColumn">
        <!-- -->
        <player
          v-for="(item, i) in urls"
          :ref="`play-$i`"
          :key="i"
          :row="row"
          :col="column"
          :id="'play-' + i"
          :accessToken="item.accessToken"
          :url="item.url"
          :deviceSerial="item.deviceSerial"
          :channelNo="item.channelNo"
          :name="item.name"
        />
      </div>
    </div>
    <!-- 分页 -->
    <a-pagination
      @change="pageChange"
      size="small"
      v-model="current"
      :total="total"
      :pageSize="row * column"
    />
  </div>
</template>

代码修改

ezuikit.js原生代码

ezuikit.js修改后代码