preface

Recently I met a requirement to access surveillance video in live mode in a VUE project, using the fluorite open platform plug-in. We thought we could handle the demand casually, but we encountered many pits in the middle.

1. Import the euikit.js file

According to the fluorite platform documentation, download the relevant JS files and import them first.

The first way to import external JS files in a Vue project is to import them directly on the desired page using import.

If you open the euikit.js file, you will find that the js file is a self-executing anonymous function that returns an EZUIKit object. Therefore, you can import the file using the EZUIKit object directly.

import '.. /.. /.. /libs/ezuikit.js'
export default {
  // ...
  methods:{
    initPlayer(){
        const player = new EZUIKit.EZUIPlayer('Video container ID'}}}Copy the code

This import method works fine, but is not very readable and will eventually prompt ESLint at compile time that EZUIKit is not defined.

To make the code more readable, add a line at the end of the euikit.js file to export EZUIKit:

export default EZUIKit;
Copy the code

The code of the page to be introduced is:

import EZUIKit from '.. /.. /.. /libs/ezuikit.js'
Copy the code

In this way, EZUIKit can be trusted to use.

2. Re-render the DOM structure

The scenario I have made is that when switching different options, the live broadcast address will be switched accordingly and different videos will be loaded.

When you create an EZUIKit object, the DOM structure changes. When you create an EZUIKit object, the DOM structure changes.

DOM structure in code:

<div class="video-content">
      <video id="myPlayer" controls playsinline webkit-playsinline autoplay width="800" height="600">
        <source :src="Live Address" type="rtmp/flv">
      </video>
  </div>
Copy the code

When new ezuiKit.ezuiPlayer (‘myPlayer’) is executed, the source in the above HTML code is replaced with Object and the live video is loaded.

In other words, after a video address is loaded successfully, the source tag is no longer displayed on the page. In this case, it is useless to replace the live address. A search of the fluorite open platform documentation also failed to find the corresponding content of the reload video.

The final solution is to re-render the DOM structure and reload the new video.

The V-if command re-renders the DOM structure each time it is displayed, adds the V-if command to the div tag of the nested video, sets the value of v-if to false each time it switches the corresponding options, and when the new video address is requested, Set v-if to true and re-execute new ezuiKit.ezuiPlayer (‘myPlayer’) to load the new video.

Optimization: When the V-if is switched between false and true, it will cause the whole video block to flash, which is very bad experience. Add a black mask layer under the video block. When the video disappears, the black mask layer below the video block will be displayed, and the visual experience will be slightly better.

The end of the

This method of reloading the video is a last resort. If you know of a better way, please leave a comment