I'm new to WebRTC and testing a simple application for video streaming in Chrome. I have three different types of constraints with the following resolutions:
qvga: 320 x 240, vga: 640 x 480, hdVga: 1280 x 720.
When I capture media it runs fine. But when I start with the qvga resolution and click on any other button, it loads the object fine and I can even observe the constraints with console.log. The other two resolution settings i.e vga and hdVga it doesn't reflect any changes in window. Similarly when I reload the page and start with hdVga button it reflects vga resolution on screen whereas object property displays the constraints of hdVga and I'm unable to figure out the problem.
HTML:
<head>
<!--<link rel="stylesheet" href="style.css" type="text/css"/>-->
</head>
<body>
<video id="localVideo" controls poster="images/posterImage.png" ></video>
<div id="buttons">
<button id="qvga">320x240</button>
<button id="vga">640x480</button>
<button id="hd">1280x720</button>
</div>
<video id="remoteVideo" poster="images/posterImage.png" ></video>
</script src="videoplayer.js"></script>
<script src="adapter.js"></script>
<script>
var qVga = document.querySelector("button#qvga");
var vga = document.querySelector("button#vga");
var hdVga = document.querySelector("button#hd");
var qVgaConstraints = {video:{
mandatory:{
maxWidth: 320,
maxHeight: 240
}
},audio:true};
var vgaConstraints = {video:{
mandatory:{
maxWidth: 640,
maxHeight: 480
}
},audio:true}
var hdVgaConstaints = {video:{
mandatory:{
maxWidth: 1280,
maxHeight:720
}
},audio:true};
function successCallback(stream){
window.stream = stream;
var video = document.querySelector("#localVideo");
video.src = window.URL.createObjectURL(stream);
video.play();
}
function errorCallback(error){
console.log("error: ",error);
}
qVga.onclick = function(){getMedia(qVgaConstraints)};
vga.onclick = function(){getMedia(vgaConstraints)};
hdVga.onclick = function(){getMedia(hdVgaConstaints)};
function getMedia(constraints){
console.log(constraints.video.mandatory);
getUserMedia(constraints,successCallback,errorCallback);
}
</script>
</body>
You need to specify both min and max values. Constraints inform the browser what range of values you are willing to work with. By not specifying a lower bound, you're agreeing to any resolution between 0x0 and 1280x768 in the hdVga case. Since Chrome defaults to 640x480, that's what you'll get.
To get 1280x768, specify a min value of 1280x768.
Constraints are not "hints" when used correctly, and will fail if you require values the camera cannot meet, so be careful about over-constraining, as people have different cameras with varying abilities. The camera is also a single resource, so you may have to share it with other tabs for instance. That's why constraints are built this way.
Using constraints, it is possible to specify that you prefer higher resolutions without forgoing lower-resolution cameras when that's all a user has, but I hesitate to elaborate further since Chrome uses an outdated constraints syntax that deviates quite a bit from the standard, and the standard addresses this more elegantly. See this answer for more.
The specification has finally stabilized, and an upcoming version of adapter.js (the cross-browser polyfill) should address this real soon. Until then, see here for a working example of Chrome's constraints, with the caveat that they wont work on other browsers.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments