Ovládání fotoaparátu a videa pomocí HTML5

Metoda pro získání přístupu ke kameře byla původně navigator.getUserMedianavigator.mediaDevices.getUserMedia .

Prodejci prohlížečů nedávno rozhodli, že getUserMedia by měl fungovat pouze na https: protokol. Aby toto rozhraní API fungovalo, budete potřebovat certifikát SSL.

Rozhraní API na straně klienta na mobilních a stolních zařízeních rychle poskytují stejná rozhraní API. Samozřejmě naše mobilní zařízení získala přístup k některým z těchto rozhraní API jako první, ale tato rozhraní API se pomalu dostávají na plochu. Jedním z těchto rozhraní API je getUserMedia API, které poskytuje vývojářům přístup k fotoaparátu uživatele. Dovolte mi ukázat vám, jak získat jednoduchý přístup k fotoaparátu z vašeho prohlížeče!

Zobrazit ukázku

HTML

Přečtěte si prosím moji poznámku o struktuře HTML níže:

<!--
	Ideally these elements aren't created until it's confirmed that the 
	client supports video/camera, but for the sake of illustrating the 
	elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

Každý z těchto prvků by měl být vytvořen, jakmile bude potvrzeno potvrzení podpory fotoaparátu, ale kvůli tomuto tutoriálu jsem vám chtěl ukázat, jak prvky vypadají se základním HTML. Pamatujte, že rozměry, se kterými pracujeme, jsou 640x480.

JavaScript

Protože výše uvedené prvky HTML jsou již vytvořeny, bude část JavaScriptu vypadat menší, než si myslíte:

// Grab elements, create settings, etc.
var video = document.getElementById('video');

// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    });
}

/* Legacy code below: getUserMedia 
else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ video: true }, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia({ video: true }, function(stream){
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia({ video: true }, function(stream){
        video.srcObject = stream;
        video.play();
    }, errBack);
}
*/

Jakmile bude zjištěno, že prohlížeč podporuje navigator.mediaDevices.getUserMedia , jednoduchá metoda nastaví video src prvku do živé kamery/webové kamery uživatele. Volání play metoda videa pak spustí živé streamování video připojení prvku. To je vše, co je potřeba k připojení fotoaparátu k prohlížeči!

Focení je jen o trochu složitější. Jednoduše přidejte do obecného tlačítka posluchače kliknutí a nakreslete obrázek z videa!

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});

Samozřejmě můžete přidat nějaké sexy obrázkové filtry a vydělat miliardu dolarů... ale to si nechám na další příspěvek. Minimálně byste však mohli převést snímek plátna na obrázek! O obrazových filtrech plátna budu mluvit v budoucnu...

Zobrazit ukázku

Možnost přístupu k fotoaparátu v prohlížeči bez použití softwaru třetích stran je neuvěřitelný pokrok. Ve spojení s plátnem a trochou JavaScriptu se fotoaparát stal rychle a snadno dostupný. Nejen, že je k dispozici fotoaparát, ale protože je plátno ultraflexibilní, v budoucnu budeme moci přidat sexy filtry obrázků ve stylu Instagramu. Prozatím nás však pouhý přístup k fotoaparátu v našem prohlížeči posouvá mílovými kroky vpřed. Bavte se při fotografování ve vašem prohlížeči!

Příspěvek inspirovaný I see you getUserMedia; poskytl skvělý výchozí bod pro tento příspěvek.