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>
