使用twilio断开相机馈送

问题描述

我正在尝试与twilio，vue和laravel建立群组视频聊天。目前，我可以播放视频供稿，但是当 一个人单击离开房间按钮，看起来就像冻结了另一个人的一端。

检查控制台时出现此错误

[Vue warn]: Error in v-on handler: "TypeError: track.detach is not a function"

由于track.detach来自twilio的文档，我不确定我哪里出错了。 这是我的Vue模板

<template>
  <div class="p-5">
    <h1 class="text-2xl mb-4">Video Chat</h1>
    <button @click="shareScreen">
      Share screen
    </button>

    <button @click="leaveRoom">
      Leave room
    </button>

    <div id="video-chat-window" class="grid grid-flow-row grid-cols-2 grid-rows-2 gap-4"></div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        accesstoken: '',room: []
      }
    },methods: {
      getAccesstoken(){
        const _this = this
        const axios = require('axios')

        // Request a new token
        axios.get('/api/access_token').then(function (response) {
          _this.accesstoken = response.data
        }).catch(function (error) {
          console.log(error);
        }).then(function () {
          _this.connectToRoom()
        });
      },connectToRoom(){
        const { connect,createLocalVideoTrack } = require('twilio-video');

        connect( this.accesstoken,{ name:'cool room' }).then(room => {

        this.room = room;

        console.log(`Successfully joined a Room: ${room}`);

        const videoChatwindow = document.getElementById('video-chat-window');

        createLocalVideoTrack().then(track => {
          videoChatwindow.appendChild(track.attach());
        });

        room.on('participantConnected',participant => {
          console.log(`Participant "${participant.identity}" connected`);

          participant.tracks.forEach(publication => {
            if (publication.isSubscribed) {
              const track = publication.track;
              videoChatwindow.appendChild(track.attach());
            }
          });

          participant.on('trackSubscribed',track => {
            videoChatwindow.appendChild(track.attach());
          });
        });
      },error => {
            console.error(`Unable to connect to Room: ${error.message}`);
        });
      },leaveRoom(){
        this.room.on('disconnected',room => {
          // Detach the local media elements
          room.localParticipant.tracks.forEach(track => {
            const attachedElements = track.detach();
            attachedElements.forEach(element => element.remove());
          });
        });

        // To disconnect from a Room
        this.room.disconnect();
      }
    },mounted(){
      console.log('Video room loading...')

      this.getAccesstoken()
    }
  }
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）