Utilizzare la webcam con Javascript
Ebbene si, anche con Javascript è possibile usare la webcam.
Ed è anche abbastanza semplice usando l'interfaccia MediaDevices dell'oggetto navigator, ed il metodo getUserMedia.
Qui un pò di documentazione su MediaDevices e getUserMedia.
La documentazione di Mozilla è sempre buona e abbastanza precisa.
Ma vediamo un esempio abbastanza basico:
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video { border: 2px solid #666;transform: rotateY(180deg); }
</style>
</head>
<body>
<video></video>
<br>
<button>Start camera</button>
</body>
<script type="text/javascript">
navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
getUserMedia: function (c) {
return new Promise(function (y, n) {
(navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n);
});
}
} : null);
if (!navigator.mediaDevices) {
throw new Error("getUserMedia() not supported.");
}
var video = document.querySelector('video');
var constraints = {
audio: false,
video: true
};
function startCamera() {
return navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
video.src = URL.createObjectURL(stream);
video.play();
return stream;
})
.catch(function (error) {
console.error(error);
});
}
var streamOn = null;
document.querySelector('button').onclick = function () {
var button = this;
if (streamOn !== null) {
streamOn.stop();
URL.revokeObjectURL(video.src);
button.textContent = 'Start camera';
} else {
button.textContent = 'Starting camera';
startCamera().then(function (stream) {
streamOn = stream;
button.textContent = 'Stop camera';
});
}
}
</script>
</html>
Ho impostato anche una regola CSS per "ruotare" il video, e non vedersi come ad uno specchio.
Ovviamente non stiamo trasmettendo nulla in questo esempio, ma stiamo solo usando la webcam e vedendo noi stessi.
Però è un buon punto di partenza.
Enjoy!
javascript navigator mediadevices getusermedia webcam
Commentami!