如何解决使用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 举报,一经查实,本站将立刻删除。