PeerJs传输MediaStream时变更问题(摄像头关闭场景)
视频聊天应用MediaStream传输异常问题
我使用Next.js 14、Express、socket.io、PeerJs开发视频聊天应用时,遇到以下问题:关闭摄像头加入房间时,发送的MediaStream被对方接收后发生了变更。
场景1:我已在房间内,新用户加入
useUpdateEffect(() => { if (!peer) return; socket.on( "user:joined", ({ peerId: remotePeerId, muted: remoteMuted, visible: remoteVisible, name: remoteName, email: remoteEmail, image: remoteImage, }) => { toast.success(`${remoteName} joined`); // Calling new user console.log("My stream", stream?.getTracks()); const call = peer.call( remotePeerId, stream as MediaStream, // my stream { metadata: { user: { email: data?.user?.email, name: data?.user?.name, image: data?.user?.image, }, muted, visible, }, }, ); call.on("stream", (remoteStream: MediaStream) => { console.log("User b stream", remoteStream.getTracks()); addConnection({ peerId: remotePeerId, connection: call, stream: remoteStream, muted: remoteMuted, visible: remoteVisible, name: remoteName, email: remoteEmail, image: remoteImage, }); }); // On new user answer }, ); return () => { socket.off("user:joined"); }; }, [peer]);
场景2:我作为新用户加入房间
useUpdateEffect(() => { if (!peer) return; peer.on("call", (call: any) => { const { peer: remotePeerId, metadata } = call; const { user: remoteUser, muted: remoteMuted, visible: remoteVisible, } = metadata; call.answer(stream); // * answers incoming call with my stream console.log("My stream", stream?.getTracks()); call.on("stream", (remoteStream: MediaStream) => { console.log("User a stream", remoteStream.getTracks()); addConnection({ peerId: remotePeerId, connection: call, stream: remoteStream, muted: remoteMuted, visible: remoteVisible, name: remoteUser.name, image: remoteUser.image, email: remoteUser.email, }); }); // * new stream stream call.on("close", () => toast.success(`${remoteUser.name} has left the room`), ); }); }, [peer]);
传输前后Video Tracks对比
| 第一个用户发送的Video Tracks | 第二个用户收到的Video Tracks |
|---|---|
![]() | ![]() |
| 第一个用户收到的Video Tracks | 第二个用户发送的Video Tracks |
![]() | ![]() |
我期望发送与接收的Tracks完全一致。
项目源码仓库:ZAKHAROV-Artem/stack-overflow-problem
内容的提问来源于stack exchange,提问作者Артем Захаров
相关产品推荐
相关产品推荐





