food/src/views/layout/components/main/site/index.vue

<template>
  <div>
    <video
      ref="video"
      autoplay
      controls
      playsinline
      muted
      width="640"
      height="360"
    ></video>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: 'http://82.156.122.87:80/rtc/v1/whep/?app=live&stream=083AF27BB2D0',
      sdk: null
    }
  },
  mounted () {
    this.startPlay()
  },
  methods: {
    async startPlay () {
      if (this.sdk) {
        this.sdk.close()
        this.sdk = null
      }

      this.sdk = new window.SrsRtcWhipWhepAsync()
      this.$refs.video.srcObject = this.sdk.stream

      try {
        const session = await this.sdk.play(this.url)
        console.log('播放成功，session:', session)
      } catch (e) {
        console.error('播放失败', e)
      }
    }
  }
}
</script>