<template>
  <!-- <video controls :src='require("@/assets/Example/d1.mp4")' autoplay muted class="video-stream" v-bind="$attrs" -->
  <video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
</template>

<script>
import { HttpLivePlayer } from "./videoStream.js"

export default {
  name: 'Video',
  props: {
    camId: {
      type: String,
      default: null
    },
    url: {
      type: String,
      default: null
    }
  },
  mounted() {
    const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url });
    this.$once("hook:beforeDestroy", () => player.destroy())
  }
}
</script>

<style lang='scss' scoped>
.video-stream {
  background-color: #000;
}
</style>
