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>

<style lang="scss" scoped>
  .player-box {
    overflow: visible;
  }

  .videoCon {
    position: relative;
    width: 100%;
    height: 100%;

    .videoOperation {
      position: absolute;
      right: 20px;
      top: 60px;
      width: 150px;
      height: 200px;
      background: rgba(255, 255, 255, .6);
      border-radius: 20px;

      .direction {
        position: relative;
        height: 150px;

        i {
          font-size: 34px;
        }

        li {
          width: 30px;
          height: 30px;
          position: absolute;
          cursor: pointer;
        }

        .up {
          left: 50%;
          margin-left: -15px;
          top: 10px;
        }

        .down {
          left: 50%;
          margin-left: -15px;
          bottom: 10px;
        }

        .left {
          top: 50%;
          margin-top: -15px;
          left: 10px;
        }

        .right {
          top: 50%;
          margin-top: -15px;
          right: 10px;
        }
      }

      .changeSize {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;

        i {
          font-size: 22px;
          font-weight: bold;
          cursor: pointer;
          display: block;
          width: 30px;
          height: 30px;
        }
      }
    }
  }
</style>