WebRTC video is not displaying
up vote
0
down vote
favorite
i am creating one-to-one webrtc video chatroom and this code does not working and i wanna know why
function hasUserMedia() navigator.mozGetUserMedia
function hasRTCPeerConnection()
window.RTCPeerConnection = window.RTCPeerConnection
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 at 17:52
codR
286
add a comment |
up vote
0
down vote
favorite
i am creating one-to-one webrtc video chatroom and this code does not working and i wanna know why
function hasUserMedia() navigator.mozGetUserMedia
function hasRTCPeerConnection()
window.RTCPeerConnection = window.RTCPeerConnection
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 at 17:52
codR
286
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
i am creating one-to-one webrtc video chatroom and this code does not working and i wanna know why
function hasUserMedia() navigator.mozGetUserMedia
function hasRTCPeerConnection()
window.RTCPeerConnection = window.RTCPeerConnection
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 at 17:52
codR
286
i am creating one-to-one webrtc video chatroom and this code does not working and i wanna know why
function hasUserMedia() navigator.mozGetUserMedia
function hasRTCPeerConnection()
window.RTCPeerConnection = window.RTCPeerConnection
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 at 17:52
codR
286
asked Nov 11 at 17:52
codR
286
asked Nov 11 at 17:52
codR
286
asked Nov 11 at 17:52
codR
286
asked Nov 11 at 17:52
codR
286
286
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
3
down vote
accepted
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 () => !("RTCPeerConnection" in window))
alert("Sorry, your browser does not support WebRTC.");
return;
const stream = await navigator.mediaDevices.getUserMedia(video:true, audio:true);
yourVideo.srcObject = stream;
const configuration =
iceServers: [urls: "stun:stun.1.google.com:19302"]
;
const yours = new RTCPeerConnection(configuration);
const theirs = new RTCPeerConnection(configuration);
for (const track of stream.getTracks())
yours.addTrack(track, stream);
theirs.ontrack = e => theirVideo.srcObject = e.streams[0];
yours.onicecandidate = e => theirs.addIceCandidate(e.candidate);
theirs.onicecandidate = e => yours.addIceCandidate(e.candidate);
const offer = await yours.createOffer();
await yours.setLocalDescription(offer);
await theirs.setRemoteDescription(offer);
const answer = await theirs.createAnswer();
await theirs.setLocalDescription(answer);
await yours.setRemoteDescription(answer);
)();
answered Nov 12 at 20:33
jib
19.9k64389
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 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 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 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 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 at 17:56
|
show 5 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
accepted
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 () => !("RTCPeerConnection" in window))
alert("Sorry, your browser does not support WebRTC.");
return;
const stream = await navigator.mediaDevices.getUserMedia(video:true, audio:true);
yourVideo.srcObject = stream;
const configuration =
iceServers: [urls: "stun:stun.1.google.com:19302"]
;
const yours = new RTCPeerConnection(configuration);
const theirs = new RTCPeerConnection(configuration);
for (const track of stream.getTracks())
yours.addTrack(track, stream);
theirs.ontrack = e => theirVideo.srcObject = e.streams[0];
yours.onicecandidate = e => theirs.addIceCandidate(e.candidate);
theirs.onicecandidate = e => yours.addIceCandidate(e.candidate);
const offer = await yours.createOffer();
await yours.setLocalDescription(offer);
await theirs.setRemoteDescription(offer);
const answer = await theirs.createAnswer();
await theirs.setLocalDescription(answer);
await yours.setRemoteDescription(answer);
)();
answered Nov 12 at 20:33
jib
19.9k64389
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 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 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 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 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 at 17:56
|
show 5 more comments
up vote
3
down vote
accepted
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 () => !("RTCPeerConnection" in window))
alert("Sorry, your browser does not support WebRTC.");
return;
const stream = await navigator.mediaDevices.getUserMedia(video:true, audio:true);
yourVideo.srcObject = stream;
const configuration =
iceServers: [urls: "stun:stun.1.google.com:19302"]
;
const yours = new RTCPeerConnection(configuration);
const theirs = new RTCPeerConnection(configuration);
for (const track of stream.getTracks())
yours.addTrack(track, stream);
theirs.ontrack = e => theirVideo.srcObject = e.streams[0];
yours.onicecandidate = e => theirs.addIceCandidate(e.candidate);
theirs.onicecandidate = e => yours.addIceCandidate(e.candidate);
const offer = await yours.createOffer();
await yours.setLocalDescription(offer);
await theirs.setRemoteDescription(offer);
const answer = await theirs.createAnswer();
await theirs.setLocalDescription(answer);
await yours.setRemoteDescription(answer);
)();
answered Nov 12 at 20:33
jib
19.9k64389
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 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 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 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 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 at 17:56
|
show 5 more comments
up vote
3
down vote
accepted
up vote
3
down vote
accepted
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 () => !("RTCPeerConnection" in window))
alert("Sorry, your browser does not support WebRTC.");
return;
const stream = await navigator.mediaDevices.getUserMedia(video:true, audio:true);
yourVideo.srcObject = stream;
const configuration =
iceServers: [urls: "stun:stun.1.google.com:19302"]
;
const yours = new RTCPeerConnection(configuration);
const theirs = new RTCPeerConnection(configuration);
for (const track of stream.getTracks())
yours.addTrack(track, stream);
theirs.ontrack = e => theirVideo.srcObject = e.streams[0];
yours.onicecandidate = e => theirs.addIceCandidate(e.candidate);
theirs.onicecandidate = e => yours.addIceCandidate(e.candidate);
const offer = await yours.createOffer();
await yours.setLocalDescription(offer);
await theirs.setRemoteDescription(offer);
const answer = await theirs.createAnswer();
await theirs.setLocalDescription(answer);
await yours.setRemoteDescription(answer);
)();
answered Nov 12 at 20:33
jib
19.9k64389
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 () => !("RTCPeerConnection" in window))
alert("Sorry, your browser does not support WebRTC.");
return;
const stream = await navigator.mediaDevices.getUserMedia(video:true, audio:true);
yourVideo.srcObject = stream;
const configuration =
iceServers: [urls: "stun:stun.1.google.com:19302"]
;
const yours = new RTCPeerConnection(configuration);
const theirs = new RTCPeerConnection(configuration);
for (const track of stream.getTracks())
yours.addTrack(track, stream);
theirs.ontrack = e => theirVideo.srcObject = e.streams[0];
yours.onicecandidate = e => theirs.addIceCandidate(e.candidate);
theirs.onicecandidate = e => yours.addIceCandidate(e.candidate);
const offer = await yours.createOffer();
await yours.setLocalDescription(offer);
await theirs.setRemoteDescription(offer);
const answer = await theirs.createAnswer();
await theirs.setLocalDescription(answer);
await yours.setRemoteDescription(answer);
)();
answered Nov 12 at 20:33
jib
19.9k64389
edited Nov 12 at 21:17
answered Nov 12 at 20:33
jib
19.9k64389
answered Nov 12 at 20:33
jib
19.9k64389
answered Nov 12 at 20:33
jib
19.9k64389
19.9k64389
1
thank you jib great answer , <3 really it helped me a lot and thanks for this documentations , thanks again
– codR
Nov 13 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 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 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 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 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 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 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 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 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 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 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 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 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 at 18:13
Your code is a local-loop demo, not a chat room. Check out this tutorial instead on MDN.
– jib
Nov 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 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 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 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 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 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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
