Odtnhj

Ok....so I followed a tutorial and created a site in which you can code and share your codemirror editor and video call with another user. I am using peer js and I have uploaded the project on heroku for testing.

The site is working but there are issues:
Wehn I call the other user, his video is visible in my browser but he cant see my video, only his own video.
I get the following error in the console:

PeerJS: Failed to setLocalDescription, (OperationError) Failed to set local offer sdp: Called in wrong state: kHaveRemoteOffer

I am using peerjs version 0.3.8 as the latest versions just dropped the connections. Following is the code for my peer server:

const express = require('express');
const path = require('path');
const http = require('http');
const cors = require('cors');
const errorhandler = require('errorhandler');
var ExpressPeerServer = require('peer').ExpressPeerServer;

var options = 
 debug: true
;

var app = express();
var server = http.createServer(app);

var port = process.env.PORT || '3000';

app.set('port', port);
app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/peerjs', ExpressPeerServer(server, options));
app.use(errorhandler());

process.on('uncaughtException', function(exc) 
 console.error(exc);
);

server.listen(port);

I am using the following script in the task.hbs view file to create a connection:

 // PeerJS
 // Compatibility shim
 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 // PeerJS object
 var peer = new Peer(username + roomId, 
 host: 'stark-waters-87626.herokuapp.com',
 path: '/peerjs',
 port: 443,
 secure: true,
 debug: true
 );

 peer.on('open', function () 
 $('#my-id').text(peer.id);
 );

 // Receiving a call
 peer.on('call', function (call) 
 // Answer the call automatically (instead of prompting user) for demo purposes
 call.answer(window.localStream);
 step3(call);
 );

 peer.on('error', function (err) 
 alert(err.message);
 // Return to step 2 if error occurs
 step2();
 );

 // Click handlers setup
 $(function () 
 $('#make-call').click(function () 
 // Initiate a call!
 var call = peer.call($('#callto-id').val(), window.localStream);
 step3(call);
 );
 $('#end-call').click(function () 
 window.existingCall.close();
 step2();
 );
 step1();
 );
 function step1() 
 // Get audio/video stream
 navigator.getUserMedia( audio: true, video: true , function (stream) 
 // Set your video displays
 $('#my-video').prop('src', URL.createObjectURL(stream));
 window.localStream = stream;
 step2();
 , function () $('#step1-error').show(); );
 

 function step2() 
 $('#step1, #step3').hide();
 $('#step2').show();
 

 function step3(call) 
 // Hang up on an existing call if present
 if (window.existingCall) 
 window.existingCall.close();
 
 // Wait for stream on the call, then set peer video display
 call.on('stream', function (stream) 
 $('#second-video').prop('src', URL.createObjectURL(stream));
 );
 // UI stuff
 window.existingCall = call;
 $('#second-id').text(call.peer);
 call.on('close', step2);
 $('#step1, #step2').hide();
 $('#step3').show();
 

Here are the screenshots of how it looks in my window where I am able to see the remote user:

in the other browser window that I have opened the video of the remote user does not appear: