DART Capture video webkitGetUserMedia

He leído un interesante artículo sobre la captura de video con HTML5.

La nueva api getUserMedia te permite acceder a la webcam y al micrófono del usuario siempre que el usuario acepte la solicitud en su navegador web.

Viendo ejemplos de código y uso en JavaScript he pensado en reproducir un ejemplo básico en DART.

Voy a realizar un sencillo ejemplo para demostrar lo simple que resulta acceder a estas nuevas funciones con DART y webkitGetUserMedia.

Este ejemplo actualmente solo funcionará con Google Chrome.

Vamos a crear una sencilla interfaz HTML para ejecutar video directamente en HTML5 con la webcam del usuario y DART.


import 'dart:html';

void main() {
  DivElement d = new DivElement();
  d.style.setProperty('text-align', 'center');
  document.body.nodes.add(d);

  VideoElement v = new VideoElement();
  v.id = 'video';
  v.style.setProperty('border', '1px solid #000');
  v.autoplay = true;
  d.nodes.add(v);

  ButtonElement bcapture = new ButtonElement();
  bcapture.id = 'bcapture';
  bcapture.text = 'Capture video';

  ButtonElement bstop = new ButtonElement();
  bstop.id = 'bstop';
  bstop.text = 'Stop';

  d.nodes.add(new BRElement());
  d.nodes.add(bcapture);
  d.nodes.add(bstop);
}

El código anterior nos crea una interfaz como la que puedes ver en la captura de pantalla.

google dart capture video sample html

A continuación vamos a aplicar los eventos sobre los botones que hemos creado.


bcapture.on.click.add((ev) {
  window.navigator.webkitGetUserMedia({'video': true}, onSuccess, onFail);
});

bstop.on.click.add((ev) {
  v.pause();
});

Creamos las funciones callback onSuccess y onFail que utiliza webkitGetUserMedia.


void onSuccess(LocalMediaStream stream) {
  VideoElement v = document.query('video');
  v.src = window.createObjectUrl(stream);
}

void onFail(NavigatorUserMediaError error) {
  window.alert('Error: ${error}');
}

Cuando pulsemos en el botón Capture Video Google Chrome nos preguntará si deseamos dar permiso de acceso a nuestra WebCam.

google dart capture video sample acceso

Si pulsamos en Permitir veremos como en nuestro cuadro HTML cominezan a reproducirse las imágenes que veamos con la webcam. Podemos pulsar el botón Stop para detener la reproducción.

google dart capture video sample image

Aquí puedes ver el código completo.


import 'dart:html';

void onSuccess(LocalMediaStream stream) {
  VideoElement v = document.query('video');
  v.src = window.createObjectUrl(stream);
}

void onFail(NavigatorUserMediaError error) {
  window.alert('Error: ${error}');
}

void main() {
  DivElement d = new DivElement();
  d.style.setProperty('text-align', 'center');
  document.body.nodes.add(d);

VideoElement v = new VideoElement();
v.id = 'video';
v.style.setProperty('border', '1px solid #000');
v.autoplay = true;
d.nodes.add(v);

ButtonElement bcapture = new ButtonElement();
bcapture.id = 'bcapture';
bcapture.text = 'Capture video';

ButtonElement bstop = new ButtonElement();
bstop.id = 'bstop';
bstop.text = 'Stop';

d.nodes.add(new BRElement());
d.nodes.add(bcapture);
d.nodes.add(bstop);

  bcapture.on.click.add((ev) {
    window.navigator.webkitGetUserMedia({'video': true}, onSuccess, onFail);
  });

  bstop.on.click.add((ev) {
    v.pause();
  });
}


 Google+

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s