当第一个用户连接时,Peerjs call.on('stream')不会运行

2024-04-20 06:46:32 发布

您现在位置:Python中文网/ 问答频道 /正文

希望你今天过得愉快!我正在构建一个利用python flask和peerjs的zoom clone应用程序,并将该项目部署到Heroku。这是我的项目的链接:https://project-skynet.herokuapp.com/

问题是,当我在电脑上加入房间两次时,我可以看到第二个视频流(也是我)出现。然而,当我在电脑上加入房间,然后用手机再次加入时,手机上的视频流不会出现在我的电脑客户端上。但如果我再次使用电脑加入视频室,所有三个视频流都会弹出

我试着用很多方法调试它,问题是当我的手机视频进入房间时,call.on('stream')代码块没有执行。这是我的密码:

烧瓶服务器:

from skynet_app import app
from flask import render_template, redirect, request
from flask_socketio import SocketIO, join_room, leave_room, send, emit, disconnect
from uuid import uuid4
socketio = SocketIO(app, cors_allowed_origins='*')

users = {}

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/process-join', methods=['post'])
def processJoin():
    roomName = request.form['room']
    return redirect(f'/{roomName}')

@app.route('/<roomId>')
def room(roomId):
    return render_template('room.html', roomId = roomId)


@socketio.on('join-room')
def joinNewRoom(roomId, userId):
    print('join room requrest received!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
    join_room(roomId)
    emit('user-connected', userId, room=roomId)
    

@socketio.on('client-disconnect-request')
def disconnection():
    print('disconnection requet received, disconnecting the client')
    emit('removal', broadcast=True)
    emit('redirect-home')
    

@socketio.on('message')
def sendMessage(message):
    emit('create-message', message, broadcast=True)
    print('message received')

if __name__ == '__main__':
    socketio.run(app)

script.js

const ROOM_ID = "d9bf37c6-ab34-4153-8437-bf3bed93e275";
let myid = ''
const socket = io("/", { transports: ["websocket"] });
const videoGrid = document.getElementById("video-grid");
const myVideo = document.createElement("video");
myVideo.muted = true;

// let peer = new Peer(undefined, {
//     secure: true
// });
var peer = new Peer({
    config: {'iceServers': [
        // { url: 'stun:stun.l.google.com:19302' },
        { url: 'turn:numb.viagenie.ca', credential: 'muazkh', username:'webrtc@live.com' }
    ]}
});
// username = prompt('Human, what is your name?')


//when a user is connected to the peer server
//adding video
function addVideoStream(video, stream) {
    video.srcObject = stream
    video.setAttribute('autoplay', '');
    video.setAttribute('muted', '');
    video.setAttribute('playsinline', '');
    video.addEventListener('loadedmetadata', () => {
        video.play();
        videoGrid.append(video);
        
    })
}

function connect(userId, stream) {
    console.log('new user detected!');
    const call = peer.call(userId, stream);
    console.log(call);
    const video = document.createElement("video");
    
    call.on("stream", userStream => {
        console.log('adding video stream!');
        addVideoStream(video, userStream);
    })
    socket.on('removal', ()=>{
        console.log('detected user removal request');
        video.remove();
        call.close();
    })
}
peer.on("open", id => { 
    console.log("peer connection open!");
    myid = id;
    console.log(myid);
    socket.emit("join-room", ROOM_ID, id);
})

navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,
})
.then((stream) => {
    myVideoStream = stream;
    addVideoStream(myVideo, stream);
    
    socket.on("user-connected", userId => {
        if (userId != myid) {
            console.log(`connecting to user: ${userId}`)
            connect(userId, stream);
        }
    })

    peer.on("call", call => {
        call.answer(stream);
        const video = document.createElement("video");
        call.on("stream", userStream => {
            addVideoStream(video, userStream);
        })
    })
    
    
    document.getElementById('close').onclick = () => {
        console.log('emmiting event');
        socket.emit('client-disconnect-request');
    }
    
    socket.on('redirect-home', ()=>{
        window.location.href ='/';
    })
});


text = document.querySelector('#chat_message');
send = document.getElementById("send");
messages = document.querySelector('.messages');

send.addEventListener('click', ()=> {
    if (text.value.length != 0) {
        socket.emit("message", text.value);
        text.value='';
        console.log("message emitted!");
    }
})

text.addEventListener('keydown', (e)=> {
    if (e.key === 'Enter' && text.value.length != 0) {
        socket.emit("message", text.value);
        text.value='';
        console.log("message emitted!");
    }
})


socket.on('create-message', message => {
    console.log('start creating message')
    messages.innerHTML = messages.innerHTML + 
    `<div class="message">
    <b><i class="far fa-user-circle"></i> <span> User </span> </b>
    <span>${message}</span>
    </div>`;
})

//debug tool
socket.on("connect_error", (err) => {
    console.log(`connect_error due to ${err.message}`);
});

谢谢你的帮助!希望你有一个伟大的一天