webrtc/samples/js/demos/html/gum4.html

96 lines
2.5 KiB
HTML

<!DOCTYPE html>
<!-- saved from url=(0070)http://webrtc.googlecode.com/svn/trunk/samples/js/demos/html/gum1.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>getUserMedia Demo 4</title>
<style>
video {
border:5px solid black;
width:400px;
height:300px;
}
button {
font: 18px sans-serif;
padding: 8px;
}
</style>
</head>
<body>
<video id="vid1" name="morrallas" autoplay="true"></video>
<video id="vid2" autoplay="true"></video>
<video id="vid3" autoplay="true"></video>
<video id="vid4" autoplay="true"></video>
<br/>
<button id="btn" onclick="start1()">Start Lowres (160x120)</button>
<button id="btn" onclick="start2()">Start Midres (320x240) @15fps</button>
<button id="btn" onclick="start3()">Start NormRes Unconstrained (640x480)</button>
<button id="btn" onclick="start4()">Start HighRes (960x720) @8fps</button>
<script>
video1= document.getElementById("vid1");
var constraints1 ={
"audio": false, "video": { "mandatory": {
"minWidth": "160", "maxWidth": "160", "minHeight": "120", "maxHeight": "120",
"minFrameRate": "30"
},
"optional": []
}
}
video2= document.getElementById("vid2");
var constraints2 ={
"audio": false, "video": { "mandatory": {
"minWidth": "320", "maxWidth": "320", "minHeight": "240", "maxHeight": "240",
"maxFrameRate": "15"
},
"optional": []
}
}
video3 = document.getElementById("vid3");
video4= document.getElementById("vid4");
var constraints4 ={
"audio": false, "video": { "mandatory": {
"minWidth": "960", "maxWidth": "960", "minHeight": "720", "maxHeight": "720",
"maxFrameRate": "8"
},
"optional": []
}
}
function start1() {
navigator.webkitGetUserMedia(constraints1, gotStream1, getUserMediaError);
btn.disabled = true;
}
function gotStream1(stream) {
video1.src = webkitURL.createObjectURL(stream);
}
function start2() {
navigator.webkitGetUserMedia(constraints2, gotStream2, getUserMediaError);
btn.disabled = true;
}
function gotStream2(stream) {
video2.src = webkitURL.createObjectURL(stream);
}
function start3() {
navigator.webkitGetUserMedia({video:true}, gotStream3, getUserMediaError);
btn.disabled = true;
}
function gotStream3(stream) {
video3.src = webkitURL.createObjectURL(stream);
}
function start4() {
navigator.webkitGetUserMedia(constraints4, gotStream4, getUserMediaError);
btn.disabled = true;
}
function gotStream4(stream) {
video4.src = webkitURL.createObjectURL(stream);
}
function getUserMediaError(e) {
alert('Error during webkitGetUserMedia: '+e);
}
</script>
</body></html>