Max-Min-WebRTC-Constraints

modification of GoogleChrome/WebRTC/getusermedia-resolution

by Bryson Murray

HTML

<!-- * Copyright (c) 2014 The WebRTC project authors. All Rights Reserved. * * Use of this source code is governed by a BSD-style license * that can be found in the LICENSE file in the root of the source * tree. -->
<base target="_blank">
<title>getUserMedia: select resolution</title>
<body>
    <div id="container">
        <p>Orginal source: <a href="https://github.com/GoogleChrome/webrtc/blob/master/samples/web/content/getusermedia-resolution">https://github.com/GoogleChrome/webrtc/blob/master/samples/web/content/getusermedia-resolution </p>
  <h1><a href="https://googlechrome.github.io/webrtc/" title="WebRTC samples homepage">WebRTC samples</a>  <span>getUserMedia: select resolution</span>
            </h1>
            <p></p>
            <p>Click a button to call <code>getUserMedia()</code> with appropriate resolution.</p>
            <div id="buttons">
                <button id="qvga">QVGA</button>
                <button id="vga">VGA</button>
                <button id="hd">HD</button>
            </div>
            <p id="dimensions"></p>
            <video autoplay></video>

CSS

body, html {
     height: 100%;
 }
 button {
     margin: 0 1em 0 0;
     width: 100px;
 }
 div#buttons {
     margin: 0 0 1em 0;
 }
 div#container {
     max-width: 100%;
 }
 p#dimensions {
     height: 1em;
     margin: 0 0 1.5em 0;
 }
 video {
     background: none;
     height: auto;
     width: auto;
 }

JavaScript

/*
 *  Copyright (c) 2014 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
 */
var vgaButton = document.querySelector("button#vga");
var qvgaButton = document.querySelector("button#qvga");
var hdButton = document.querySelector("button#hd");
var dimensions = document.querySelector("p#dimensions");
var video = document.querySelector("video");
var stream;

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function successCallback(stream) {
    window.stream = stream; // stream available to console
    video.src = window.URL.createObjectURL(stream);
}

function errorCallback(error) {
    console.log("navigator.getUserMedia error: ", error);
}

function displayVideoDimensions() {
    dimensions.innerHTML = "Actual video dimensions: " + video.videoWidth +
        "x" + video.videoHeight + 'px.';
}

video.addEventListener('play', function () {
    setTimeout(function () {
        displayVideoDimensions();
    }, 500);
});

var qvgaConstraints = {
    video: {
        mandatory: {
            maxWidth: 320,
            maxHeight: 180,
            /*Added by Chad*/
            minWidth: 320,
            minHeight: 180
        }
    }
};

var vgaConstraints = {
    video: {
        mandatory: {
            maxWidth: 640,
            maxHeight: 480,
            /*Added by Chad*/
            minWidth: 640,
            minHeight: 480
        }
    }
};

var hdConstraints = {
    video: {
        mandatory: {
            minWidth: 1280,
            minHeight: 720,
            /*Added by Chad*/
            maxWidth: 1280,
            maxHeight: 720
        }
    }
};

qvgaButton.onclick = function () {
    getMedia(qvgaConstraints);
};
vgaButton.onclick = function () {
    getMedia(vgaConstraints);
};
hdButton.onclick = function () {
    getMedia(hdConstraints);
};

function...