Access and destruction of EZVIZ live broadcast and playback

The following is based on the vue project

 

1. Install

npm i ezuikit-js

2. Import

main.js

import EZUIKit from "ezuikit-js"; //导入萤石

Vue.use(EZUIKit);

3. Create a container

    <div class="video">
        <div id="video-container"></div>
        <!-- <iframe :src="url" width="100%" height="100%" style="border: none;" id="ysOpenDevice" allowfullscreen></iframe> -->
      </div>

4. Initialize the live broadcast

    // 初始化萤石视频 直播
    initVedio() {
//创建dom
      const videoParent = document.querySelector(".video"); // 获取具有 video 类的父级元素

      if (videoParent) {
        const videoContainer = document.createElement("div");
        videoContainer.id = "video-container";
        // 设置其他样式或属性
        videoParent.appendChild(videoContainer); // 将新的 <div> 元素添加到 videoParent 中
      }

      this.isLive = true;
      this.player = null;
      console.log("this.player1", this.player);

      var width = "700";
      var height = "427";
      const ezopenInit = async () => {
        try {
          this.player = new EZUIKit.EZUIKitPlayer({
            id: "video-container",
            width: width,
            height: height,
            template: "pcLive",
            url: this.videoUrl,
            // url示例: "ezopen://open.ys7.com/BA4294455/1.live",
            accessToken: this.videoToken
            // accessToken示例:
            //   "at.3hnw0vnpdbgh65qn2i47d0ydc8rqobjw-73tgrx3vut-116gert-1h4hcumkx"
          });
        } catch (error) {
          this.$message.error("发生错误: " + error.msg); // 使用this.$message进行错误提示
        }
      };
      ezopenInit().catch(error => {
        this.$message.error("发生错误: " + error.msg);
      });
      console.log("this.player2", this.player);
    },

5. Create a playback (the playback in this article is separate from the above live broadcast, you need to touch to execute the live broadcast, and you need to touch to execute the replay)

 ezopenInit() {
      // 创建dom
      const videoParent = document.querySelector(".video"); // 获取具有 video 类的父级元素

      if (videoParent) {
        const videoContainer = document.createElement("div");
        videoContainer.id = "video-container";
        // 设置其他样式或属性
        videoParent.appendChild(videoContainer); // 将新的 <div> 元素添加到 videoParent 中
      }

      this.isLive = false;

      this.player = null;

      let index = this.videoUrl.lastIndexOf(".");
      let newurl = this.videoUrl.slice(0, index);
      this.videoUrl2 = newurl + ".rec";

      var width = "700";
      var height = "427";
      const ezopenInit = async () => {
        try {
          this.player = new EZUIKit.EZUIKitPlayer({
            id: "video-container",
            width: width,
            height: height,
            template: "pcRec",  
            url: this.videoUrl2,
           
          });
        } catch (error) {
          console.error("播放器初始化错误:", error);
        }
      };
      ezopenInit();
    }

6. Destroy

    //完全关闭modal
    handleAfterClose() {
//销毁创建的对象，防止出现关闭页面依旧有声音的情况
      if (this.player) {
        this.player.stop();
        this.player.destroy();
        this.player = null;
      }

//将dom移除，下次创建视频对象在创建这个dom,防止第二次打开发现创建了两个视频
      document.getElementById("video-container").innerHTML = "";

      const videoContainer = document.getElementById("video-container");
      videoContainer
        ? videoContainer.parentNode.removeChild(videoContainer)
        : ""; // 从 DOM 中移除 <div> 元素
    },