step 9 is not working...

[jmmsp-iscteiul]

Hello everybody,

I was following all the tutorial and everything was ok, then, when i try to execute the step-06 it appears the website with my camera and only the button "snap" is working, the others are not working. Everything on my code is ok i think, because i have only runned step-06.
Resuming; is only working to take snaps, the button "send" and "snap and send" are not working..

Best Regards and congrats for the tutorial!

[biswajitpatra]

Take care of the few things first:
1.There should be two pages opened with the same URL (and room id)
2 Hard reloading the page (or both the pages) might fix your issue. If you are using chrome: Hold CTRL and press the Reload Button

[lukemcso]

@jmmsp-iscteiul - I was having the same issues. I think the doc needs updating. If you make the following changes it should help:

From your main.js file, function: signalingMessageCallback

Change:
else if (message.type === 'candidate') { peerConn.addIceCandidate(new RTCIceCandidate({ candidate: message.candidate, }));

to

else if (message.type === 'candidate') { peerConn.addIceCandidate(new RTCIceCandidate({ candidate: message.candidate, sdpMid:message.id, sdpMLineIndex: message.label, }));

According to https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate/sdpMid

Note: Attempting to add a candidate (using addIceCandidate()) that has a value of null for either sdpMid or sdpMLineIndex will throw a TypeError exception.

I believe this is why your code is failing. If you see:
peerConn.onicecandidate

You can see the candidate message is sent along with the sdpmid and sdpMLineIndex set as id and label.

I hope that helps

[fslurrehman]

This solution helped me. It removed error of "Uncaught TypeError: Cannot read property 'type' of null in main.js: 176". It works in chrome but not in firefox.

From your main.js file, function: signalingMessageCallback

Change:
else if (message.type === 'candidate') { peerConn.addIceCandidate(new RTCIceCandidate({ candidate: message.candidate, }));

to

else if (message.type === 'candidate') { peerConn.addIceCandidate(new RTCIceCandidate({ candidate: message.candidate, sdpMid:message.id, sdpMLineIndex: message.label, }));

According to https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate/sdpMid

[ludothetester]

I had the same situation and got to the same conclusion (before I saw this bug).
But, event after correcting the main.js I still have an issue as show below.
I have absolutely no clue on how to solve it. Could you help ?

VM349:1 InvalidStateError: Failed to set remote answer sdp: Called in wrong state: kStable DOMException: Failed to set remote answer sdp: Called in wrong state: kStable
a. @ VM349:1
logError @ main.js:409

[ludothetester]

Or sometimes, message is

VM13:1 InvalidStateError: Failed to set remote answer sdp: Called in wrong state: kHaveRemoteOffer DOMException: Failed to set remote answer sdp: Called in wrong state: kHaveRemoteOffer
a. @ VM13:1
logError @ main.js:409

[dturvene]

I am getting the same error when starting second client with same room id. See stack trace:

main.js:176 Uncaught TypeError: Cannot read property 'type' of null
at signalingMessageCallback (main.js:176)
at r. (main.js:86)
at r.emit (index.js:83)
at r.onevent (index.js:83)
at r.onpacket (index.js:83)
at r. (index.js:83)
at r.emit (index.js:83)
at r.ondecoded (index.js:83)
at a. (index.js:83)
at a.r.emit (index.js:83)

[jerlam06]

The code seems to be badly written, the step 06 is working like 2 out of 15 times, I need to hit CTRL + R many times, and wait a long time, and then if I am lucky the two peers will eventually be connected to one another. I think Google should take some time to fix this course, there are still issues, typos...etc that are from 2016, what a shame. Especially for such technology that will be omnipresent in the future...

[dturvene]

I got it working using Pull Request #89 and the mod in this issue from @fslurrehman. Git patchset is attached.

diff --git a/step-06/index.js b/step-06/index.js
index ae178ae..4b2c003 100644
--- a/step-06/index.js
+++ b/step-06/index.js
@@ -43,7 +43,8 @@ io.sockets.on('connection', function(socket) {
       socket.join(room);
       socket.emit('joined', room, socket.id);
       io.sockets.in(room).emit('ready', room);
-      socket.broadcast.emit('ready', room);
+      // Pull Request #89
+      // socket.broadcast.emit('ready', room);
     } else { // max two clients
       socket.emit('full', room);
     }
diff --git a/step-06/js/main.js b/step-06/js/main.js
index 9ba7701..27cd802 100644
--- a/step-06/js/main.js
+++ b/step-06/js/main.js
@@ -62,7 +62,8 @@ socket.on('created', function(room, clientId) {
 socket.on('joined', function(room, clientId) {
   console.log('This peer has joined room', room, 'with client ID', clientId);
   isInitiator = false;
-  createPeerConnection(isInitiator, configuration);
+  // PR #89
+  // createPeerConnection(isInitiator, configuration);
   grabWebCamVideo();
 });
 
@@ -186,7 +187,10 @@ function signalingMessageCallback(message) {
 
   } else if (message.type === 'candidate') {
     peerConn.addIceCandidate(new RTCIceCandidate({
-      candidate: message.candidate
+      candidate: message.candidate,
+      // Issue 102
+      sdpMid:message.id,
+      sdpMLineIndex: message.label,
     }));
 
   }