We can get Live Input, Audio and Video, directly
under our App by using an API called getUserMedia. This
is a simple example where we just call getUserMedia,
passing some constraints that say we want video, and then
we assign the resulting stream to a video element
in the page. Of course, this just gives us a
rectangle with live Video Input. We probably want to
do something with it. If we want to grab Snapshots
like if we want to implement a Camera Application, we can
do this with a canvas context and DrawImage. Whenever we want
to take a Snapshot, we simply grab the image from
the video and we draw it to the camera with DrawImage.
Of course a canvas in different than an image. You
can't directly copy a canvas and paste it somewhere else, or
download it your hard drive or post it to your
social networks. Or any of the other typical User flows centred
around images, but it turns out, canvas has a
handy function to encode itself as an image. The canvas
toDataURL method. Here, instead of displaying the canvas itself,
we're copying the canvas contents as a data earl to
the source of an image tag. And if you
want to save these images to the Mobile's local storage,
you can do that, too, by forcing a download of
a link using the download attribute on an anchor element.
This isn't really downloading the data per se, it's encoded in
the link itself, so you're not really transferring things over the network.
Podemos lograr Entrada Dinámica,
de audio y video,
directo en la aplicación
empleando una API llamada getUserMedia.
Este es un ejemplo sencillo
para llamar a getUserMedia,
pasándole algunas restricciones
que especifican que queremos video,
y luego asignamos
la transmisión resultante
a un elemento
de video en la página .
Por supuesto, esto da como resultado
un recuadro con entrada de video dinámica.
Probablemente querremos
utilizarla para algo.
Si deseamos
capturar instantáneas,
por ejemplo si queremos implementar
una aplicación para cámara,
podemos lograrlo con un contexto
de lienzo y DrawImage.
Siempre que queramos una instantánea,
simplemente capturamos la imagen
del video y la dibujamos
en el lienzo con DrawImage.
Desde luego, un lienzo
no es lo mismo que imagen.
Un lienzo no se puede copiar
y pegar directamente en otro lugar,
o descargarla al disco duro
o publicarlo en las redes sociales.
O cualquier otro uso típico de usuario
centrado en imágenes,
pero resulta que el lienzo
tiene una conveniente función
que permite codificarlo como una imagen.
El método canvas.toDataURL.
Aquí, en lugar de mostrar el lienzo,
copiamos los contenidos del lienzo
como una url de datos
al origen de
una etiqueta de imagen.
Y si queremos guardar estas imágenes
en el almacenamiento local del móvil,
podemos hacerlo, también,
forzando la descarga de un enlace
utilizando el atributo de descarga
de un elemento de anclaje.
Esto en efecto
no descarga información real,
que va codificada en el propio enlace,
no estamos de veras
transferiendo nada
a través de la red.
getUserMediaと呼ばれるAPIを使用すると
音声とビデオの入力を
ライブで直接できるようになります
これはgetUserMediaを呼び出すシンプルな例です
constraintsはここではビデオです
そしてvideo要素にストリームを割り当てます
これだけではライブビデオ入力の
長方形が現れるだけです
これを元に何かしましょう
カメラアプリケーションを実装して
スナップショットを撮りたければ
canvasコンテキストとdrawImageで実現できます
スナップショットを撮りたい場合は
ビデオから画像を取り入れdrawImageで描画します
canvasは画像とは異なりますので
コピーしてどこかに貼りつけたり
ハードディスクにダウンロードしたり
SNSに掲示するなどの画像を中心とする
ユーザフローはできません
しかしcanvasには
画像としてエンコードする便利な機能があります
canvas.toDataURLメソッドです
canvas自体を表示する代わりに
canvasのコンテンツをデータとして
imgタグにコピーしています
モバイルのローカルストレージに画像を
保存したい場合はa要素の
download属性を使用すれば可能です
実際はデータをダウンロードしているのではなく
リンクとしてエンコードされているので
ネットワークでの転送はありません
Podemos ter entrada ao vivo,
Áudio e Vídeo, diretamente
no aplicativo usando um API
chamado getUserMedia.
Este é um exemplo simples de
chamar getUserMedia,
colocar algumas restrições
de que queremos vídeo,
definimos o fluxo resultante
para o elemento vídeo
na página. Isto nos dá apenas um
retângulo de entrada ao vivo
de vídeo. Talvez queiramos
fazer algo com isso. Se queremos
tirar fotos,
no caso de implementar
um aplicativo de câmera, podemos
fazê-lo com um contexto de desenho
e DrawImage. Sempre que quisermos
tirar uma foto, capturamos a imagem do
vídeo e colocamos na câmera
com o DrawImage.
É óbvio que um desenho é
diferente de uma imagem.
Não dá para copiar um desenho e
colá-lo em qualquer lugar,
ou baixá-lo para o disco rígido
e postá-lo nas
redes sociais, ou qualquer outro
modelo centrado no usuário
cercado por imagens,
mas acontece que o desenho tem uma
função útil de se codificar
como uma imagem. O método
canvas toDataURL. Em vez de
mostrar o próprio desenho,
copiamos o conteúdo do desenho
como dados url para
a fonte de uma marca de imagem. E se você
quiser salvar essas imagens
no armazenamento do celular,
pode fazê-lo ao forçar um download de
um link e usar um atributo de download
em um elemento âncora.
Isto não é realmente baixar os dados,
é codificá-los no
link, para que não transfira coisas pela rede.