Develop Reference

Request video during PeerJs ongoing live connection (stream)

I am new to PeerJs and recently starting developing an app for my school during this Covid pandemic.
I have been able to deploy code to NodeJs server with express and was able to establish connection between 2 users.
But the problem arises when video is turned off from the beginning of stream for both users and a user wants to initiate a video call.
What I need is, to send some kind of notification to user 2 that user 1 is requesting for video. So that user 2 will turn on video.
My existing code is:
var url = new URL(window.location.href);
var disableStreamInBeginning = url.searchParams.get("disableStreamInBeginning"); // To disable video in the beginning
var passwordProtectedRoom = url.searchParams.get("passwordProtectedRoom");
var muteAllInBeginning = url.searchParams.get("muteAllInBeginning");
const socket = io('/')
const localVideoDiv = document.getElementById('local-video-div')
const oneOnOneSelf = document.getElementById('local-video')
const oneOnOneRemote = document.getElementById('remote-video')
if(typeof disableStreamInBeginning !== 'undefined' && disableStreamInBeginning == 'true'){
var disbaleSelfStream = true
} else {
var disbaleSelfStream = false
}
if(typeof passwordProtectedRoom !== 'undefined' && passwordProtectedRoom == 'true'){
var passwordProtected = true
} else {
var passwordProtected = false
}
if(typeof muteAllInBeginning !== 'undefined' && muteAllInBeginning == 'true'){
var muteAll = true
} else {
var muteAll = false
}
var systemStream
oneOnOneSelf.style.opacity = 0
oneOnOneRemote.style.opacity = 0
const myPeer = new Peer(undefined, {
host: '/',
port: '443',
path: '/myapp',
secure: true
})
const ownVideoView = document.createElement('video')
const peers = {}
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(ownStream => {
systemStream = ownStream
addVideoStream(ownStream, oneOnOneSelf)
myPeer.on('call', call => {
call.answer(ownStream)
call.on('stream', remoteStream => {
addVideoStream(remoteStream, oneOnOneRemote)
})
})
socket.on('user-connected', userId => {
//connectToNewUser(userId, stream)
setTimeout(connectToNewUser, 1000, userId, ownStream)
})
})
socket.on('user-disconnected', userId => {
if (peers[userId]) peers[userId].close()
})
myPeer.on('open', id => {
//Android.onPeerConnected();
socket.emit('join-room', ROOM_ID, id)
})
function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream)
call.on('stream', remoteStream => {
//console.log('Testing')
addVideoStream(remoteStream, oneOnOneRemote)
})
call.on('close', () => {
oneOnOneRemote.remove()
})
peers[userId] = call
}
function addVideoStream(stream, videoView) {
videoView.srcObject = stream
videoView.addEventListener('loadedmetadata', () => {
if(disbaleSelfStream){
audioVideo(true)
} else {
localVideoDiv.style.opacity = 0
videoView.style.opacity = 1
videoView.play()
}
})
}
function audioVideo(bool) {
if(bool == true){
localVideoDiv.style.opacity = 1
oneOnOneSelf.style.opacity = 0
systemStream.getVideoTracks()[0].enabled = false
} else {
if(disbaleSelfStream){
console.log('Waiting For Another User To Accept') // Here is need to inform user 2 to tun on video call
} else {
localVideoDiv.style.opacity = 0
oneOnOneSelf.style.opacity = 1
systemStream.getVideoTracks()[0].enabled = true
}
}
}
function muteUnmute(bool) {
if(bool == true){
systemStream.getAudioTracks()[0].enabled = true
} else {
systemStream.getAudioTracks()[0].enabled = false
}
}
function remoteVideoClick(){
alert('Hi');
}
Please help.

