WebRTC(simple-peer) doesn't get the signal after I added APIs on server - webrtc

I am using simple-peer and it really worked well on server before I added APIs for my project. I already did secure with https in the beginning and the only thing that has changed is releasing the server with APIs... Here is my code and now I only can check console.log(1), (3) for initiator peer and console.log(2), (8) for requesting peer. On requestinng peer internet tab, "Uncaught ReferenceError: process is not defined" this error occurs and I don't know why this error occurs on client side. Also it worked well on both of Chrome and Edge but now I can't even get my own stream on Chrome.
const myVideo = useRef();
const userVideo = useRef();
const connectionRef = useRef();
const roomName = "123";
let userStream = null;
let creator = false;
useEffect(() => {
const socket = io("https://www.jg-jg.shop");
socket.emit("joinRoom", roomName);
socket.on("created", () => {
creator = true;
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((stream) => {
userStream = stream;
myVideo.current.srcObject = stream;
console.log(1);
});
});
socket.on("joined", () => {
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((stream) => {
userStream = stream;
myVideo.current.srcObject = stream;
console.log(2);
});
socket.emit("ready", roomName);
});
socket.on("ready", () => {
if (creator) {
const peer = new Peer({
initiator: true,
trickle: false,
stream: userStream,
});
peer.on("signal", (signal) => {
socket.emit("sendingSignal", { signal, roomName });
console.log(3);
});
peer.on("stream", (stream) => {
userVideo.current.srcObject = stream;
console.log(4);
});
socket.on("receivingSignal", (signal) => {
peer.signal(signal);
console.log(5);
});
connectionRef.current = peer;
}
});
socket.on("offer", (incomingSignal) => {
if (!creator) {
const peer = new Peer({
initiator: false,
trickle: false,
stream: userStream,
});
peer.on("signal", (signal) => {
socket.emit("returningSignal", { signal, roomName });
console.log(6);
});
peer.on("stream", (stream) => {
userVideo.current.srcObject = stream;
console.log(7);
});
peer.signal(incomingSignal);
console.log(8);
connectionRef.current = peer;
}
});
}, []);

Related

The stream event is not working in PeerJS

The application is a Zoom-like program where users are connected P2P using PeerJS calling feature.
This is the PeerJS object set up:
var peer = new Peer(undefined, {
config: {
'iceServers': [
{
url: 'stun:relay.metered.ca:80'
},
{
url: 'turn:relay.metered.ca:80',
username: '*********',
credential: '**********',
},
{
url: 'turn:relay.metered.ca:443',
username: '*********',
credential: '*********'
}
]},
host: '/',
port: '3001'
})
Playing the current user's stream, and listening for other peers' calls:
const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {}
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
addVideoStream(myVideo, stream)
// listen for external calls on peer server
peer.on('call', call => {
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
})
socket.on('user-connected', userId => {
const call = peer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', function(videoStream) {
addVideoStream(video, videoStream)
})
call.on('close', () => {
video.remove()
})
peers[userId] = call
})
})
peer.on('open', id => {
socket.emit('join-room', ROOM_ID, id)
})
function addVideoStream(video, stream) {
video.srcObject = stream
// once the video's ready play it
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
}
The server file:
const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const { v4: uuidV4 } = require('uuid')
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.get('/', (req, res) => {
res.redirect(`/${uuidV4()}`)
})
app.get('/:room', (req, res) => {
res.render('room', { roomId: req.params.room })
})
io.on('connection', socket => {
socket.on('join-room', (roomId, userId) => {
socket.join(roomId)
socket.to(roomId).emit('user-connected', userId)
socket.on('disconnect', () => {
socket.to(roomId).emit('user-disconnected', userId)
})
})
})
server.listen(3000)
I connect the app successfully, and I can make calls when I open the the same room's URL in another browser window (Chrome), but the call.on('stream') does not execute. I tried to see if there is an error using peer.on(error), and console.log() in the stream event's callback function, but there were no errors. I don't know what I'm missing here! Any help would be appreciated. Thank you.

