You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.1 KiB
73 lines
2.1 KiB
9 years ago
|
|
||
|
|
|
||
|
|
<video autoplay></video>
|
||
|
|
<img src="" width="640" height="480" id="image">
|
||
|
|
<canvas style="display:none;" width="640" height="480" ></canvas>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/**
|
||
|
|
|
||
|
|
NodeJS server, Chrome/HTML5 client, WebSockets for transferring
|
||
|
|
http://francisshanahan.com/index.php/2011/stream-a-webcam-using-javascript-nodejs-android-opera-mobile-web-sockets-and-html5/
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
function setupWebSocket() {
|
||
|
|
var ws = new WebSocket("ws://localhost:8080/");
|
||
|
|
ws.onopen = function() {
|
||
|
|
console.log("connected");
|
||
|
|
}
|
||
|
|
ws.onmessage = function(e) {
|
||
|
|
document.getElementById("streamed").src = e.data;
|
||
|
|
}
|
||
|
|
return ws;
|
||
|
|
}
|
||
|
|
var ws = setupWebSocket();
|
||
|
|
|
||
|
|
// cross-platform stuff.
|
||
|
|
window.URL = window.URL || window.webkitURL;
|
||
|
|
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
|
||
|
|
navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
||
|
|
// Note: The file system has been prefixed as of Google Chrome 12:
|
||
|
|
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
|
||
|
|
|
||
|
|
|
||
|
|
var video = document.querySelector('video');
|
||
|
|
var canvas = document.querySelector('canvas');
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
var localMediaStream = null;
|
||
|
|
|
||
|
|
function snapshot() {
|
||
|
|
if (localMediaStream) {
|
||
|
|
ctx.drawImage(video, 0, 0);
|
||
|
|
// "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
|
||
|
|
var image = canvas.toDataURL('image/png');
|
||
|
|
document.querySelector('img').src = image;
|
||
|
|
|
||
|
|
//tryToSaveIt(image);
|
||
|
|
ws.send(image);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function startVideo() {
|
||
|
|
video.addEventListener('click', snapshot, false);
|
||
|
|
setInterval(snapshot, 1000 * 60);
|
||
|
|
// Not showing vendor prefixes or code that works cross-browser.
|
||
|
|
navigator.getUserMedia({video: true}, function(stream) {
|
||
|
|
video.src = window.URL.createObjectURL(stream);
|
||
|
|
localMediaStream = stream;
|
||
|
|
}, function(e) {
|
||
|
|
console.log("rejected", e);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<h2>hello!</h2>
|
||
|
|
|
||
|
|
<a href="#" onclick="startVideo()">klik hier</a> om video te capturen.<br/>
|
||
|
|
|
||
|
|
<hr/>
|
||
|
|
|
||
|
|
<h2>Streamed image:</h2>
|
||
|
|
|
||
|
|
<img src="" width="640" height="480" id="streamed">
|