You can send messages back and forth directly using peer itself
const dataConnection = peer.connect(id) will connect you to the remote peer, it returns a dataConnection class instance that you can later use with the send method of that class.
Just remember that you also want to setup listener on the other side to listen for this events, like "open" to know when the data channel is open:
dataConnection.on('open', and dataConnection.on('data...
You have a bug in your code above, I know you didn't ask about it, it is hard to see and not always will manifest. The problem will occur when your originator sends a call before the destination has had time to receive the promise back with its local video/audio stream. The solution is to invert the order of the calls and to start by setting up the event handler for peer.on("call", ... rather than by starting by waiting for a promise to return when we ask for the video stream. The failure mode will depend on how long does it take for your destination client to signal it wants and call to the originator plus how long it takes for the originator to respond versus how long it takes for the stream promise to return on the destination client. You can see a complete working example, where messages are also sent back and forth here.
// Function to obtain stream and then await until after it is obtained to go into video chat call and answer code. Critical to start the event listener ahead of everything to ensure not to miss an incoming call.
peer.on("call", async (call) => {
let stream = null;
console.log('*** "call" event received, calling call.answer(strem)');
// Obtain the stream object
try {
stream = await navigator.mediaDevices.getUserMedia(
{
audio: true,
video: true,
});
// Set up event listener for a peer media call -- peer.call, returns a mediaConnection that I name call
// Answer the call by sending this clients video stream --myVideo-- to calling remote user
call.answer(stream);
// Create new DOM element to place the remote user video when it comes
const video = document.createElement('video');
// Set up event listener for a stream coming from the remote user in response to this client answering its call
call.on("stream", (userVideoStream) => {
console.log('***"stream" event received, calling addVideoStream(UserVideoStream)');
// Add remote user video stream to this client's active videos in the DOM
addVideoStream(video, userVideoStream);
});
} catch (err) {
/* handle the error */
console.log('*** ERROR returning the stream: ' + err);
};
});

simple-peer webrtc error when trying to share screen

I am building a video chat application using simple-peer where users can also share the screen. The flow of the app is such that when user A creates a room, he can grab the page url and share with user B. When user B joins, an initiator peer is created for him as seen here.
function 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);
return peer;
}
When user A gets the offer from user B, a non initiator peer is created for him as seen here.
function addPeer(incomingSignal, callerID, stream) {
const peer = new Peer({
initiator: false,
trickle: false,
stream,
});
peer.on("signal", signal => {
const payload = {
callerID,
signal
}
socketRef.current.emit("accept call", payload);
});
peer.on("stream", handleStream);
peer.signal(incomingSignal);
return peer;
}
Now when any user decides to share their screen, this function gets called.
function shareScreen() {
navigator.mediaDevices.getDisplayMedia().then(stream => {
const track = stream.getTracks()[0];
peerRef.current.removeStream(videoStream.current);
peerRef.current.addStream(stream);
userVideoRef.current.srcObject = stream;
track.onended = function () {
userVideoRef.current.srcObject = videoStream.current;
peerRef.current.removeTrack(track, stream);
};
});
}
What's really strange about the behavior that I am getting, is that when user B, in other words the calling peer, wants to share his screen, all works well, but when user A, the callee peer, wants to share his screen, I get the following error.
index.js:17 Uncaught Error: [object RTCErrorEvent]
at makeError (index.js:17)
at RTCDataChannel._channel.onerror (index.js:490)
I am not really sure where I am going wrong.

After some testing, I discovered where the error is coming from.
What you need to do is to call the function peer.signal(incomingSignal) after calling the function addPeer(), along with the peer variable returned from the addPeer() function.
Here's an example:
function addPeer(incomingSignal, callerID, stream) {
const peer = new Peer({
initiator: false,
trickle: false,
stream,
});
peer.on("signal", signal => {
const payload = {
callerID,
signal
}
socketRef.current.emit("accept call", payload);
});
peer.on("stream", handleStream);
// peer.signal(incomingSignal);
return peer;
}
let peer = addPeer(incomingSignal, callerId, stream);
peer.signal(incomingSignal);
and it will work fine

How to handle audio stream in JsSIP?

