vue3 + vite使用EasyWasmPlayer.js多路播放监控直播流

<template>
  <div class="live-stream-container">
    <div
      v-for="stream in streams"
      :key="stream.id"
      class="live-stream-player"
    >
      <easy-wasm-player
        :video-url="stream.url"
        :cover-url="stream.cover"
        :width="stream.width"
        :height="stream.height"
        :autoplay="true"
        class="live-stream-easy-wasm-player"
      ></easy-wasm-player>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import EasyWasmPlayer from './EasyWasmPlayer.vue';
 
const streams = ref([
  {
    id: 1,
    url: 'http://example.com/stream1',
    cover: 'http://example.com/cover1.jpg',
    width: 640,
    height: 480
  },
  {
    id: 2,
    url: 'http://example.com/stream2',
    cover: 'http://example.com/cover2.jpg',
    width: 854,
    height: 480
  }
  // 可以添加更多直播流
]);
</script>
 
<style scoped>
.live-stream-container {
  display: flex;
  flex-wrap: wrap;
}
.live-stream-player {
  margin: 10px;
}
.live-stream-easy-wasm-player {
  /* 自定义播放器样式 */
}
</style>

在这个例子中，我们创建了一个简单的Vue 3组件，用于展示多路直播流。我们使用了v-for来循环遍历streams数组，为每一个直播流创建了一个EasyWasmPlayer实例。每个播放器都会自动播放（:autoplay="true"）。这个例子展示了如何在Vue 3 + Vite项目中集成EasyWasmPlayer来多路播放监控直播流。