问题描述
我正在尝试与 peerjs 和 vuejs 进行简单的视频聊天。我确实在浏览器上获得了我的视频源,但是当其他人加入时,我没有他们的视频源。检查后,我意识到
this.myPeer.on('call',{})
即使已拨打电话也不会触发。如果我使用 jQuery 而不是 vue,那么代码工作正常。
<template>
<div class="h-screen bg-gray-900">
<div class="flex flex-wrap justify-center items-center h-full p-5">
<div id="video-grid">
<div v-for="(video,index) in videoList" :key="index">
<video :srcObject.prop="video.stream" autoplay :muted="video.id == ownId" :id="'video-'+video.id"></video>
</div>
</div>
</div>
</div>
</template>
<script>
import io from "socket.io-client";
import Peer from "peerjs";
var socket = io.connect("http://localhost:3000");
export default {
data(){
return{
ownId:'',videoList:[],peers:{},myPeer : new Peer(undefined,{
host: '/',port: '3001'
}),myStream:''
}
},methods:{
connectToNewUser(userId,stream) {
console.log('connecting to '+userId)
const call = this.myPeer.call(userId,stream)
call.on('stream',userVideoStream => {
console.log('calling')
this.addVideoStream(userId,userVideoStream)
})
call.on('close',() => {
let i = this.videoList.map(video => video.id).indexOf(call.peer)
this.videoList.splice(i,1)
})
this.peers[userId] = call
},addVideoStream(id,stream) {
console.log('adding video to list ' + id)
this.videoList.push({stream,id})
},},mounted(){
this.myPeer.on('open',id => {
console.log('own id '+id)
this.ownId = id
navigator.mediaDevices.getUserMedia({
video: true,audio: true
}).then(stream => {
this.myStream = stream
this.addVideoStream(this.ownId,stream)
this.myPeer.on('call',call => { <!-- This function is not triggered -->
call.answer(stream)
console.log('answering')
call.on('stream',userVideoStream => {
this.addVideoStream(call.peer,userVideoStream)
})
})
socket.on('user-connected',userId => {
console.log(userId+' has joined')
this.connectToNewUser(userId,stream)
})
})
socket.emit('join-room',this.$route.params.id,id)
})
socket.on('user-disconnected',userId => {
if (this.peers[userId]) this.peers[userId].close()
})
},destroyed(){
this.myStream.getTracks().forEach(function(track) { track.stop(); })
this.myPeer.disconnect()
}
}
</script>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)