I'm creating React application that use JsSIP library to answer calls made via VoIP SIP provider.
I've already created a page that have two buttons (Accept and Reject). It successfully register SIP client on SIP-server. It also successfully receive call and I can answer it. But I don't hear anything while answering call.
Registering JsSIP client (in willReceiveProps because I have information for connection after props changing):
const socketHost = 'wss://' + contactCenter.host + ':' + contactCenter.port
const socket = new JsSIP.WebSocketInterface(socketHost)
const configuration = {
sockets: [socket],
uri: 'sip:' + contactCenter.login + '#' + contactCenter.host,
password: contactCenter.password,
socketHost: socketHost,
}
const coolPhone = new JsSIP.UA(configuration)
coolPhone.on('connected', (e: any) => {
const messages = ServiceContainer.get<MessageManagerInterface>(ServiceTypes.Messages)
messages.addSuccess('SIP connected')
})
coolPhone.on('newRTCSession', (e: any) => {
const messages = ServiceContainer.get<MessageManagerInterface>(ServiceTypes.Messages)
messages.addAlert('New call')
const session = e.session
session.on('failed', this.resetLocalState)
session.on('ended', this.resetLocalState)
const numberRegexp = /\"(\d+)\"/
const fromNumber = (numberRegexp.exec(e.request.headers.From[0].raw))[1]
const toNumber = (numberRegexp.exec(e.request.headers.Contact[0].raw))[1].slice(1)
this.setState({
callReceived: true,
callSession: session,
fromNumber: fromNumber,
toNumber: toNumber,
})
})
coolPhone.start()
Method that handles answer button click:
private answerCall = () => {
const messages = ServiceContainer.get<MessageManagerInterface>(ServiceTypes.Messages)
messages.addSuccess('Call answered')
const callOptions = {
mediaConstraints: {
audio: true, // only audio calls
video: false
},
pcConfig: {
iceServers: [
{ urls: ["stun:stun.l.google.com:19302"] }
],
iceTransportPolicy: "all",
rtcpMuxPolicy: "negotiate"
}
}
this.state.callSession.answer(callOptions)
this.state.callSession.connection.addEventListener('addstream', (event: any) => {
console.log(event)
this.audioElement.srcObject = event.stream
})
this.audioElement.play()
this.setState({
callAnswered: true,
callReceived: false,
})
}
What did I do wrong?

I solved the problem.
The problem was in the position of this.audioElement.play() line.
I moved it to the callback on addstream event:
this.state.callSession.connection.addEventListener('addstream', (event: any) => {
console.log(event)
this.audioElement.srcObject = event.stream
this.audioElement.play()
})
Now it works fine. Hope you also find it useful.

You can use react-sip npm library which simplifies usage of jssip inside React apps:
https://www.npmjs.com/package/react-sip
You will just need to pass your connection settings as props to <SipProvider/>, which will be somewhere near the top of your react tree.
This will allow you to perform basic start/stop/answer operations and watch the status of your call in the context!

RTCPeerConnection Event not fire

I can't make an RTCPeerConnection working. After i create an RTCPeerConnection object, nothing happen. Events are not fired. This is the method that create the connection :
createPeerConnection() {
console.log('new RtCPeerConnection with stun server.');
this.myPeerConnection = new RTCPeerConnection({stunServer}]
});
console.log('PeerConnection is ', this.myPeerConnection);
this.myPeerConnection.onicecandidate = this.handleICECandidateEvent;
this.myPeerConnection.ontrack = this.handleAddTrackEvent;
this.myPeerConnection.removeTrack = this.handleRemoveStreamEvent;
this.myPeerConnection.oniceconnectionstatechange = this.handleICEConnectionStateChangeEvent;
// this.myPeerConnection.onicegatheringstatechange = this.handleICEGatheringStateChangeEvent;
// this.myPeerConnection.onsignalingstatechange = this.handleSignalingStateChangeEvent;
this.myPeerConnection.onnegotiationneeded = this.handleNegotiationNeededEvent;
}
I have not error in console. Just nothing happened.
This method is called when user click on another user to connect :
connect() {
console.log('Creating RTCPeerConnetion...');
this.createPeerConnection();
console.log('RTCPeerConnection created');
console.log('Creating new local stream ...');
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((localStream) => {
this.localVideo.nativeElement.srcObject = localStream;
console.log('Local stream created', localStream);
}).catch(this.handleGetUserMediaError);
}
I used Firefox and Angular2 and i test this on localhost. Don't know if this can be the cause. any idea?

