problems setting different resolutions with WebRTC

Question

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!

Muaz Khan · Answer 1 · 2013-09-26T14:12:39.817

6

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):

Or Maybe:

edited Sep 26 '13 at 14:12

answered Mar 15 '13 at 14:20

Muaz Khan

7,138
9
41
77

I have the same problem again. In my laptop's webcam this worked well (windows vista 64 bits), but I still have the same problem with another camera, connected via usb (it's a Creative camera, model VF0700). I know that this camera works perfectly with the resolution of 640 X 480, I tried with another java application before, so I don't see where is the problem. The computer where I use the camera has OS windows 7 64 bits. Somebody knows what could be wrong? – user2158954 Mar 18 '13 at 10:39
Did you try canary. These constraints are not supported on old chrome. – Muaz Khan Mar 18 '13 at 12:43
I have the latest version of Chrome (25.0.1364.172), but actually Chrome is not the problem (it worked perfectly anyway), but in Firefox 19.02 (the latest that I can get) and Opera 12.14 it doesn't work. The strange thing is that it worked in my laptop (maybe it worked also without these constraints but I really don't know), but here it doesn't work.. – user2158954 Mar 18 '13 at 12:56

score 0 · Answer 2 · answered Jul 24 '13 at 23:41

I had the same problem when not keeping the aspect-ratio of the camera or trying to force framerates it does not support (it is an old USB camera). So try it like @Muaz Khan suggested but set only one mandatory parameter, i.e.:

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

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

EDIT: also try different values, i.e. maxHeight: 120 did not work for me, but maxHeight:180 did work. I guess it depends on the Camera

Yes, I think that the problem is related to the webcam. It doesn´t work well with lower values. — user2158954, Jul 25 '13 at 23:58

problems setting different resolutions with WebRTC

2 Answers2