This repository has been archived on 2022-07-06. You can view files and clone it, but cannot push or open issues or pull requests.
websocket-webcam/clientcam.html

73 lines
2.1 KiB
HTML
Executable File

<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">