I have just forget to add the steam to the peerConnection like this :
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((localStream) => {
this.localVideo.nativeElement.srcObject = localStream;
console.log('Local stream created', localStream);
localStream.getTracks().forEach(track =>
this.myPeerConnection.addTrack(track, localStream)
);

How can I check if port is busy in NodeJS?

How can I check if port is busy for localhost?
Is there any standard algorithm? I am thinking at making a http request to that url and check if response status code is not 404.

You could attempt to start a server, either TCP or HTTP, it doesn't matter. Then you could try to start listening on a port, and if it fails, check if the error code is EADDRINUSE.
var net = require('net');
var server = net.createServer();
server.once('error', function(err) {
if (err.code === 'EADDRINUSE') {
// port is currently in use
}
});
server.once('listening', function() {
// close the server if listening doesn't fail
server.close();
});
server.listen(/* put the port to check here */);
With the single-use event handlers, you could wrap this into an asynchronous check function.

Check out the amazing tcp-port-used node module!
//Check if a port is open
tcpPortUsed.check(port [, host])
//Wait until a port is no longer being used
tcpPortUsed.waitUntilFree(port [, retryTimeMs] [, timeOutMs])
//Wait until a port is accepting connections
tcpPortUsed.waitUntilUsed(port [, retryTimeMs] [, timeOutMs])
//and a few others!
I've used these to great effect with my gulp watch tasks for detecting when my Express server has been safely terminated and when it has spun up again.
This will accurately report whether a port is bound or not (regardless of SO_REUSEADDR and SO_REUSEPORT, as mentioned by #StevenVachon).
The portscanner NPM module will find free and used ports for you within ranges and is more useful if you're trying to find an open port to bind.

Thank to Steven Vachon link, I made a simple example:
const net = require("net");
const Socket = net.Socket;
const getNextPort = async (port) =>
{
return new Promise((resolve, reject) =>
{
const socket = new Socket();
const timeout = () =>
{
resolve(port);
socket.destroy();
};
const next = () =>
{
socket.destroy();
resolve(getNextPort(++port));
};
setTimeout(timeout, 10);
socket.on("timeout", timeout);
socket.on("connect", () => next());
socket.on("error", error =>
{
if (error.code !== "ECONNREFUSED")
reject(error);
else
resolve(port);
});
socket.connect(port, "0.0.0.0");
});
};
getNextPort(8080).then(port => {
console.log("port", port);
});

this is what im doing, i hope it help someone
const isPortOpen = async (port: number): Promise<boolean> => {
return new Promise((resolve, reject) => {
let s = net.createServer();
s.once('error', (err) => {
s.close();
if (err["code"] == "EADDRINUSE") {
resolve(false);
} else {
resolve(false); // or throw error!!
// reject(err);
}
});
s.once('listening', () => {
resolve(true);
s.close();
});
s.listen(port);
});
}
const getNextOpenPort = async(startFrom: number = 2222) => {
let openPort: number = null;
while (startFrom < 65535 || !!openPort) {
if (await isPortOpen(startFrom)) {
openPort = startFrom;
break;
}
startFrom++;
}
return openPort;
};
you can use isPortOpen if you just need to check if a port is busy or not.
and the getNextOpenPort finds next open port after startFrom. for example :
let startSearchingFrom = 1024;
let port = await getNextOpenPort(startSearchingFrom);
console.log(port);