videocamera javascript php html5

Catturare  Audio e Video con HTML5

catturare immagini dalla webcam con html5


Per molti anni per catturare video e audio attraverso un sito web abbiamo dovuto fare affidamento su plugin installati sul browser (Flash o Silverlight) per portare a termine il lavoro. Dallo HTML5 invece vengono sviluppate delle tecnologie in grado di utilizzare queste periferiche in modo finalmente appropriato. HTML5 di fatto ha portato un aumento di accesso all'hardware del dispositivo. Ad esempio, la geolocalizzazione (GPS), l'API di orientamento (accelerometro), le WebGL (GPU) e l'API Web Audio (hardware audio) sono esempi perfetti. 
In questo breve articolo introduciamo navigator.mediaDevices.getUserMedia(), che consente alle app Web di accedere alla videocamera e al microfono dell'utente.

Le specifiche HTML Media Capture lavorano sullo <input type="file"> aggiungendo il  parametro accept.

Se vuoi che un utente sul tuo sito sia in grado di fare l'upload di una foto catturata direttamente dalla camera di un mobile device è sufficiente aggiungere capture=camera nel parametro accept come di seguito riportato:


<input type="file" accept="image/*;capture=camera">

Per la registrazione di un video o un audio la cosa è molto simile basta aggiungere quanto segue: 

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

La rapidità che si è avuto nel trovare un'adatta Api per catturare video e audio è stato grazie allo sforzo della WebRTC(Web Real Time Communications). Le specifiche sono documentate su W3C WebRTC Working Group.
Google, Opera, Mozilla, e pochi altri browser implementano queste specifiche.

getUserMedia() è una di quelle specifiche della WebRTC in quanto rappresenta il gateway di un set di Api utili per l'accesso allo stream del microfono/videocamera locale tramite il browser. 

Con getUserMedia(), possiamo accedere direttamente alla camera dal browser senza installazione di eventuali plug-in.

L'unica cosa da fare è provare a verificare se il nostro browser supporta l'esistenza del navigator.mediaDevices.getUserMedia, come riportato dal codice javascript di seguito:

function hasGetUserMedia() {
  return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
}

if (hasGetUserMedia()) {
  
         alert('getUserMedia() is supported by your browser');
 } else { alert('getUserMedia() is not supported by your browser'); }

Richiesta Permesso di Accesso

Per usare  la webcam o il microfono, bisogna richiedere sempre il permesso all'utente. I parametri di getUserMedia() sono oggetti che specificano le richieste per ciascun tipo di media che vogliamo accedere. Ad esempio, se vogliamo accedere alla webcam i parametri sarebbero {video: true}. Per usare microfono e camera basta settare entrambi come segue:
{video: true, audio: true}.

<video autoplay></video>

<script>
const constraints = {
  video: true
};

const video = document.querySelector('video');

function handleSuccess(stream) {
  video.srcObject = stream;
}

function handleError(error) {
  console.error('Reeeejected!', error);
}

navigator.mediaDevices.getUserMedia(constraints).
  then(handleSuccess).catch(handleError);
</script>

Media capture è un perfetto esempio di HTML5 APIs che lavorano assieme.
Lavora assieme ad altri elementi HTML5 , come <audio> e <video>.
Da notare che non stiamo impostando un attributo su <video>  questo perche anzichè fornire una Url del video di un file media, forniamo lo stream MediaStream dalla webcam.

Impostare obblighi sui media stream (risoluzione, height, width)

Il parametro di getUserMedia() può essere impostato per specificare ulteriori richieste o obblighi al media stream recuperato dai dispositivi, per esempio è possibile indicare che lo stream sia di tipo HD o meno, come di seguito mostrato:

var hdConstraints = {
  video: {width: {min: 1280}, height: {min: 720}}
};

navigator.mediaDevices.getUserMedia(hdConstraints, successCallback, errorCallback);

...

var vgaConstraints = {
  video: {width: {exact: 640}, height: {exact: 480}}
};

navigator.mediaDevices.getUserMedia(vgaConstraints, successCallback, errorCallback);

In questo modo si obbliga la webcam ha supportare una certa risoluzione altrimenti  getUserMedia() invierà  un  OverconstrainedError  impedendo all'utente di accedere alla camera. 

Selzionare la Sorgente del Media

Il metodo navigator.mediaDevices.enumerateDevices() fornisce le info disponibili riguardo l'input/output dei device, e permette di selezionare la camera o il microfono. 

Qui di seguito è riportato un metodo per abilitare la selezione della sorgente media:

const videoElement = document.querySelector('video');
const audioSelect = document.querySelector('select#audioSource');
const videoSelect = document.querySelector('select#videoSource');

const videoElement = document.querySelector('video');
const audioSelect = document.querySelector('select#audioSource');
const videoSelect = document.querySelector('select#videoSource');

navigator.mediaDevices.enumerateDevices()
  .then(gotDevices).then(getStream).catch(handleError);

audioSelect.onchange = getStream;
videoSelect.onchange = getStream;

function gotDevices(deviceInfos) {
  for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
      option.text = deviceInfo.label ||
        'microphone ' + (audioSelect.length + 1);
      audioSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
      option.text = deviceInfo.label || 'camera ' +
        (videoSelect.length + 1);
      videoSelect.appendChild(option);
    } else {
      console.log('Found one other kind of source/device: ', deviceInfo);
    }
  }
}

function getStream() {
  if (window.stream) {
    window.stream.getTracks().forEach(function(track) {
      track.stop();
    });
  }

  var constraints = {
    audio: {
      deviceId: {exact: audioSelect.value}
    },
    video: {
      deviceId: {exact: videoSelect.value}
    }
  };

  navigator.mediaDevices.getUserMedia(constraints).
    then(gotStream).catch(handleError);
}

function gotStream(stream) {
  window.stream = stream; // make stream available to console
  videoElement.srcObject = stream;
}

function handleError(error) {
  console.error('Error: ', error);
}


Per catturare un' immagine dalla camera
Il metodo  API's ctx.drawImage(video, 0, 0) disegna un immagine  sul <canvas> prelevandola dal frame video <video width="300" height="150"> al momento del click sul bottone. 

<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>

<script>
  const button = document.querySelector('#screenshot-button');
  const img = document.querySelector('#screenshot-img');
  const video = document.querySelector('#screenshot-video');

  const canvas = document.createElement('canvas');

  button.onclick = video.onclick = function() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    // Other browsers will fall back to image/png
    img.src = canvas.toDataURL('image/webp');
  };

  function handleSuccess(stream) {
    video.srcObject = stream;
  }

  navigator.mediaDevices.getUserMedia(constraints).
      then(handleSuccess).catch(handleError);
</script>

Vai al Tool che mostra l'esempio