I can't connect via webRTC, I get /connectionstate=failed

On webrtc debugger I have this from pc1 (call start):
From pc2 (join call):
Have error:
url: stun:54.166.135.129%C2%A0:443
address: 192.168.1.x
port: 59351
host_candidate: 192.168.1.x:59351
error_text: STUN host lookup received error.
error_code: 701
This is code for START CALL:
const startCall = async () => {
sendUser();
localStream = await navigator.mediaDevices.getUserMedia({
video: {
frameRate: 7,
width: 320,
height: 240,
aspectRatio: 1.33333,
},
audio: true,
});
localVideoRef!.current!.srcObject = localStream;
let configuration = {
iceServers: [
{ urls: 'stun:54.166.135.129:443' },
{ urls: 'turn:54.166.135.129 :443', credential: 'user', username: '123' },
],
};
peerConn = new RTCPeerConnection(configuration);
remoteStream = new MediaStream();
// Push tracks from local stream to peer connection
localStream.getTracks().forEach(function (track) {
peerConn.addTrack(track, localStream);
});
// Pull tracks from remote stream, add to video stream
peerConn.ontrack = (event) => {
event.streams[0].getTracks().forEach((track, index) => {
console.log(`REMOTE TRACK ${index + 1}: `, track);
remoteStream.addTrack(track);
});
console.log(remoteStream);
};
peerConn.onicecandidateerror = function (error) {
console.error('On ICE Candidate Error:', error);
};
peerConn.onsignalingstatechange = function (event) {
console.log('Signaling state change:', peerConn.signalingState);
};
peerConn.oniceconnectionstatechange = function (event) {
console.log('ICE connection state change:', peerConn.iceConnectionState);
if (peerConn.iceConnectionState === 'failed') {
console.error('ICE connection failed');
}
};
remoteVideoRef!.current!.srcObject = remoteStream;
peerConn.onicecandidate = (e) => {
if (e.candidate == null) return;
sendData({
type: 'store_candidate',
candidate: e.candidate,
});
};
await createAndSendOffer();
};
const createAndSendOffer = async () => {
const offer = await peerConn.createOffer();
await peerConn.setLocalDescription(offer);
sendData({
type: 'store_offer',
offer: offer,
});}
function sendData(data: { type?: string; candidate?: RTCIceCandidate; offer?: any; id?: string }) {
data.id = id;
console.log('SEND DATA: ', data);
webSocket.send(JSON.stringify(data));
}
function handleSignallingData(data: {
type: any;
answer: RTCSessionDescriptionInit;
offer: RTCSessionDescriptionInit;
candidate: RTCIceCandidateInit | RTCIceCandidate;
}) {
switch (data.type) {
case 'answer':
console.log('ANSWER:', data.answer);
peerConn.setRemoteDescription(new RTCSessionDescription(data.answer));
break;
case 'offer':
console.log('OFFER:', data.offer);
peerConn.setRemoteDescription(data.offer);
createAndSendAnswer();
break;
case 'candidate':
peerConn.addIceCandidate(new RTCIceCandidate(data.candidate));
console.log('CANDIDATE:', data.candidate);
}
}
This is code for JOIN CALL:
webSocket.onmessage = (event) => {
handleSignallingData(JSON.parse(event.data));
};
function handleSignallingData(data: {
type: any;
answer: RTCSessionDescriptionInit;
offer: RTCSessionDescriptionInit;
candidate: RTCIceCandidateInit | RTCIceCandidate;
}) {
switch (data.type) {
case 'answer':
console.log('ANSWER:', data.answer);
peerConn.setRemoteDescription(new RTCSessionDescription(data.answer));
break;
case 'offer':
console.log('OFFER:', data.offer);
peerConn.setRemoteDescription(new RTCSessionDescription(data.offer));
createAndSendAnswer();
break;
case 'candidate':
peerConn.addIceCandidate(new RTCIceCandidate(data.candidate));
console.log('CANDIDATE:', data.candidate);
}
}
function sendData(data: { type?: string; candidate?: RTCIceCandidate; answer?: any; id?: any }) {
data.id = chatUserId;
console.log('SEND DATA: ', data);
webSocket.send(JSON.stringify(data));
}
const joinCall = async (stop?: boolean) => {
localStream = await navigator.mediaDevices.getUserMedia({
video: {
frameRate: 10,
width: 320,
height: 240,
aspectRatio: 1.33333,
},
audio: true,
});
// Let's check if we have current. I have few times exception here
if (!localVideoRef!.current) return;
localVideoRef!.current!.srcObject = localStream;
let configuration = {
iceServers: [
{ urls: 'stun:54.166.135.129:443' },
{ urls: 'turn:54.166.135.129 :443', credential: 'user', username: '123' },
],
};
peerConn = new RTCPeerConnection(configuration);
remoteStream = new MediaStream();
// Push tracks from local stream to peer connection
peerConn.ontrack = (event) => {
event.streams[0].getTracks().forEach((track, index) => {
console.log(`REMOTE TRACK ${index + 1}: `, track);
remoteStream.addTrack(track);
});
console.log(remoteStream);
};
peerConn.onicecandidateerror = function (error) {
console.error('On ICE Candidate Error:', error);
};
peerConn.onsignalingstatechange = function (event) {
console.log('Signaling state change:', peerConn.signalingState);
};
peerConn.oniceconnectionstatechange = function (event) {
console.log('ICE connection state change:', peerConn.iceConnectionState);
if (peerConn.iceConnectionState === 'failed') {
console.error('ICE connection failed');
}
};
remoteVideoRef!.current!.srcObject = remoteStream;
peerConn.onicecandidate = (e) => {
if (e.candidate == null) return;
sendData({
type: 'send_candidate',
candidate: e.candidate,
});
};
sendData({
type: 'join_call',
});
};
const createAndSendAnswer = async () => {
const answer = await peerConn.createAnswer();
await peerConn.setLocalDescription(answer);
sendData({
type: 'send_answer',
// #ts-ignore
answer,
});
};
We have a stun and turn server and we don't understand the problem.

