getUserMedia example

An example of a WebRTC getUserMedia implementation

by rowntreerob

HTML

<body>
    <header>GetUserMedia Example</header>
    <video id="videoLocal"></video>
    <br/>
    <button onclick="stopStream()">stop</button>
    <button onclick="startStream()">start</button>
</body>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    font-family: arial;
}
header {
    height: 40px;
    line-height: 30px;
    padding-left: 20px;
    background: #007fff;
}
#videoLocal {
    margin-left: 2%;
}

JavaScript

//Browser compatibility
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;

var streamObj = null,
    video = null;

document.addEventListener("DOMContentLoaded", function(event) {
    //The video object
    video = document.getElementById('videoLocal');
});

function startStream() {
    //Check if the user media is supported
    if (navigator.getUserMedia) {
        //Request for the user media
        navigator.getUserMedia(
            {
                video: {
                  width: {ideal:629},
                },
                audio: false,
            },
            onSuccess,
            onErrors
        );
    } else {
        alert("User media is not supported.");
    }
}

function onSuccess(stream) {
    //Play the media stream in the video element
    streamObj = stream;
    console.log(stream.getVideoTracks()[0].getSettings());
    //video.src = window.URL.createObjectURL(streamObj);
    //video.play();
}

function onErrors(error) {
    //Handle the permission denied error in Chrome and 'Starting video failed' error in Firefox
    if (error.name == "PermissionDeniedError" || error == "Starting video failed") {
        alert("Media might already be in use");
    } else { //Handle all other errors
        console.log("error: ", error);
    }
}

function stopStream() {
    console.log("video.videoWidth:" + video.videoWidth + ", video.videoHeight:" + video.videoHeight);
    streamObj.getVideoTracks()[0].stop();
}