Error
Closed this issue · 6 comments
Hi, when I run index.hmtl, I get the following error:
script.js:62 Uncaught (in promise) TypeError: Cannot set property 'srcObject' of null
at navigator.mediaDevices.getUserMedia.then.stream (script.js:62)
at
Hi,
I just updated the code slightly, so pull the new version. A couple of suggestions:
- Create your own account on Viagenie and replace the turn server credentials with your own.
- Replace the showMyFace() function with
function showMyFace() {
navigator.mediaDevices.getUserMedia({audio:true, video:true})
.then(stream => yourVideo.srcObject = stream)
.then(stream => pc.addStream(stream))
.catch(function(err) {
console.log(err);
});
}
Let me know what you see in your log when you do that. Note that the showMyFace() function in the repo does not have a catch, so you might be missing important error messages if you don't use catch like I did in the showMyFace() function above. I didn't add catch because the purpose of this repo is to make it easy to learn WebRTC if you've never used it before, and I want to keep the code as short as possible.
Hi, now the problems are:
1:
script.js:62 Uncaught (in promise) TypeError: Cannot set property 'srcObject' of null
at navigator.mediaDevices.getUserMedia.then.stream (script.js:62)
at (script.js:62)
2:
index.html:1 Uncaught (in promise) DOMException: Failed to set remote offer sdp: Called in wrong state: STATE_SENTOFFER
Promise rejected (async)
readMessage @ script.js:52
(anonymous) @ firebase-storage.js:3479
z @ firebase-storage.js:3479
t.raise @ firebase-storage.js:3479
t.pe @ firebase-storage.js:3479
t.raiseEventsForChangedPath @ firebase-storage.js:3479
t.ye @ firebase-storage.js:3479
e.fi @ firebase-storage.js:3479
e.di @ firebase-storage.js:3479
t.di @ firebase-storage.js:3479
t.Hi @ firebase-storage.js:3479
(anonymous) @ firebase-storage.js:3479
e.bo @ firebase-storage.js:3479
e.handleIncomingFrame @ firebase-storage.js:3479
mySock.onmessage @ firebase-storage.js:3479
(index.html:1)
A very common mistake is not using https, and instead using http. Make sure you're using https. What I understand from your first error message is that you can't even see yourself. The second error message likely happened because you tried to press call on both computers.
I'd like you to go on https://codepen.io/dmarcus/pen/PWmRmj and replace the Firebase credentials and Viagenie credentials. Open the url on both computers, and make sure to use Chrome for both. You can use two computers, two Android devices, or a computer and Android device to test this CodePen demo. If you try to run the CodePen on a computer using Safari or your iPhone, it won't work. However if you use this code without CodePen, and host it on your own site it will work on Safari and your iPhone.
Let me know if the CodePen doesn't work for you. Yesterday I tested it out using my MacBook Pro with Chrome and an Android phone, and the video chat worked well.
Here's something else you can try that might help you find the problem:
- Open Chrome Developer Tools (you can stay on this page while you do this)
- Enter the following code
navigator.mediaDevices.getUserMedia({audio:true, video:true})
.then(function(stream) {
console.log(stream);
})
.catch(function(err) {
console.log(err);
});
Let me know what you get as the output.
Glad to help 😃 and good question. You can't just double click on index.html to get it working.
- If you have a website, you can simply add this code to it and possibly use Let's Encrypt to make your site load as https.
- If you don't have a website, you can use MAMP or WAMP.
- Another option is following this guide so that you can put the code from this repo in a folder on your computer and simply type in https://localhost in your address bar (you need Mac with High Sierra in order to follow this guide, but if you don't have High Sierra you can find a similar guide on Google)
This issue was happening because the js scripts were loading before the html. Cut the script tags and paste at the end of the file aka load scripts after html loads.