easywasmplayer组件封装 - 渲染监控视频

介绍

• 使用的物联网视频监控 分为 h264、h265解码格式 使用的 easywasmplayer 播放器 下面有npm的链接
• 监控为 flv 格式、有h264 、h265格式, 需要打开监控后必须关闭 在组件里面生命周期结束之前 调用了关闭接口。
• videodata 参数: 关闭监控时候需要传入进来的
• videoPlay 方法 是加载视频的data参数 是通过this.$ref调用的这个方法
• 如何配置可以看 easyWasmPlayer.js 文档

可能遇到的问题

• 问题:本地可以查看视频 线上不能查看
• 原因可能是：libDecoder.wasm 文件的问题,nginx代理的问题,地址配置对了和文件格式配置对了即可。返回的类型必须是wasm,给nginx配置这个格式,网上搜

<template>
  <div class="videoCon">
    <div id="wasmPlayer_video1">div>
    <div class="videoOperation">
      <ul class="direction">
        <li class="up" @click="videoOperation('UP')"><i class="el-icon-caret-top">i>li>
        <li class="down" @click="videoOperation('DOWN')"><i class="el-icon-caret-bottom">i>li>
        <li class="left" @click="videoOperation('LEFT')"><i class="el-icon-caret-left">i>li>
        <li class="right" @click="videoOperation('RIGHT')"><i class="el-icon-caret-right">i>li>
      ul>
      <p class="changeSize"><i class="el-icon-plus" @click="videoOperation('ZOOM_IN')">
      i> <i class="el-icon-minus" @click="videoOperation('ZOOM_OUT')">i>p>
    div>
  div>

template>

<script>
  /**
   * @description https://www.npmjs.com/package/@easydarwin/easywasmplayer?activeTab=readme
   */
  // 接口服务
  import {stopPlay, tallOperate} from "@/api/device";
  // 物联网播放器
  export default {
    name: "wasmPlayer",
    data() {
      return {
        wasm_player: null,
        operateArr: {
          UP: 10,
          DOWN: 10,
          LEFT: 10,
          RIGHT: 10,
          ZOOM_IN: 10,
          ZOOM_OUT: 10,
        }
      };
    },
    props: {
      videoData: null
    },
    methods: {
      // 加载监控
      videoPlay(data) {
        try {
          this.wasm_player = new WasmPlayer(
            null,
            "wasmPlayer_video1",
            function (e) {
              // console.log(e)
            },
            {Height: true}
          );
          this.wasm_player.play(data["flv"], 1);
        } catch (e) {
          console.log(e.message);
        }
      },
      // 关闭视频推送的流
      async stopPlay() {
        if (this.wasm_player === null) {
          return;
        }
        // 结束 播放
        this.wasm_player.destroy()
        let form_data = new FormData();
        form_data.append("deviceId", this.videoData["deviceId"]);
        form_data.append("channelId", this.videoData["channelId"]);
        form_data.append("streamId", this.videoData["streamId"]);
        let res = await stopPlay(form_data);
        if (res.code === 0) {
          console.log("pause the device");
        }

        this.wasm_player === null
      },
      // 高点的监控 上 下 左 右 的 移动........
      videoOperation(type) {
        let form_data = new FormData();
        form_data.append("deviceId", this.videoData["deviceId"]);
        form_data.append("channelId", this.videoData["channelId"]);
        form_data.append("operateType", type);
        form_data.append("num", this.operateArr[type]);
        tallOperate(form_data).then(res => {
          console.log(res);
        });
      }
    },
    beforeDestroy() {
      this.stopPlay();
    }
  };
</script>