Vue で LiverPlayer H5 プレーヤーを呼び出して、EZVIZ クラウド ビデオ モニタリングを実現する

1. リアルタイム監視映像を再生するには、まず再生アドレスを取得する必要があります

EZVIZ クラウド公式サイト: https://open.ys7.com/help/30

 公式ドキュメントでは生放送のアドレスを取得するためのインターフェースは（新）と（旧）の2つですが、ここでは新インターフェースを使用しています。

2. 次に、インターフェイス ドキュメントのパラメータを確認します。必要なパラメータは accessToken と deviceSerial であることがわかります。次に、これら 2 つのパラメータを取得してインターフェイスを呼び出し、再生アドレスを取得します。後者のパラメータは、ビデオ表示を制御するためのものです。 、必要に応じてインポート

3. インターフェースを呼び出すとクロスドメインが発生するので、まずクロスドメインを解決する必要があります. ここでは、jquery を直接使用しています.ブロードキャスト アドレス

(取得したアドレスが rtmp 形式かどうかを忘れずに確認してください)

   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)
      });
    },

アドレスを取得したら、ページで再生する必要があります

もちろん、プレイするにはプレーヤーを使用する必要があります

これがLiverPlayer H5プレーヤーです 

ドキュメント: https://www.liveqing.com/docs/manuals/LivePlayer.html

バージョンに合わせて設定

 1. ルート ディレクトリを見つけて個別に設定します。忘れずに index.html ページに追加してください。

2. ビデオを再生する必要があるコンポーネントに登録を導入します。これは、別のポップアップ コンポーネントによって使用される el ダイアログです。最後に、取得したライブ アドレスを 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.最後に、一時停止やループ再生などのボタン機能を表示または追加したくない場合は、プレーヤーを直接設定して、構成の下のパラメーターを比較するだけです 

穴を踏む: Google Chrome ページを開くと、フラッシュ プラグインの再生がサポートされていないことが表示されます.多くのオンライン テストによると、構成のためにプラグインを個別にダウンロードすることを含め、問題は解決されていません. その後、しばらくしてページを開くと、問題は解決しますか? ! それもすごい

これまでのところ、すべて問題なく動作しています。戻ってこの問題をテストし、適切な解決策が見つかるかどうかを確認してみましょう。