希望你今天过得愉快!我正在构建一个利用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}`);
});
谢谢你的帮助!希望你有一个伟大的一天
目前没有回答
相关问题 更多 >
编程相关推荐