WebRTC connectiong only send one candidate

I am new coding in Javascript.
I am creating a WebRTC connection between my iPhone and my browser.
The connection works but my code only send one candidate and I don't know if I am doing anything wrong. I would appreciate any comment or support.
Thanks
const createPeerConnection = (signaling) => {
const peerConnection = new RTCPeerConnection({
iceServers: [],
});
const offerOptions = {
offerToReceiveVideo: true, offerToReceiveAudio: true
};
peerConnection.createOffer(offerOptions);
createAndSendOffer(signaling, peerConnection);
peerConnection.onicecandidate = (iceEvent) => {
if (iceEvent && iceEvent.candidate) {
signaling.send(JSON.stringify({
type: MESSAGE_TYPE.IceCandidate,
payload: iceEvent.candidate,
}));
}
};
peerConnection.onconnectionstatechange = (state ) => {
console.log(peerConnection.connectionState);
};
return peerConnection;
};
const createAndSendOffer = async (signaling, peerConnection) => {
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
signaling.send(JSON.stringify({ type: MESSAGE_TYPE.SessionDescription, payload: offer }));
};

RTC peer connection doesn't establish

I read about WebRTC in MDN and tried to open peer connection. I decided to open both local and remote connections in one page, and wrote this code:
const configuration = {iceServers: [
{urls: 'stun:stun.l.google.com:19302'},
{urls: 'stun:stun1.l.google.com:19302'},
]};
const localConnection = new RTCPeerConnection(configuration);
const remoteConnection = new RTCPeerConnection(configuration);
let localSendChannel, remoteSendChannel;
localConnection.onicecandidate = ({candidate}) => {
console.log('local candidate', candidate);
if (candidate) remoteConnection.addIceCandidate(candidate)
}
remoteConnection.onicecandidate = ({candidate}) => {
console.log('remote candidate', candidate);
if (candidate) localConnection.addIceCandidate(candidate)
}
const connect = async () => {
const offer = await localConnection.createOffer();
console.log('local offer', offer);
await localConnection.setLocalDescription(offer);
console.log('local localDescription', localConnection.localDescription);
await remoteConnection.setRemoteDescription(localConnection.localDescription);
const answer = await remoteConnection.createAnswer();
await remoteConnection.setLocalDescription(answer);
console.log('remote answer', answer);
console.log('remote localDescription', remoteConnection.localDescription);
await localConnection.setRemoteDescription(remoteConnection.localDescription);
localConnection.addEventListener('connectionstatechange', (e) => {
console.log('localConnection new state', e.connectionState);
});
remoteConnection.addEventListener('connectionstatechange', (e) => {
console.log('remoteConnection new state', e.connectionState);
});
const gumStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
for (const track of gumStream.getTracks())
localConnection.addTrack(track);
}
const openLocalChannel = async () => {
localSendChannel = localConnection.createDataChannel("sendChannel");
localSendChannel.onopen = () => {
console.log('local datachannel was opened');
localSendChannel.send("Hello, world!")
}
localSendChannel.onclose = () => console.log('local datachannel was closed');
localSendChannel.onmessage = (msg) => console.log('local channel got message', msg);
}
const waitRemoteChannel = () => {
remoteConnection.ondatachannel = (e) => {
remoteSendChannel = e.channel;
console.log('remote atachannel was init');
remoteSendChannel.onopen = () => console.log('remote datachannel was opened');
remoteSendChannel.onclose = () => console.log('remote datachannel was closed');
remoteSendChannel.onmessage = (msg) => console.log('remote channel got message', msg);
};
}
const start = async () => {
await connect();
waitRemoteChannel();
await openLocalChannel();
localConnection.addEventListener('connectionstatechange', async (e) => {
console.log('localConnection new state', e.connectionState);
});
remoteConnection.addEventListener('connectionstatechange', (e) => {
console.log('localConnection new state', e.connectionState);
});
}
start();
I haven't any candidates in Chrome and have only null candidates in FireFox. Can you point, where is mistake?
Updated: I added to the code media tracks adding and trying of create datachannel after connection create. But problem is staying
You are not doing anything with the connection, neither adding a track nor creating a datachannel. As a result the offer will be formally valid but will not cause ice candidates to be gathered and without candidates there will be no connection.

