1 files changed, 116 insertions, 0 deletions
diff --git a/files/pt-br/web/api/imagecapture/index.html b/files/pt-br/web/api/imagecapture/index.html
new file mode 100644
index 0000000000..242ec1ac22
--- /dev/null
+++ b/files/pt-br/web/api/imagecapture/index.html
@@ -0,0 +1,116 @@
+---
+title: ImageCapture
+slug: Web/API/ImageCapture
+translation_of: Web/API/ImageCapture
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">A interface <strong><code>ImageCapture</code></strong> da <a href="/en-US/docs/Web/API/MediaStream_Image_Capture_API">MediaStream Image Capture API</a> fornece métodos para permitir a captura de images ou fotos de uma câmera ou de um dispositivo fotográfico. É fornecido uma interface para capturar images de um dispositive fotográfico referenciado por meio de um {{domxref("MediaStreamTrack")}} válido.</span></p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture.ImageCapture()", "ImageCapture()")}}</dt>
+ <dd>Cria um novo objeto <code>ImageCapture</code> que pode ser usado para capturar quadros estáticos (fotos) de um determinado {{domxref ("MediaStreamTrack")}} que representa um fluxo de vídeo.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture.track")}} {{readonlyinline}}</dt>
+ <dd>Retorna uma referência ao {{domxref ("MediaStreamTrack")}} passado ao construtor.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p>A interface do <code>ImageCapture</code> é baseada em {{domxref ("EventTarget")}}}, portanto inclui os métodos definidos por essa interface e os listados abaixo.</p>
+
+<dl>
+ <dt>{{domxref("ImageCapture.takePhoto()")}}</dt>
+ <dd>Faz uma única exposição usando o dispositivo de captura de vídeo que busca um {{domxref ("MediaStreamTrack")}} e retorna um {{jsxref ("Promise")}} que resolve com um {{domxref ("Blob")}} que contém o dados.</dd>
+ <dt>{{domxref("ImageCapture.getPhotoCapabilities()")}}</dt>
+ <dd>Retorna um {{jsxref ("Promise")}} que resolve com um objeto {{domxref ("PhotoCapabilities")}} que contém os intervalos de opções de configuração disponíveis.</dd>
+ <dt>{{domxref("ImageCapture.getPhotoSettings()")}}</dt>
+ <dd>Retorna um {{jsxref ("Promise")}} que é resolvido com um objeto {{domxref ("PhotoSettings")}} que contém as definições de configuração de foto atuais.</dd>
+ <dt>{{domxref("ImageCapture.grabFrame()")}}</dt>
+ <dd>Tira uma captura instantânea do vídeo ao vivo em um {{domxref ("MediaStreamTrack")}}, retornando um {{domxref ("ImageBitmap")}}, se for bem-sucedido.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O código a seguir foi retirado do <a href="https://googlechrome.github.io/samples/image-capture/grab-frame-take-photo.html">Chrome's Grab Frame - Take Photo Sample</a>. Como o <code>ImageCapture</code> requer algum lugar para capturar uma imagem, o exemplo abaixo começa com o dispositivo de mídia de um dispositivo (em outras palavras, uma câmera).</p>
+
+<p>Este exemplo mostra, aproximadamente, um {{domxref ("MediaStreamTrack")}} extraído do {{domxref ("MediaStream")}} de um dispositivo. A faixa é usada para criar um objeto <code>ImageCapture</code>, para que seja possível chamar <code>takePhoto()</code> e <code>grabFrame()</code>. Por fim, mostra como aplicar os resultados dessas chamadas a um objeto de tela.</p>
+
+<pre class="brush: js">var imageCapture;
+
+function onGetUserMediaButtonClick() {
+  navigator.mediaDevices.getUserMedia({video: true})
+  .then(mediaStream =&gt; {
+    document.querySelector('video').srcObject = mediaStream;
+
+    const track = mediaStream.getVideoTracks()[0];
+    imageCapture = new ImageCapture(track);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+function onGrabFrameButtonClick() {
+  imageCapture.grabFrame()
+  .then(imageBitmap =&gt; {
+    const canvas = document.querySelector('#grabFrameCanvas');
+    drawCanvas(canvas, imageBitmap);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+function onTakePhotoButtonClick() {
+  imageCapture.takePhoto()
+  .then(blob =&gt; createImageBitmap(blob))
+  .then(imageBitmap =&gt; {
+    const canvas = document.querySelector('#takePhotoCanvas');
+    drawCanvas(canvas, imageBitmap);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+/* Utils */
+
+function drawCanvas(canvas, img) {
+  canvas.width = getComputedStyle(canvas).width.split('px')[0];
+  canvas.height = getComputedStyle(canvas).height.split('px')[0];
+  let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
+  let x = (canvas.width - img.width * ratio) / 2;
+  let y = (canvas.height - img.height * ratio) / 2;
+  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
+      x, y, img.width * ratio, img.height * ratio);
+}
+
+document.querySelector('video').addEventListener('play', function() {
+  document.querySelector('#grabFrameButton').disabled = false;
+  document.querySelector('#takePhotoButton').disabled = false;
+});</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Image','#imagecaptureapi','ImageCapture')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+
+
+<p>{{Compat("api.ImageCapture")}}</p>