Reputation: 31
I'm a beginner in webrtc . I have used simple-peer to connect two peers on a video calling application . When a second peer is connected , his video is displayed but after a few seconds an error showing "cannot signal when peer is destroyed" is thrown . I dont know where I'm going wrong . I have attached the code below .
The code error is thrown in this line :
PeerRef.current.signal(signal);
client.js :
import React, { useEffect,useRef } from 'react';
import io from 'socket.io-client';
import Peer from 'simple-peer';
import styled from 'styled-components';
const Container = styled.div`
display: flex;
width: 100%;
height: 100vh;
flex-direction: row;
`;
const LeftRow = styled.div`
width: 40%;
height: 100%;
`;
const RightRow = styled.div`
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
`;
const Video = styled.video`
height: 50%;
width: 100%;
border: 1px solid black;
`;
const Room=(props)=>{
const socketRef=useRef();
const userRef=useRef();
const partnerRef=useRef();
const PeerRef=useRef();
useEffect(()=>{
navigator.mediaDevices.getUserMedia({video:true,audio:true}).then((stream)=>{
userRef.current.srcObject=stream;
socketRef.current=io.connect('/');
console.log("hello");
console.log(props.match.params.roomID);
socketRef.current.emit("join room",props.match.params.roomID);
socketRef.current.on("other user",(PartnerID)=>{
console.log("creator");
if(PartnerID){
console.log("partner");
PeerRef.current=createPeer(PartnerID,socketRef.current.id,stream);
}
});
socketRef.current.on("caller signal",(incoming)=>{
console.log("Caller signal from browser");
PeerRef.current=addPeer(incoming.CallerID,incoming.signal,stream);
});
socketRef.current.on("callee signal",(signal)=>{
console.log("callee signal from browser");
PeerRef.current.signal(signal);
});
})
},[]);
function handleStream(stream){
partnerRef.current.srcObject=stream;
}
const createPeer = (PartnerID,CallerID,stream) =>{
const peer = new Peer({
initiator:true,
trickle:false,
stream
});
peer.on("signal",(signal)=>{
const payload={
PartnerID,
CallerID,
signal
}
socketRef.current.emit("call partner",payload);
});
peer.on("stream",handleStream);
//peer.on("data",handleData);
return peer;
}
const addPeer = (CallerID,insignal,stream) =>{
console.log("inside addpeer");
const peer = new Peer({
initiator:false,
trickle:false,
stream
});
peer.on("signal",(signal)=>{
console.log("inside peer");
const payload={
CallerID,
signal
}
socketRef.current.emit("accept call",payload);
});
peer.on("stream",handleStream);
peer.signal(insignal);
return peer;
}
return(
<Container>
<LeftRow>
<Video autoPlay ref={userRef} />
<Video autoPlay ref={partnerRef} />
</LeftRow>
<RightRow>
</RightRow>
</Container>
);
}
export default Room;
server.js:
const express = require("express");
const http = require("http");
const app = express();
const server = http.createServer(app);
const socket = require("socket.io");
const io = socket(server);
server.listen(5000);
const rooms={};
io.on('connection',(socket)=>
{
console.log("Connected");
socket.on("join room",(roomID)=>{
console.log("User here");
if(rooms[roomID])
rooms[roomID].push(socket.id);
else
rooms[roomID]=[socket.id];
const otherUser = rooms[roomID].find(id => id!==socket.id);
socket.emit("other user",otherUser);
});
socket.on("call partner",(incoming)=>{
console.log("call partner from server");
const payload={
CallerID:incoming.CallerID,
signal:incoming.signal
}
io.to(incoming.PartnerID).emit("caller signal", payload);
});
socket.on("accept call",(incoming)=>{
console.log("accept call");
io.to(incoming.CallerID).emit("callee signal",incoming.signal);
});
});
Upvotes: 3
Views: 2204
Reputation: 11
Had the same error, I was using version 9.7.2 of simple-peer. It seems to have a bug, so bringing the version down to 9.6.2 fixed the error.
Upvotes: 1