problems setting different resolutions with WebRTC

resolution, video-streaming, webrtc

Solution

Try `maxWidth/maxHeight` constraints:

var video_constraints = {
   mandatory: {
       maxHeight: 480,
       maxWidth: 640 
   },
   optional: []
};

navigator.getUserMedia({
   audio: false,
   video: video_constraints
}, onsuccess);

Updated (Sep 26, 2013):

According to this page; you can set following resolutions (min/max width/height):

1920:1080
1280:720
960:720
640:360
640:480
320:240
320:180

Or Maybe:

1280:800
1280:720
960:600
960:540
640:400
640:360
640:480
480:300
480:270
480:360
320:200
320:180
320:240
240:150
240:135
240:180
160:100
160:90
160:120

Problem

I'm trying to use WebRTC's getUserMedia functionality to take snapshots in video streaming from the user's camera. The problem is that I want to use a resolution of 640 X 480 working in Firefox 19.02, Opera 12.14 and Chrome 25.0.1364.172 versions respectively, but I'm not able to use this resolution in Firefox and Opera. When I try that, the image appears cut from the down side with 640 X 360 resolution. Anyway, if I try to change the resolution in Chrome, it doesn't work nor with higher resolution than 640 X 480. Does anybody have the same problem? I want to know if it's a bug or something, but I haven't seen any information about that. This is my code, I have proved in many ways such putting contraints with minimum width and height but it doesn't work: the script: ``` navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia; if(navigator.getUserMedia){ navigator.getUserMedia({ video: true }, onSuccess, onError); } else{ alert('An error has occurred starting the webcam stream, please revise the instructions to fix the problem'); } function onSuccess(stream) { var video = document.getElementById('webcam'); if(navigator.webkitGetUserMedia || navigator.mozGetUserMedia){ video.src = window.URL.createObjectURL(stream); } else if(navigator.msGetUserMedia){ //future implementation over internet explorer } else{ video.src = stream; } video.play(); } function onError() { alert('There has been a problem retrieving the streams - did you allow access?'); } ``` the css (it's only for proving, it doesn't put everything in the correct place): ``` body { margin: 0px 0px; padding: 0px 0px; } #videoFrame { margin: 0px auto; width: 640px; height: 480px; border: 10px #333 solid; } #webcam { videoWidth: 640px; videoHeight: 480px; } #captureFrame { margin: 0px auto; width: 640px; height: 480px; } #webcamContent { width: 1280px; height: 480px; } ``` and jsp file: ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>Testing WebRTC</title>` <link href="css/styles.css" rel="stylesheet" type="text/css" />` </head> <body> <div id="webcamContent"> <div id="videoFrame"> <video id="webcam"></video> </div> <div id="captureFrame"> <canvas id="bioCapture"></canvas> </div> </div> <script src="js/webRTC.js"></script> </body> </html> ``` Thanks in advance!

Original source