WebRTC video is not displaying
i am creating one-to-one webrtc video chatroom and this code does not working and i wanna know why
function hasUserMedia()
function hasRTCPeerConnection()
window.webkitRTCPeerConnection
function startPeerConnection(stream)
var configuration =
"iceServers": [ "url": "stun:stun.1.google.com:19302" ]
;
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);
yourConnection.addStream(stream);
theirConnection.onaddstream = function (e)
theirVideo.src = window.URL.createObjectURL(e.stream);
;
yourConnection.onicecandidate = function (event)
if (event.candidate)
theirConnection.addIceCandidate(newRTCIceCandidate(event.candidate));
;
theirConnection.onicecandidate = function (event)
if (event.candidate)
yourConnection.addIceCandidate(new
RTCIceCandidate(event.candidate));
;
yourConnection.createOffer(function (offer)
yourConnection.setLocalDescription(offer);
theirConnection.setRemoteDescription(offer);
theirConnection.createAnswer(function (offer)
theirConnection.setLocalDescription(offer);
yourConnection.setRemoteDescription(offer);
);
);
var yourVideo = document.querySelector("#face_cam_vid"),
theirVideo = document.querySelector("#thevid"),
yourConnection, theirConnection;
if (hasUserMedia())
navigator.getUserMedia( video: true, audio: true , function(stream)
yourVideo.src = window.URL.createObjectURL(stream);
if (hasRTCPeerConnection())
startPeerConnection(stream);
else
alert("Sorry, your browser does not support WebRTC.");
, function (error)
console.log(error);
);
else
alert("Sorry, your browser does not support WebRTC.");
and this code is giving me a errors like thiserrors and as u see video is not displaying , i tried to create div (where video tag is) but it did not work anyway
if u can help my i will be glad here is my html
<!DOCTYPE html>
<html>
<head>
<title>
Video Call
</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="vidd.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/videof.js"></script>
<script>var width = Math.max(window.screen.width, window.innerWidth);
if(width <= 414)
var faceCam = document.getElementById("face_cam");
faceCam.style.width = "15%";
function smaller()
if(width <= 414)
var size = document.getElementById("face_cam").style.width;
if(size == "15%")
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
else if(size == "3%")
faceCam.style.width = "15%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px"
else
var size = document.getElementById("face_cam").style.width;
if(size == "30%")
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
else if(size == "3%")
faceCam.style.width = "30%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px";
var width = Math.max(window.screen.width, window.innerWidth);
function smaller()
var size = document.getElementById("face_cam").style.height;
if (size == "30%")
var frame = document.getElementById("face_cam");
frame.style.height = "3%";
frame.style.width = "4%";
frame.borderRadius = "0px";
else
var frame = document.getElementById("face_cam");
frame.style.height = "30%";
frame.style.width = "30%";
function BACKT()
window.location.href = "http://localhost:8000/"
</script>
</head>
<body>
<div class="test_vc_field">
<video id="thevid" autoplay></video>
<div id="face_cam" onclick="smaller()" style="height: 30%; width: 30%">
<video id="face_cam_vid" autoplay></video>
</div>
</div>
<div class="nav">
<button class="next">შემდეგი</button>
<img src="next.png" class="next_icon">
<button class="off" id="off">გათიშვა</button>
<img src="shutdown.png" class="shd_icon">
<button class="goto_main" id="WTfu" onclick="BACKT();">მთავარი
გვერდი</button>
<img src="home.png" class="home_icon" onclick="main()">
</div>
</body>
</html>
#thevid id vid where second user displays face_cam_vid is video where i display
javascript html webrtc
asked Nov 11 '18 at 17:52
codRcodR
518
add a comment |
i am creating one-to-one webrtc video chatroom and this code does not working and i wanna know why
function hasUserMedia()
function hasRTCPeerConnection()
window.webkitRTCPeerConnection
function startPeerConnection(stream)
var configuration =
"iceServers": [ "url": "stun:stun.1.google.com:19302" ]
;
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);
yourConnection.addStream(stream);
theirConnection.onaddstream = function (e)
theirVideo.src = window.URL.createObjectURL(e.stream);
;
yourConnection.onicecandidate = function (event)
if (event.candidate)
theirConnection.addIceCandidate(newRTCIceCandidate(event.candidate));
;
theirConnection.onicecandidate = function (event)
if (event.candidate)
yourConnection.addIceCandidate(new
RTCIceCandidate(event.candidate));
;
yourConnection.createOffer(function (offer)
yourConnection.setLocalDescription(offer);
theirConnection.setRemoteDescription(offer);
theirConnection.createAnswer(function (offer)
theirConnection.setLocalDescription(offer);
yourConnection.setRemoteDescription(offer);
);
);
var yourVideo = document.querySelector("#face_cam_vid"),
theirVideo = document.querySelector("#thevid"),
yourConnection, theirConnection;
if (hasUserMedia())
navigator.getUserMedia( video: true, audio: true , function(stream)
yourVideo.src = window.URL.createObjectURL(stream);
if (hasRTCPeerConnection())
startPeerConnection(stream);
else
alert("Sorry, your browser does not support WebRTC.");
, function (error)
console.log(error);
);
else
alert("Sorry, your browser does not support WebRTC.");
and this code is giving me a errors like thiserrors and as u see video is not displaying , i tried to create div (where video tag is) but it did not work anyway
if u can help my i will be glad here is my html
<!DOCTYPE html>
<html>
<head>
<title>
Video Call
</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="vidd.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/videof.js"></script>
<script>var width = Math.max(window.screen.width, window.innerWidth);
if(width <= 414)
var faceCam = document.getElementById("face_cam");
faceCam.style.width = "15%";
function smaller()
if(width <= 414)
var size = document.getElementById("face_cam").style.width;
if(size == "15%")
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
else if(size == "3%")
faceCam.style.width = "15%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px"
else
var size = document.getElementById("face_cam").style.width;
if(size == "30%")
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
else if(size == "3%")
faceCam.style.width = "30%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px";
var width = Math.max(window.screen.width, window.innerWidth);
function smaller()
var size = document.getElementById("face_cam").style.height;
if (size == "30%")
var frame = document.getElementById("face_cam");
frame.style.height = "3%";
frame.style.width = "4%";
frame.borderRadius = "0px";
else
var frame = document.getElementById("face_cam");
frame.style.height = "30%";
frame.style.width = "30%";
function BACKT()
window.location.href = "http://localhost:8000/"
</script>
</head>
<body>
<div class="test_vc_field">
<video id="thevid" autoplay></video>
<div id="face_cam" onclick="smaller()" style="height: 30%; width: 30%">
<video id="face_cam_vid" autoplay></video>
</div>
</div>
<div class="nav">
<button class="next">შემდეგი</button>
<img src="next.png" class="next_icon">
<button class="off" id="off">გათიშვა</button>
<img src="shutdown.png" class="shd_icon">
<button class="goto_main" id="WTfu" onclick="BACKT();">მთავარი
გვერდი</button>
<img src="home.png" class="home_icon" onclick="main()">
</div>
</body>
</html>
#thevid id vid where second user displays face_cam_vid is video where i display
javascript html webrtc
asked Nov 11 '18 at 17:52
codRcodR
518
add a comment |
i am creating one-to-one webrtc video chatroom and this code does not working and i wanna know why
function hasUserMedia()
function hasRTCPeerConnection()
window.webkitRTCPeerConnection
function startPeerConnection(stream)
var configuration =
"iceServers": [ "url": "stun:stun.1.google.com:19302" ]
;
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);
yourConnection.addStream(stream);
theirConnection.onaddstream = function (e)
theirVideo.src = window.URL.createObjectURL(e.stream);
;
yourConnection.onicecandidate = function (event)
if (event.candidate)
theirConnection.addIceCandidate(newRTCIceCandidate(event.candidate));
;
theirConnection.onicecandidate = function (event)
if (event.candidate)
yourConnection.addIceCandidate(new
RTCIceCandidate(event.candidate));
;
yourConnection.createOffer(function (offer)
yourConnection.setLocalDescription(offer);
theirConnection.setRemoteDescription(offer);
theirConnection.createAnswer(function (offer)
theirConnection.setLocalDescription(offer);
yourConnection.setRemoteDescription(offer);
);
);
var yourVideo = document.querySelector("#face_cam_vid"),
theirVideo = document.querySelector("#thevid"),
yourConnection, theirConnection;
if (hasUserMedia())
navigator.getUserMedia( video: true, audio: true , function(stream)
yourVideo.src = window.URL.createObjectURL(stream);
if (hasRTCPeerConnection())
startPeerConnection(stream);
else
alert("Sorry, your browser does not support WebRTC.");
, function (error)
console.log(error);
);
else
alert("Sorry, your browser does not support WebRTC.");
and this code is giving me a errors like thiserrors and as u see video is not displaying , i tried to create div (where video tag is) but it did not work anyway
if u can help my i will be glad here is my html
<!DOCTYPE html>
<html>
<head>
<title>
Video Call
</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="vidd.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/videof.js"></script>
<script>var width = Math.max(window.screen.width, window.innerWidth);
if(width <= 414)
var faceCam = document.getElementById("face_cam");
faceCam.style.width = "15%";
function smaller()
if(width <= 414)
var size = document.getElementById("face_cam").style.width;
if(size == "15%")
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
else if(size == "3%")
faceCam.style.width = "15%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px"
else
var size = document.getElementById("face_cam").style.width;
if(size == "30%")
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
else if(size == "3%")
faceCam.style.width = "30%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px";
var width = Math.max(window.screen.width, window.innerWidth);
function smaller()
var size = document.getElementById("face_cam").style.height;
if (size == "30%")
var frame = document.getElementById("face_cam");
frame.style.height = "3%";
frame.style.width = "4%";
frame.borderRadius = "0px";
else
var frame = document.getElementById("face_cam");
frame.style.height = "30%";
frame.style.width = "30%";
function BACKT()
window.location.href = "http://localhost:8000/"
</script>
</head>
<body>
<div class="test_vc_field">
<video id="thevid" autoplay></video>
<div id="face_cam" onclick="smaller()" style="height: 30%; width: 30%">
<video id="face_cam_vid" autoplay></video>
</div>
</div>
<div class="nav">
<button class="next">შემდეგი</button>
<img src="next.png" class="next_icon">
<button class="off" id="off">გათიშვა</button>
<img src="shutdown.png" class="shd_icon">
<button class="goto_main" id="WTfu" onclick="BACKT();">მთავარი
გვერდი</button>
<img src="home.png" class="home_icon" onclick="main()">
</div>
</body>
</html>
#thevid id vid where second user displays face_cam_vid is video where i display
javascript html webrtc
asked Nov 11 '18 at 17:52
codRcodR
518
i am creating one-to-one webrtc video chatroom and this code does not working and i wanna know why
function hasUserMedia()
function hasRTCPeerConnection()
window.webkitRTCPeerConnection
function startPeerConnection(stream)
var configuration =
"iceServers": [ "url": "stun:stun.1.google.com:19302" ]
;
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);
yourConnection.addStream(stream);
theirConnection.onaddstream = function (e)
theirVideo.src = window.URL.createObjectURL(e.stream);
;
yourConnection.onicecandidate = function (event)
if (event.candidate)
theirConnection.addIceCandidate(newRTCIceCandidate(event.candidate));
;
theirConnection.onicecandidate = function (event)
if (event.candidate)
yourConnection.addIceCandidate(new
RTCIceCandidate(event.candidate));
;
yourConnection.createOffer(function (offer)
yourConnection.setLocalDescription(offer);
theirConnection.setRemoteDescription(offer);
theirConnection.createAnswer(function (offer)
theirConnection.setLocalDescription(offer);
yourConnection.setRemoteDescription(offer);
);
);
var yourVideo = document.querySelector("#face_cam_vid"),
theirVideo = document.querySelector("#thevid"),
yourConnection, theirConnection;
if (hasUserMedia())
navigator.getUserMedia( video: true, audio: true , function(stream)
yourVideo.src = window.URL.createObjectURL(stream);
if (hasRTCPeerConnection())
startPeerConnection(stream);
else
alert("Sorry, your browser does not support WebRTC.");
, function (error)
console.log(error);
);
else
alert("Sorry, your browser does not support WebRTC.");
and this code is giving me a errors like thiserrors and as u see video is not displaying , i tried to create div (where video tag is) but it did not work anyway
if u can help my i will be glad here is my html
<!DOCTYPE html>
<html>
<head>
<title>
Video Call
</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="vidd.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/videof.js"></script>
<script>var width = Math.max(window.screen.width, window.innerWidth);
if(width <= 414)
var faceCam = document.getElementById("face_cam");
faceCam.style.width = "15%";
function smaller()
if(width <= 414)
var size = document.getElementById("face_cam").style.width;
if(size == "15%")
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
else if(size == "3%")
faceCam.style.width = "15%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px"
else
var size = document.getElementById("face_cam").style.width;
if(size == "30%")
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
else if(size == "3%")
faceCam.style.width = "30%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px";
var width = Math.max(window.screen.width, window.innerWidth);
function smaller()
var size = document.getElementById("face_cam").style.height;
if (size == "30%")
var frame = document.getElementById("face_cam");
frame.style.height = "3%";
frame.style.width = "4%";
frame.borderRadius = "0px";
else
var frame = document.getElementById("face_cam");
frame.style.height = "30%";
frame.style.width = "30%";
function BACKT()
window.location.href = "http://localhost:8000/"
</script>
</head>
<body>
<div class="test_vc_field">
<video id="thevid" autoplay></video>
<div id="face_cam" onclick="smaller()" style="height: 30%; width: 30%">
<video id="face_cam_vid" autoplay></video>
</div>
</div>
<div class="nav">
<button class="next">შემდეგი</button>
<img src="next.png" class="next_icon">
<button class="off" id="off">გათიშვა</button>
<img src="shutdown.png" class="shd_icon">
<button class="goto_main" id="WTfu" onclick="BACKT();">მთავარი
გვერდი</button>
<img src="home.png" class="home_icon" onclick="main()">
</div>
</body>
</html>
#thevid id vid where second user displays face_cam_vid is video where i display
javascript html webrtc
javascript html webrtc
asked Nov 11 '18 at 17:52
codRcodR
518
asked Nov 11 '18 at 17:52
codRcodR
518
asked Nov 11 '18 at 17:52
codRcodR
518
asked Nov 11 '18 at 17:52
codRcodR
518
asked Nov 11 '18 at 17:52
codRcodR
518
518
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
It's terrible code. It's outdated and has 6 problems that track the evolution of the WebRTC API.
TL;DR: It doesn't work because you're not checking for errors and you've only tested one browser.
1) Old vendor prefixes (remove them):
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration); // <-- wrong
webkit-names won't work in Firefox or Edge. These haven't been needed in years. Provided you switch to navigator.mediaDevices.getUserMedia, you can skip your 10 lines of prefix-mangling preamble entirely.
2) Uses old url (use urls)
This is technically wrong, though I suspect most browsers allow it:
iceServers: [url: "stun:stun.1.google.com:19302"] // <-- wrong
Instead use:
iceServers: [urls: "stun:stun.1.google.com:19302"]
...because an ICE server may technically be reachable at multiple urls.
3) Using old callback APIs without error checking (use promises instead):
This is wrong:
navigator.getUserMedia(video: true, audio: true, function(stream) /* ... */ );
...because a 3rd failure callback argument is required. Edge says TypeError: Argument not optional.
Legacy bugs in Chrome and Safari allow this, but it won't work in Firefox or Edge. Ignoring errors deprives you of learning why things don't work. If the user denies camera access, you wanna know.
All modern browsers support the promise version of the API on mediaDevices. Use that instead:
navigator.mediaDevices.getUserMedia(video: true, audio: true)
.then(stream => /* use stream here */ )
.catch(error => console.log(error));
4) You fell in RTCPeerConnection's "promise/callback mix-up trap":
I've answered this before, but in short, this is similar to #2 above, but with a twist. This is wrong:
yourConnection.createOffer(function(offer) /* ... */ );
You think you're calling the old callback API, but you're not. Those required two arguments:
yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */);
Instead, you're actually calling the same-named modern promise API, because a function is an object in JS:
const promise = yourConnection.createOffer(optionsObject);
This is where your code stops working. Your callback function is never called, being interpreted as an empty options object instead. You ignore the returned promise. Use the promise API instead.
5) createObjectURL(stream) is deprecated, gone.
It was removed in Firefox and Chrome 71 (the warning you received). This is wrong:
theirVideo.src = URL.createObjectURL(stream);
Instead use this:
theirVideo.srcObject = stream;
6) For extra points: The whole stream API is deprecated (use tracks).
addStream() & onaddstream are no longer in the spec, and only work in some browsers:
yourConnection.addStream(stream);
theirConnection.onaddstream = e => theirVideo.srcObject = e.stream;
Instead, peer connections are now entirely track-based. Use this instead:
for (const track of stream.getTracks())
yourConnection.addTrack(track, stream);
theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0];
For more on these differences, see my blog.
Working example
The following should work in all browsers:
const yourVideo = document.querySelector("#face_cam_vid");
const theirVideo = document.querySelector("#thevid");
(async () =>
if (!("mediaDevices" in navigator) )();
answered Nov 12 '18 at 20:33
jibjib
20.8k64390
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 '18 at 14:24
hey it works but partly because it does not wait second user to connect this route and displays both my and their video with my camera soo as i said i want one-to-one chatroom and i think this code can u help me with that : here is the photo imgur.com/a/nG7Xif6
– codR
Nov 18 '18 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 18 '18 at 22:38
checked it also tried demo for this but there is no rooms and how can three people have WEBRTC connection same time
– codR
Nov 19 '18 at 17:15
The hard way. Three people either means each person has two connections, one for each of the other participants (a.k.a. a mesh call). Past ~5 participants you'll want a central SFU server approach instead. "Rooms" is just app logic to discover peers; not part of WebRTC.
– jib
Nov 19 '18 at 17:56
|
show 5 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251527%2fwebrtc-video-is-not-displaying%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It's terrible code. It's outdated and has 6 problems that track the evolution of the WebRTC API.
TL;DR: It doesn't work because you're not checking for errors and you've only tested one browser.
1) Old vendor prefixes (remove them):
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration); // <-- wrong
webkit-names won't work in Firefox or Edge. These haven't been needed in years. Provided you switch to navigator.mediaDevices.getUserMedia, you can skip your 10 lines of prefix-mangling preamble entirely.
2) Uses old url (use urls)
This is technically wrong, though I suspect most browsers allow it:
iceServers: [url: "stun:stun.1.google.com:19302"] // <-- wrong
Instead use:
iceServers: [urls: "stun:stun.1.google.com:19302"]
...because an ICE server may technically be reachable at multiple urls.
3) Using old callback APIs without error checking (use promises instead):
This is wrong:
navigator.getUserMedia(video: true, audio: true, function(stream) /* ... */ );
...because a 3rd failure callback argument is required. Edge says TypeError: Argument not optional.
Legacy bugs in Chrome and Safari allow this, but it won't work in Firefox or Edge. Ignoring errors deprives you of learning why things don't work. If the user denies camera access, you wanna know.
All modern browsers support the promise version of the API on mediaDevices. Use that instead:
navigator.mediaDevices.getUserMedia(video: true, audio: true)
.then(stream => /* use stream here */ )
.catch(error => console.log(error));
4) You fell in RTCPeerConnection's "promise/callback mix-up trap":
I've answered this before, but in short, this is similar to #2 above, but with a twist. This is wrong:
yourConnection.createOffer(function(offer) /* ... */ );
You think you're calling the old callback API, but you're not. Those required two arguments:
yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */);
Instead, you're actually calling the same-named modern promise API, because a function is an object in JS:
const promise = yourConnection.createOffer(optionsObject);
This is where your code stops working. Your callback function is never called, being interpreted as an empty options object instead. You ignore the returned promise. Use the promise API instead.
5) createObjectURL(stream) is deprecated, gone.
It was removed in Firefox and Chrome 71 (the warning you received). This is wrong:
theirVideo.src = URL.createObjectURL(stream);
Instead use this:
theirVideo.srcObject = stream;
6) For extra points: The whole stream API is deprecated (use tracks).
addStream() & onaddstream are no longer in the spec, and only work in some browsers:
yourConnection.addStream(stream);
theirConnection.onaddstream = e => theirVideo.srcObject = e.stream;
Instead, peer connections are now entirely track-based. Use this instead:
for (const track of stream.getTracks())
yourConnection.addTrack(track, stream);
theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0];
For more on these differences, see my blog.
Working example
The following should work in all browsers:
const yourVideo = document.querySelector("#face_cam_vid");
const theirVideo = document.querySelector("#thevid");
(async () =>
if (!("mediaDevices" in navigator) )();
answered Nov 12 '18 at 20:33
jibjib
20.8k64390
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 '18 at 14:24
hey it works but partly because it does not wait second user to connect this route and displays both my and their video with my camera soo as i said i want one-to-one chatroom and i think this code can u help me with that : here is the photo imgur.com/a/nG7Xif6
– codR
Nov 18 '18 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 18 '18 at 22:38
checked it also tried demo for this but there is no rooms and how can three people have WEBRTC connection same time
– codR
Nov 19 '18 at 17:15
The hard way. Three people either means each person has two connections, one for each of the other participants (a.k.a. a mesh call). Past ~5 participants you'll want a central SFU server approach instead. "Rooms" is just app logic to discover peers; not part of WebRTC.
– jib
Nov 19 '18 at 17:56
|
show 5 more comments
It's terrible code. It's outdated and has 6 problems that track the evolution of the WebRTC API.
TL;DR: It doesn't work because you're not checking for errors and you've only tested one browser.
1) Old vendor prefixes (remove them):
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration); // <-- wrong
webkit-names won't work in Firefox or Edge. These haven't been needed in years. Provided you switch to navigator.mediaDevices.getUserMedia, you can skip your 10 lines of prefix-mangling preamble entirely.
2) Uses old url (use urls)
This is technically wrong, though I suspect most browsers allow it:
iceServers: [url: "stun:stun.1.google.com:19302"] // <-- wrong
Instead use:
iceServers: [urls: "stun:stun.1.google.com:19302"]
...because an ICE server may technically be reachable at multiple urls.
3) Using old callback APIs without error checking (use promises instead):
This is wrong:
navigator.getUserMedia(video: true, audio: true, function(stream) /* ... */ );
...because a 3rd failure callback argument is required. Edge says TypeError: Argument not optional.
Legacy bugs in Chrome and Safari allow this, but it won't work in Firefox or Edge. Ignoring errors deprives you of learning why things don't work. If the user denies camera access, you wanna know.
All modern browsers support the promise version of the API on mediaDevices. Use that instead:
navigator.mediaDevices.getUserMedia(video: true, audio: true)
.then(stream => /* use stream here */ )
.catch(error => console.log(error));
4) You fell in RTCPeerConnection's "promise/callback mix-up trap":
I've answered this before, but in short, this is similar to #2 above, but with a twist. This is wrong:
yourConnection.createOffer(function(offer) /* ... */ );
You think you're calling the old callback API, but you're not. Those required two arguments:
yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */);
Instead, you're actually calling the same-named modern promise API, because a function is an object in JS:
const promise = yourConnection.createOffer(optionsObject);
This is where your code stops working. Your callback function is never called, being interpreted as an empty options object instead. You ignore the returned promise. Use the promise API instead.
5) createObjectURL(stream) is deprecated, gone.
It was removed in Firefox and Chrome 71 (the warning you received). This is wrong:
theirVideo.src = URL.createObjectURL(stream);
Instead use this:
theirVideo.srcObject = stream;
6) For extra points: The whole stream API is deprecated (use tracks).
addStream() & onaddstream are no longer in the spec, and only work in some browsers:
yourConnection.addStream(stream);
theirConnection.onaddstream = e => theirVideo.srcObject = e.stream;
Instead, peer connections are now entirely track-based. Use this instead:
for (const track of stream.getTracks())
yourConnection.addTrack(track, stream);
theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0];
For more on these differences, see my blog.
Working example
The following should work in all browsers:
const yourVideo = document.querySelector("#face_cam_vid");
const theirVideo = document.querySelector("#thevid");
(async () =>
if (!("mediaDevices" in navigator) )();
answered Nov 12 '18 at 20:33
jibjib
20.8k64390
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 '18 at 14:24
hey it works but partly because it does not wait second user to connect this route and displays both my and their video with my camera soo as i said i want one-to-one chatroom and i think this code can u help me with that : here is the photo imgur.com/a/nG7Xif6
– codR
Nov 18 '18 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 18 '18 at 22:38
checked it also tried demo for this but there is no rooms and how can three people have WEBRTC connection same time
– codR
Nov 19 '18 at 17:15
The hard way. Three people either means each person has two connections, one for each of the other participants (a.k.a. a mesh call). Past ~5 participants you'll want a central SFU server approach instead. "Rooms" is just app logic to discover peers; not part of WebRTC.
– jib
Nov 19 '18 at 17:56
|
show 5 more comments
It's terrible code. It's outdated and has 6 problems that track the evolution of the WebRTC API.
TL;DR: It doesn't work because you're not checking for errors and you've only tested one browser.
1) Old vendor prefixes (remove them):
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration); // <-- wrong
webkit-names won't work in Firefox or Edge. These haven't been needed in years. Provided you switch to navigator.mediaDevices.getUserMedia, you can skip your 10 lines of prefix-mangling preamble entirely.
2) Uses old url (use urls)
This is technically wrong, though I suspect most browsers allow it:
iceServers: [url: "stun:stun.1.google.com:19302"] // <-- wrong
Instead use:
iceServers: [urls: "stun:stun.1.google.com:19302"]
...because an ICE server may technically be reachable at multiple urls.
3) Using old callback APIs without error checking (use promises instead):
This is wrong:
navigator.getUserMedia(video: true, audio: true, function(stream) /* ... */ );
...because a 3rd failure callback argument is required. Edge says TypeError: Argument not optional.
Legacy bugs in Chrome and Safari allow this, but it won't work in Firefox or Edge. Ignoring errors deprives you of learning why things don't work. If the user denies camera access, you wanna know.
All modern browsers support the promise version of the API on mediaDevices. Use that instead:
navigator.mediaDevices.getUserMedia(video: true, audio: true)
.then(stream => /* use stream here */ )
.catch(error => console.log(error));
4) You fell in RTCPeerConnection's "promise/callback mix-up trap":
I've answered this before, but in short, this is similar to #2 above, but with a twist. This is wrong:
yourConnection.createOffer(function(offer) /* ... */ );
You think you're calling the old callback API, but you're not. Those required two arguments:
yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */);
Instead, you're actually calling the same-named modern promise API, because a function is an object in JS:
const promise = yourConnection.createOffer(optionsObject);
This is where your code stops working. Your callback function is never called, being interpreted as an empty options object instead. You ignore the returned promise. Use the promise API instead.
5) createObjectURL(stream) is deprecated, gone.
It was removed in Firefox and Chrome 71 (the warning you received). This is wrong:
theirVideo.src = URL.createObjectURL(stream);
Instead use this:
theirVideo.srcObject = stream;
6) For extra points: The whole stream API is deprecated (use tracks).
addStream() & onaddstream are no longer in the spec, and only work in some browsers:
yourConnection.addStream(stream);
theirConnection.onaddstream = e => theirVideo.srcObject = e.stream;
Instead, peer connections are now entirely track-based. Use this instead:
for (const track of stream.getTracks())
yourConnection.addTrack(track, stream);
theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0];
For more on these differences, see my blog.
Working example
The following should work in all browsers:
const yourVideo = document.querySelector("#face_cam_vid");
const theirVideo = document.querySelector("#thevid");
(async () =>
if (!("mediaDevices" in navigator) )();
answered Nov 12 '18 at 20:33
jibjib
20.8k64390
It's terrible code. It's outdated and has 6 problems that track the evolution of the WebRTC API.
TL;DR: It doesn't work because you're not checking for errors and you've only tested one browser.
1) Old vendor prefixes (remove them):
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration); // <-- wrong
webkit-names won't work in Firefox or Edge. These haven't been needed in years. Provided you switch to navigator.mediaDevices.getUserMedia, you can skip your 10 lines of prefix-mangling preamble entirely.
2) Uses old url (use urls)
This is technically wrong, though I suspect most browsers allow it:
iceServers: [url: "stun:stun.1.google.com:19302"] // <-- wrong
Instead use:
iceServers: [urls: "stun:stun.1.google.com:19302"]
...because an ICE server may technically be reachable at multiple urls.
3) Using old callback APIs without error checking (use promises instead):
This is wrong:
navigator.getUserMedia(video: true, audio: true, function(stream) /* ... */ );
...because a 3rd failure callback argument is required. Edge says TypeError: Argument not optional.
Legacy bugs in Chrome and Safari allow this, but it won't work in Firefox or Edge. Ignoring errors deprives you of learning why things don't work. If the user denies camera access, you wanna know.
All modern browsers support the promise version of the API on mediaDevices. Use that instead:
navigator.mediaDevices.getUserMedia(video: true, audio: true)
.then(stream => /* use stream here */ )
.catch(error => console.log(error));
4) You fell in RTCPeerConnection's "promise/callback mix-up trap":
I've answered this before, but in short, this is similar to #2 above, but with a twist. This is wrong:
yourConnection.createOffer(function(offer) /* ... */ );
You think you're calling the old callback API, but you're not. Those required two arguments:
yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */);
Instead, you're actually calling the same-named modern promise API, because a function is an object in JS:
const promise = yourConnection.createOffer(optionsObject);
This is where your code stops working. Your callback function is never called, being interpreted as an empty options object instead. You ignore the returned promise. Use the promise API instead.
5) createObjectURL(stream) is deprecated, gone.
It was removed in Firefox and Chrome 71 (the warning you received). This is wrong:
theirVideo.src = URL.createObjectURL(stream);
Instead use this:
theirVideo.srcObject = stream;
6) For extra points: The whole stream API is deprecated (use tracks).
addStream() & onaddstream are no longer in the spec, and only work in some browsers:
yourConnection.addStream(stream);
theirConnection.onaddstream = e => theirVideo.srcObject = e.stream;
Instead, peer connections are now entirely track-based. Use this instead:
for (const track of stream.getTracks())
yourConnection.addTrack(track, stream);
theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0];
For more on these differences, see my blog.
Working example
The following should work in all browsers:
const yourVideo = document.querySelector("#face_cam_vid");
const theirVideo = document.querySelector("#thevid");
(async () =>
if (!("mediaDevices" in navigator) )();
answered Nov 12 '18 at 20:33
jibjib
20.8k64390
edited Nov 12 '18 at 21:17
answered Nov 12 '18 at 20:33
jibjib
20.8k64390
answered Nov 12 '18 at 20:33
jibjib
20.8k64390
answered Nov 12 '18 at 20:33
jibjib
20.8k64390
20.8k64390
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 '18 at 14:24
hey it works but partly because it does not wait second user to connect this route and displays both my and their video with my camera soo as i said i want one-to-one chatroom and i think this code can u help me with that : here is the photo imgur.com/a/nG7Xif6
– codR
Nov 18 '18 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 18 '18 at 22:38
checked it also tried demo for this but there is no rooms and how can three people have WEBRTC connection same time
– codR
Nov 19 '18 at 17:15
The hard way. Three people either means each person has two connections, one for each of the other participants (a.k.a. a mesh call). Past ~5 participants you'll want a central SFU server approach instead. "Rooms" is just app logic to discover peers; not part of WebRTC.
– jib
Nov 19 '18 at 17:56
|
show 5 more comments
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 '18 at 14:24
hey it works but partly because it does not wait second user to connect this route and displays both my and their video with my camera soo as i said i want one-to-one chatroom and i think this code can u help me with that : here is the photo imgur.com/a/nG7Xif6
– codR
Nov 18 '18 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 18 '18 at 22:38
checked it also tried demo for this but there is no rooms and how can three people have WEBRTC connection same time
– codR
Nov 19 '18 at 17:15
The hard way. Three people either means each person has two connections, one for each of the other participants (a.k.a. a mesh call). Past ~5 participants you'll want a central SFU server approach instead. "Rooms" is just app logic to discover peers; not part of WebRTC.
– jib
Nov 19 '18 at 17:56
1
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 '18 at 14:24
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 '18 at 14:24
hey it works but partly because it does not wait second user to connect this route and displays both my and their video with my camera soo as i said i want one-to-one chatroom and i think this code can u help me with that : here is the photo imgur.com/a/nG7Xif6
– codR
Nov 18 '18 at 18:13
hey it works but partly because it does not wait second user to connect this route and displays both my and their video with my camera soo as i said i want one-to-one chatroom and i think this code can u help me with that : here is the photo imgur.com/a/nG7Xif6
– codR
Nov 18 '18 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 18 '18 at 22:38
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 18 '18 at 22:38
checked it also tried demo for this but there is no rooms and how can three people have WEBRTC connection same time
– codR
Nov 19 '18 at 17:15
checked it also tried demo for this but there is no rooms and how can three people have WEBRTC connection same time
– codR
Nov 19 '18 at 17:15
The hard way. Three people either means each person has two connections, one for each of the other participants (a.k.a. a mesh call). Past ~5 participants you'll want a central SFU server approach instead. "Rooms" is just app logic to discover peers; not part of WebRTC.
– jib
Nov 19 '18 at 17:56
The hard way. Three people either means each person has two connections, one for each of the other participants (a.k.a. a mesh call). Past ~5 participants you'll want a central SFU server approach instead. "Rooms" is just app logic to discover peers; not part of WebRTC.
– jib
Nov 19 '18 at 17:56
|
show 5 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251527%2fwebrtc-video-is-not-displaying%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