How to share screen using webRTC

I need to get the screen sharing working. It is working if it is video sharing. This is the code:
public n = navigator as any;
ngAfterViewInit(): void {
const video = this.myVideo.nativeElement;
let peerx: any;
this.n.getUserMedia =
this.n.getUserMedia ||
this.n.webkitGetUserMedia ||
this.n.mozGetUserMedia ||
this.n.msGetUserMedia;
}
this.n.getUserMedia( // this.n.mediaDevices.getDisplayMedia
{
video: {
madatory: {
chromeMediaSource: 'screen',
maxWidth: 1920,
maxHeight: 1080,
minAspectRatio: 1.77
},
}
},
(stream: any) => {
peerx = new SimplePeer({
initiator: location.hash === '#init',
trickle: false,
stream,
});
peerx.on('signal', (data) => {
const strData = JSON.stringify(data);
console.log(strData);
this.targetpeer = data;
});
peerx.on('stream', (streamX: any) => {
if ('srcObject' in video) {
video.srcObject = streamX;
} else {
video.src = window.URL.createObjectURL(streamX);
}
const playPromise = video.play();
if (playPromise !== undefined) {
playPromise
.then((_) => {
video.play();
})
.catch((error) => {
console.log(`Playing was prevented: ${error}`);
});
}
});
If I change the line 'this.n.getUserMedia(....)' to this 'this.n.mediaDevices.getDisplayMedia(...)', I do not get the 'signal' (the key that I need to paste on the client to connect).
You are attempting to mix a constraints style that was needed years ago when a Chrome extension was required with getDisplayMedia. That isn't going to work.
const stream = await navigator.mediaDevices.getDisplayMedia({video: true})
See here for a canonical sample.