Call LiverPlayer H5 player in Vue to realize EZVIZ cloud video monitoring

1. First of all, to play the real-time monitoring video, you must obtain the playback address

EZVIZ cloud official website: https://open.ys7.com/help/30

 There are two interfaces (new) and (old) to obtain the live broadcast address in the official document. The new interface is used here

2. Next, look at the parameters on the interface document, you can see that the required parameters are accessToken and deviceSerial, and then get these two parameters to call the interface to get the playback address, the latter parameters are to control the video display, import as needed

3. There will be cross-domain when calling the interface, so you need to solve the cross-domain first. Here, jquery is used directly, because jquery has been configured to save trouble. It is lazy, so you can get the live broadcast address

(Remember to check whether the obtained address is in rtmp format)

   getChannelUrl(data) {
      let param = {
        deviceSerial: this.ruleFormBottom.equipmentNumber,
        protocol: 4,
        accessToken: data.accessToken,
        channelNo: data.channelNo,
      };
      $.ajax({
        url: `https://open.ys7.com/api/lapp/v2/live/address/get`,
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        data: param,
      }).done((res) => {
         console.log(res)
      });
    },

After getting the address, you need to play it on the page

Of course, you need to use a player to play

Here is the LiverPlayer H5 player 

Documentation: https://www.liveqing.com/docs/manuals/LivePlayer.html

Configure according to your version

 1. Find the root directory and configure them separately, remember to add them to the index.html page

2. Introduce registration in the component that needs to play video, here is the el-dialog used by a separate pop-up component, and finally assign the obtained live address to videoUrl

<template>
  <el-dialog
    title="查看"
    :visible.sync="dialogVisible"
    width="50%"
    height="40"
    :before-close="handleClose"
    :modal-append-to-body="false"
    :append-to-body="false"
  >
    <div class="videoBox">
        <LivePlayer ref="li_test" :videoUrl="videoUrl" fluent autoplay
        :controls="false"
        />
    </div>
  </el-dialog>
</template>

<script>
import LivePlayer from "@liveqing/liveplayer";

export default {
  components: {
    LivePlayer,
  },
  data() {
    return {
      ezvizPlay: null,

      videoUrl: "",

      dialogVisible: false,
    };
  },
 
  methods: {
    handleClose(done) {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.videoBox {
  background: lightblue;
}
</style>

3. Finally, if you want to not display or add button functions such as pause and loop playback, the player can be set directly, just compare the parameters under the configuration 

Stepping on the pit: When the Google Chrome page is opened, it will prompt that the flash plug-in playback is not supported. According to many online tests, including downloading the plug-in separately for configuration, the problem has not been solved. Then open the page after a while and the problem goes away? ! It's also amazing

Everything works fine so far, let's go back and test this problem to see if we can find a good solution.