API Web Áudio - APIs da Web

API Web Áudio
=============

A API de áudio da Web fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panorâmica) e muito mais.

Conceitos e uso de áudio da Web
-------------------------------

A API de áudio da Web envolve a manipulação de operações de áudio dentro de um **contexto de áudio** e foi projetada para permitir o **roteamento modular**. As operações básicas de áudio são realizadas com **nós de áudio**, que são vinculados para formar um **gráfico de roteamento de áudio**. Várias fontes — com diferentes tipos de layout de canal — são suportadas mesmo dentro de um único contexto. Este design modular oferece flexibilidade para criar funções de áudio complexas com efeitos dinâmicos.

Os nós de áudio são ligados em cadeias e teias simples por suas entradas e saídas. Eles geralmente começam com uma ou mais fontes. As fontes fornecem matrizes de intensidades sonoras (amostras) em fatias de tempo muito pequenas, geralmente dezenas de milhares delas por segundo. Estes podem ser calculados matematicamente (como `OscillatorNode` (en-US)), ou podem ser gravações de arquivos de som/vídeo (como `AudioBufferSourceNode` (en-US) e `MediaElementAudioSourceNode` ) e fluxos de áudio (`MediaStreamAudioSourceNode` (en-US)). Na verdade, os arquivos de som são apenas gravações das próprias intensidades sonoras, que vêm de microfones ou instrumentos elétricos e são misturadas em uma única e complicada onda.

As saídas desses nós podem ser vinculadas às entradas de outros, que misturam ou modificam esses fluxos de amostras de som em diferentes fluxos. Uma modificação comum é multiplicar as amostras por um valor para torná-las mais altas ou mais baixas (como é o caso de `GainNode` (en-US)). Uma vez que o som tenha sido suficientemente processado para o efeito pretendido, ele pode ser vinculado à entrada de um destino (`BaseAudioContext.destination` (en-US)), que envia o som para os alto-falantes ou fones de ouvido. Esta última conexão só é necessária se o usuário tiver que ouvir o áudio.

Um fluxo de trabalho simples e típico para áudio da web seria algo assim:

1. Criar contexto de áudio
2. Dentro do contexto, crie fontes — como `<áudio>`, oscilador, fluxo
3. Crie nós de efeitos, como reverb, filtro biquad, panner, compressor
4. Escolha o destino final do áudio, por exemplo, os alto-falantes do sistema
5. Conecte as fontes aos efeitos e os efeitos ao destino.

![Um diagrama de caixa simples com uma caixa externa denominada Contexto de áudio e três caixas internas denominadas Fontes, Efeitos e Destino. As três caixas internas têm setas entre elas apontando da esquerda para a direita, indicando o fluxo de informações de áudio.](/pt-BR/docs/Web/API/Web_Audio_API/audio-context_.png)

O tempo é controlado com alta precisão e baixa latência, permitindo que os desenvolvedores escrevam código que responda com precisão a eventos e seja capaz de direcionar amostras específicas, mesmo em uma alta taxa de amostragem. Assim, aplicações como baterias eletrônicas e sequenciadores estão bem ao alcance.

A API de áudio da Web também nos permite controlar como o áudio é *espacializado*. Utilizando um sistema baseado em um *modelo de ouvinte-fonte*, permite o controle do *modelo panorâmico* e trata da *atenuação induzida por distância* induzida por uma fonte em movimento (ou ouvinte em movimento).

você pode ler sobre a teoria da API de áudio da Web com muito mais detalhes em nosso artigo Conceitos básicos por trás da API de áudio da Web (en-US) .

Público-alvo da API de áudio da Web
-----------------------------------

A API de áudio da Web pode parecer intimidante para aqueles que não estão familiarizados com termos de áudio ou música e, como incorpora uma grande quantidade de funcionalidades, pode ser difícil começar se você for um desenvolvedor.

Ele pode ser usado para incorporar áudio em seu site ou aplicativo, fornecendo uma atmosfera como futurelibrary.no ou feedback auditivo em formulários. No entanto, também pode ser usado para criar instrumentos interativos *avançados*. Com isso em mente, é adequado tanto para desenvolvedores quanto para músicos.

Temos um tutorial introdutório simples (en-US) para aqueles que estão familiarizados com programação, mas precisam de uma boa introdução a alguns dos termos e estrutura da API.

Há também um artigo Conceitos básicos por trás da API de áudio da Web (en-US), para ajudá-lo a entender como o áudio digital funciona, especificamente no domínio da API. Isso também inclui uma boa introdução a alguns dos conceitos sobre os quais a API é construída.

Aprender a codificar é como jogar cartas - você aprende as regras, depois joga, depois volta e aprende as regras novamente, depois joga novamente. Portanto, se parte da teoria não se encaixar bem após o primeiro tutorial e artigo, há um tutorial avançado (en-US) que estende o primeiro para ajudá-lo a praticar o que você aprendeu e aplicar algumas técnicas mais avançadas para construir um sequenciador de passos.

Também temos outros tutoriais e material de referência abrangente disponível que abrange todos os recursos da API. Veja a barra lateral nesta página para saber mais.

Se você está mais familiarizado com o lado musical das coisas, está familiarizado com os conceitos de teoria musical, quer começar a construir instrumentos, então você pode ir em frente e começar a construir coisas com o tutorial avançado e outros como um guia (o tutorial linkado acima cobre agendando notas, criando osciladores e envelopes sob medida, bem como um LFO entre outras coisas.)

Se você não estiver familiarizado com o básico de programação, você pode querer consultar alguns tutoriais JavaScript para iniciantes e depois voltar aqui - veja nosso módulo de aprendizado JavaScript para iniciantes para um ótimo lugar para começar.

Interfaces da API de áudio da Web
---------------------------------

A API de áudio da Web tem várias interfaces e eventos associados, que dividimos em nove categorias de funcionalidade.

### Definição geral do gráfico de áudio

Contêineres e definições gerais que moldam gráficos de áudio no uso da API de áudio da Web.

`AudioContext`

A interface **`AudioContext`** representa um gráfico de processamento de áudio construído a partir de módulos de áudio ligados entre si, cada um representado por um `AudioNode`. Um contexto de áudio controla a criação dos nós que ele contém e a execução do processamento ou decodificação de áudio. Você precisa criar um `AudioContext` antes de fazer qualquer outra coisa, pois tudo acontece dentro de um contexto.

`AudioNode`

A interface **`AudioNode`** representa um módulo de processamento de áudio como uma *fonte de áudio* (por exemplo, um elemento HTML `<audio>` ou `<video>`), *audio destino*, *módulo de processamento intermediário* (por exemplo, um filtro como `BiquadFilterNode` ou *controle de volume* como `GainNode` (en-US)).

`AudioParam` (en-US)

A interface **`AudioParam`** representa um parâmetro relacionado ao áudio, como um de um `AudioNode`. Ele pode ser definido para um valor específico ou uma alteração no valor e pode ser programado para ocorrer em um horário específico e seguindo um padrão específico.

`AudioParamMap` (en-US)

Fornece uma interface tipo mapa para um grupo de interfaces `AudioParam` (en-US), o que significa que fornece os métodos `forEach()`, `get()`, `has()`, `keys ()` e `values()`, bem como uma propriedade `size`.

`BaseAudioContext` (en-US)

A interface **`BaseAudioContext`** atua como uma definição básica para gráficos de processamento de áudio online e offline, conforme representado por `AudioContext` e `OfflineAudioContext` respectivamente . Você não usaria `BaseAudioContext` diretamente — você usaria seus recursos por meio de uma dessas duas interfaces herdadas.

O evento `ended` (en-US)

O evento `ended` é acionado quando a reprodução é interrompida porque o fim da mídia foi atingido.

### Definindo fontes de áudio

Interfaces que definem fontes de áudio para uso na API de áudio da Web.

`AudioScheduledSourceNode` (en-US)

O **`AudioScheduledSourceNode`** é uma interface pai para vários tipos de interfaces de nó de fonte de áudio. É um `AudioNode`.

`OscillatorNode` (en-US)

A interface **`OscillatorNode`** representa uma forma de onda periódica, como uma onda senoidal ou triangular. É um módulo de processamento de áudio `AudioNode` que faz com que uma determinada *frequência* de onda seja criada.

`AudioBuffer` (en-US)

A interface **`AudioBuffer`** representa um pequeno recurso de áudio que reside na memória, criado a partir de um arquivo de áudio usando o método `BaseAudioContext.decodeAudioData` (en-US) ou criado com dados brutos usando `BaseAudioContext.createBuffer` (en-US). Uma vez decodificado neste formato, o áudio pode ser colocado em um `AudioBufferSourceNode` (en-US).

`AudioBufferSourceNode` (en-US)

A interface **`AudioBufferSourceNode`** representa uma fonte de áudio que consiste em dados de áudio na memória, armazenados em um `AudioBuffer` (en-US). É um `AudioNode` que atua como uma fonte de áudio.

`MediaElementAudioSourceNode` (en-US)

A interface **`MediaElementAudioSourceNode`** representa uma fonte de áudio que consiste em um elemento HTML `<audio>` ou `<video>`. É um `AudioNode` que atua como uma fonte de áudio.

`MediaStreamAudioSourceNode` (en-US)

A interface **`MediaStreamAudioSourceNode`** representa uma fonte de áudio que consiste em um `MediaStream` (en-US) (como uma webcam, microfone ou um fluxo sendo enviado de um computador remoto). Se várias faixas de áudio estiverem presentes no fluxo, a faixa cujo `id` (en-US) vem primeiro lexicograficamente (em ordem alfabética) é usada. É um `AudioNode` que atua como uma fonte de áudio.

`MediaStreamTrackAudioSourceNode` (en-US)

Um aceno de cabeça e do tipo `MediaStreamTrackAudioSourceNode` (en-US) representa uma fonte de áudio cujos dados vêm de um `MediaStreamTrack` (en-US). Ao criar o nó usando o método `createMediaStreamTrackSource()` (en-US) para criar o nó, você especifica qual faixa usar. Isso fornece mais controle do que `MediaStreamAudioSourceNode`.

### Definindo filtros de efeitos de áudio

Interfaces para definir os efeitos que você deseja aplicar às suas fontes de áudio.

`BiquadFilterNode`

A interface **`BiquadFilterNode`** representa um filtro simples de baixa ordem. É um `AudioNode` que pode representar diferentes tipos de filtros, dispositivos de controle de tom ou equalizadores gráficos. Um `BiquadFilterNode` sempre tem exatamente uma entrada e uma saída.

`ConvolverNode` (en-US)

A interface **`ConvolverNode`** é um `AudioNode` que executa uma Convolução Linear em um determinado `AudioBuffer` (en-US) e é frequentemente usado para obter um reverb efeito.

`DelayNode` (en-US)

A interface **`DelayNode`** representa uma linha de atraso; um módulo de processamento de áudio `AudioNode` que causa um atraso entre a chegada de um dado de entrada e sua propagação para a saída.

`DynamicsCompressorNode` (en-US)

A interface **`DynamicsCompressorNode`** fornece um efeito de compressão, que reduz o volume das partes mais altas do sinal para ajudar a evitar cortes e distorções que podem ocorrer quando vários sons são reproduzidos e multiplexados ao mesmo tempo.

`GainNode` (en-US)

A interface **`GainNode`** representa uma mudança no volume. É um módulo de processamento de áudio `AudioNode` que faz com que um determinado *gain* seja aplicado aos dados de entrada antes de sua propagação para a saída.

`WaveShaperNode` (en-US)

A interface **`WaveShaperNode`** representa um distorção não linear. É um `AudioNode` que usa uma curva para aplicar uma distorção de forma de onda ao sinal. Além dos efeitos de distorção óbvios, é frequentemente usado para adicionar uma sensação de calor ao sinal.

`PeriodicWave` (en-US)

Descreve uma forma de onda periódica que pode ser usada para moldar a saída de um `OscillatorNode` (en-US).

`IIRFilterNode` (en-US)

Implementa um filtro geral de resposta ao impulso infinito (IIR); este tipo de filtro pode ser usado para implementar dispositivos de controle de tom e equalizadores gráficos também.

### Definindo destinos de áudio

Assim que você terminar de processar seu áudio, essas interfaces definem onde ele deve ser emitido.

`AudioDestinationNode` (en-US)

A interface **`AudioDestinationNode`** representa o destino final de uma fonte de áudio em um determinado contexto — geralmente os alto-falantes do seu dispositivo.

`MediaStreamAudioDestinationNode` (en-US)

A interface **`MediaStreamAudioDestinationNode`** representa um destino de áudio que consiste em um WebRTC `MediaStream` (en-US) com um único `AudioMediaStreamTrack`, que pode ser usado de maneira semelhante a um `MediaStream` (en-US) obtido de `getUserMedia()` (en-US). É um `AudioNode` que atua como destino de áudio.

### Análise e visualização de dados

Se você deseja extrair tempo, frequência e outros dados do seu áudio, o `AnalyserNode` é o que você precisa.

`AnalyserNode` (en-US)

A interface **`AnalyserNode`** representa um nó capaz de fornecer informações de análise de frequência e domínio de tempo em tempo real, para fins de análise e visualização de dados.

### Dividindo e mesclando canais de áudio

Para dividir e mesclar canais de áudio, você usará essas interfaces.

`ChannelSplitterNode` (en-US)

A interface **`ChannelSplitterNode`** separa os diferentes canais de uma fonte de áudio em um conjunto de saídas *mono*.

`ChannelMergerNode` (en-US)

A interface **`ChannelMergerNode`** reúne diferentes entradas mono em uma única saída. Cada entrada será usada para preencher um canal da saída.

### Espacialização de áudio

Essas interfaces permitem adicionar efeitos panorâmicos de espacialização de áudio às suas fontes de áudio.

`AudioListener` (en-US)

A interface **`AudioListener`** representa a posição e orientação da única pessoa que está ouvindo a cena de áudio usada na espacialização de áudio.

`PannerNode` (en-US)

A interface **`PannerNode`** representa a posição e o comportamento de um sinal de fonte de áudio no espaço 3D, permitindo criar efeitos de panorâmica complexos.

`StereoPannerNode` (en-US)

A interface **`StereoPannerNode`** representa um simples nó panorâmico estéreo que pode ser usado para deslocar um fluxo de áudio para a esquerda ou para a direita.

### Processamento de áudio em JavaScript

Usando worklets de áudio, você pode definir nós de áudio personalizados escritos em JavaScript ou WebAssembly. Worklets de áudio implementam a interface `Worklet` (en-US), uma versão leve da interface `Worker`.

`AudioWorklet` (en-US)

A interface `AudioWorklet` está disponível através do objeto `AudioContext` do objeto `audioWorklet` (en-US) e permite adicionar módulos ao worklet de áudio a ser executado fora do thread principal.

`AudioWorkletNode` (en-US)

A interface `AudioWorkletNode` representa um `AudioNode` que está embutido em um gráfico de áudio e pode passar mensagens para o `AudioWorkletProcessor` correspondente.

`AudioWorkletProcessor` (en-US)

A interface `AudioWorkletProcessor` representa o código de processamento de áudio executado em um `AudioWorkletGlobalScope` que gera, processa ou analisa o áudio diretamente e pode passar mensagens para o `AudioWorkletNode` correspondente.

`AudioWorkletGlobalScope` (en-US)

A interface `AudioWorkletGlobalScope` é um objeto derivado de `WorkletGlobalScope` que representa um contexto de trabalho no qual um script de processamento de áudio é executado; ele foi projetado para permitir a geração, processamento e análise de dados de áudio diretamente usando JavaScript em um encadeamento de worklet em vez de no encadeamento principal.

#### Obsoleto: nós do processador de script

Antes da definição dos worklets de áudio, a API de áudio da Web usava o `ScriptProcessorNode` para processamento de áudio baseado em JavaScript. Como o código é executado no thread principal, eles têm um desempenho ruim. O `ScriptProcessorNode` é mantido por motivos históricos, mas está marcado como obsoleto.

`ScriptProcessorNode` (en-US)
Deprecated

A interface **`ScriptProcessorNode`** permite a geração, processamento ou análise de áudio usando JavaScript. É um módulo de processamento de áudio `AudioNode` que está vinculado a dois buffers, um contendo a entrada atual e outro contendo a saída. Um evento, implementando a interface `AudioProcessingEvent` (en-US), é enviado ao objeto toda vez que o buffer de entrada contém novos dados, e o manipulador de eventos termina quando preenche o buffer de saída com dados.

`audioprocess` (en-US) (evento)
Deprecated

O evento `audioprocess` é acionado quando um buffer de entrada de uma API de áudio da Web `ScriptProcessorNode` (en-US) está pronto para ser processado.

`AudioProcessingEvent` (en-US)
Deprecated

O `AudioProcessingEvent` representa eventos que ocorrem quando um buffer de entrada `ScriptProcessorNode` (en-US) está pronto para ser processado.

### Processamento de áudio off-line/de fundo

É possível processar/renderizar um gráfico de áudio muito rapidamente em segundo plano — renderizando-o para um `AudioBuffer` (en-US) em vez de para os alto-falantes do dispositivo — com o seguinte.

`OfflineAudioContext`

A interface **`OfflineAudioContext`** é uma interface `AudioContext` que representa um gráfico de processamento de áudio construído a partir de `AudioNode`s vinculados. Em contraste com um `AudioContext` padrão, um `OfflineAudioContext` realmente não renderiza o áudio, mas o gera, *tão rápido quanto possível*, em um buffer.

`complete` (en-US) (evento)

O evento `complete` é acionado quando a renderização de um `OfflineAudioContext` é encerrada.

`OfflineAudioCompletionEvent` (en-US)

O `OfflineAudioCompletionEvent` representa eventos que ocorrem quando o processamento de um `OfflineAudioContext` é encerrado. O evento `complete` (en-US) usa essa interface.

Guias e tutoriais
-----------------

Tutorial e exemplo: Teclado de Sintetizador SimplesEste artigo apresenta o código e uma demonstração funcional de um teclado que você pode tocar usando seu mouse. O teclado lhe permite alternar entre formas de onda padrões e customizadas. Esse exemplo utiliza das seguintes interfaces de Web API: `AudioContext`, `OscillatorNode`, `PeriodicWave`, e `GainNode`.

Exemplos
--------

Você pode encontrar vários exemplos em nosso repositório webaudio-example no GitHub.

Especificações
--------------

| Specification |
| --- |
| Web Audio API # AudioContext |

Compatibilidade com navegadores
-------------------------------

### AudioContext

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

### Tutoriais/guias

* Conceitos básicos por trás da API de áudio da Web (en-US)
* Usando a API de áudio da Web (en-US)
* Técnicas avançadas: criação de som, sequenciamento, temporização, agendamento (en-US)
* Guia de reprodução automática para APIs de mídia e áudio da Web (en-US)
* Usando filtros IIR (en-US)
* Visualizações com API de áudio da Web (en-US)
* Noções básicas de espacialização de áudio da Web (en-US)
* Controlando vários parâmetros com ConstantSourceNode (en-US)
* Misturando áudio posicional e WebGL (2012)
* Desenvolvendo o áudio do jogo com a API de áudio da Web (2012)
* Migrando código webkitAudioContext para padrões baseados em AudioContext (en-US)
### Bibliotecas

* Tones: uma biblioteca simples para tocar tons/notas específicos usando a API de áudio da Web.
* Tone.js: um framework para criar música interativa no navegador.
* howler.js: uma biblioteca de áudio JS que tem como padrão Web Audio API e retorna para HTML Audio, além de fornecer outros recursos úteis.
* Mooog: encadeamento de AudioNodes no estilo jQuery, envios/retornos no estilo do mixer e muito mais.
* XSound: Biblioteca Web Audio API para Sintetizador, Efeitos, Visualização, Gravação, etc.
* OpenLang: aplicativo da Web do laboratório de linguagem de vídeo HTML usando a API de áudio da Web para gravar e combinar vídeo e áudio de diferentes fontes em um único arquivo (fonte no GitHub)
* Pts.js: Simplifica a visualização de áudio na web (guide)
### Tópicos relacionados

* Tecnologias de mídia da Web (en-US)
* Guia para tipos e formatos de mídia na web


SVGAnimateTransformElement - APIs da Web

SVGAnimateTransformElement
==========================

A interface `SVGAnimateTransformElement` corresponde ao elemento `<animateTransform>`.

Propriedades
------------

*Essa interface não possui propriedades próprias mas as herda do seu pai, `SVGAnimationElement` (en-US).*

Métodos
-------

*Essa interface não possui métodos próprios mas os herda do seu pai, `SVGAnimationElement` (en-US).*

Especificações
--------------

| Specification |
| --- |
| SVG Animations Level 2 # InterfaceSVGAnimateTransformElement |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


SVGAElement - APIs da Web

SVGAElement
===========

O **`SVGAElement`** interface fornece acesso as propriedades do elemento `<a>`, bem como metodos para manipula-los.Propriedades
------------

*Esta interface também herda propriedades de sua interface pai,`SVGGraphicsElement` (en-US), e implementa propriedades de `SVGURIReference` (en-US) e de `HTMLHyperlinkElementUtils`.*

`SVGAElement.target` Somente leitura

It corresponds to the `target (en-US)` attribute of the given element.

Metodos
-------

*Esta interface não tem metodos próprios, porém herda metodos da interface `SVGGraphicsElement` (en-US).*

Exemplos
--------

No exemplo abaixo, o `target (en-US)` atributo do elemento `<a>` recebe o valor `_blank` e quando o link for clicado, ele notifica se a condição é verdadeira ou falsa.

```js
var linkRef = document.querySelector("a");
linkRef.target = "\_self";

linkRef.onclick = function () {
  if (linkRef.target === "\_blank") {
    console.log("BLANK!");
    linkRef.target = "\_self";
  } else {
    console.log("SORRY! not \_blank");
  }
};
```

Especificações
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGAElement |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* SVG `<a>` element


ImageCapture - APIs da Web

ImageCapture
============

A interface **`ImageCapture`** da MediaStream Image Capture API (en-US) 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 `MediaStreamTrack` (en-US) válido.

Construtor
----------

`ImageCapture()` (en-US)

Cria um novo objeto `ImageCapture` que pode ser usado para capturar quadros estáticos (fotos) de um determinado `MediaStreamTrack` (en-US) que representa um fluxo de vídeo.

Propriedades
------------

`ImageCapture.track` (en-US) Somente leitura

Retorna uma referência ao `MediaStreamTrack` (en-US) passado ao construtor.

Métodos
-------

A interface do `ImageCapture` é baseada em `EventTarget`, portanto inclui os métodos definidos por essa interface e os listados abaixo.

`ImageCapture.takePhoto()` (en-US)

Faz uma única exposição usando o dispositivo de captura de vídeo que busca um `MediaStreamTrack` (en-US) e retorna um `Promise` que resolve com um `Blob` que contém o dados.

`ImageCapture.getPhotoCapabilities()` (en-US)

Retorna um `Promise` que resolve com um objeto `PhotoCapabilities` (en-US) que contém os intervalos de opções de configuração disponíveis.

`ImageCapture.getPhotoSettings()` (en-US)

Retorna um `Promise` que é resolvido com um objeto `PhotoSettings` que contém as definições de configuração de foto atuais.

`ImageCapture.grabFrame()` (en-US)

Tira uma captura instantânea do vídeo ao vivo em um `MediaStreamTrack` (en-US), retornando um `ImageBitmap` (en-US), se for bem-sucedido.

Exemplo
-------

O código a seguir foi retirado do Chrome's Grab Frame - Take Photo Sample. Como o `ImageCapture` 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).

Este exemplo mostra, aproximadamente, um `MediaStreamTrack` (en-US) extraído do `MediaStream` (en-US) de um dispositivo. A faixa é usada para criar um objeto `ImageCapture`, para que seja possível chamar `takePhoto()` e `grabFrame()`. Por fim, mostra como aplicar os resultados dessas chamadas a um objeto de tela.

```js
var imageCapture;

function onGetUserMediaButtonClick() {
  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then((mediaStream) => {
      document.querySelector("video").srcObject = mediaStream;

      const track = mediaStream.getVideoTracks()[0];
      imageCapture = new ImageCapture(track);
    })
    .catch((error) => console.log(error));
}

function onGrabFrameButtonClick() {
  imageCapture
    .grabFrame()
    .then((imageBitmap) => {
      const canvas = document.querySelector("#grabFrameCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => console.log(error));
}

function onTakePhotoButtonClick() {
  imageCapture
    .takePhoto()
    .then((blob) => createImageBitmap(blob))
    .then((imageBitmap) => {
      const canvas = document.querySelector("#takePhotoCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => 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;
});
```

Especificações
--------------

| Specification |
| --- |
| MediaStream Image Capture # imagecaptureapi |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceTransport - APIs da Web

RTCIceTransport
===============

A interface **`RTCIceTransport`** fornece informação a respeito da camada de transporte ICE (en-US) na qual os dados estão sendo enviados e recebidos. Isso é particulamente útil se você precisa acessar as informações de estado da conexão.

Propriedades
------------

*A interface `RTCIceTransport` herda propriedades de sua interface pai, `EventTarget`. ele também oferta as seguintes propriedades:*

`component` (en-US) Somente leitura

O componente ICE que esta sendo usado pela transporte. O valor é uma das strings do `RTCIceTransport` tipo enumerável: `"RTP" (en-US)` ou `"RTSP"`.

`gatheringState` (en-US) Somente leitura

O `DOMString` indica em qual estado de recolhimento o agente ICE esta atualmente. O valor é um dos incluidos no `RTCIceGathererState` (en-US) tipo enumerável: `"new"`, `"gathering"`, ou `"complete"`.

`role` (en-US) Somente leitura

Retorna uma `DOMString` cujo valor é um membro do tipo enumerável `RTCIceRole` (en-US): `"controlling"` ou `"controlled"`; Isso indica se o agente ICE é aquele que toma a decisão final quanto ao par candidato a ser usado ou não.

`state` (en-US) Somente leitura

O `DOMString` indica qual o atual estado do agente ICE. O valor do `state` pode ser usado para determinar se o agente ICE fez uma conecxão inicial usando uma par de candidatos viável (`"connected"`), fez a seleção final do par de candidatos (`"completed"`), ou em um estado de erro (`"failed"`), além de outros estados. Veja o tipo enumerável `RTCIceTransportState` (en-US) para uma lista completa de estados.

Métodos
-------

*Também inclui métodos da interface pai `EventTarget`.*

`getLocalCandidates()` (en-US)

Retorna um array de objetos `RTCIceCandidate` (en-US), cada descrevendo um dos candidatos ICE que foram reunidos para o dispositivo local até o momento. Esses são os mesmos candidatos que já foram enviados para o peer remoto, enviando um evento `icecandidate` ao `RTCPeerConnection` (en-US) para transmissão.

`getLocalParameters()` (en-US)

Retorna o objeto `RTCIceParameters` (en-US) descrevendo o parâmetro ICE estabelecido através de uma ligação ao método `RTCPeerConnection.setLocalDescription()` (en-US). Retorna `null` se os parâmetros ainda não foram recebidos.

`getRemoteCandidates()` (en-US)

Retorna um array de objetos `RTCIceCandidate` (en-US), um para cada candidato do dispositivo remoto, que foram recebidos pelo local final da `RTCPeerConnection` (en-US) e entrega ao ICE através da chamada `addIceCandidate()` (en-US).

`getRemoteParameters()` (en-US)

Retorna um objeto `RTCIceParameters` (en-US) contendo os parâmetros ICE para o dispositivo remoto, como definido por uma chamada para `RTCPeerConnection.setRemoteDescription()` (en-US). Se `setRemoteDescription()` não foi chamada ainda, o retorno será `null`.

`getSelectedCandidatePair()` (en-US)

Retorna um objeto `RTCIceCandidatePair` (en-US) que identifica os dois candidatos — um para cada conexão — que foram selecionados até o momento. É possível que um par melhor sejá encontrado e selecionado posteriormente; Se você precisar acompanhar isso, veja o evento `selectedcandidatepairchange`. Se nenhum par de candidatos foi selecionado ainda o valor retornado será `null`.

Eventos
-------

Escute esses eventos usando `addEventListener()` ou atribuindo um *event listener* para `oneventname` propriedade dessa interface.

`gatheringstatechange` (en-US)

 Enviado ao objeto `RTCIceTransport` para indicar que o valor da propriedade `gatheringState` (en-US) foi alterado, indicando uma mudança no processo de negociação de candidatos ICE deste transporte.
 Também esta disponível através da propriedade *event handler* `ongatheringstatechange` (en-US).

`selectedcandidatepairchange` (en-US)

`Enviado para o RTCIceTransport` quando um novo, melhor par de candidatos foi selecionado para descrever a conectividade entre os dois peers. Isso pode ocorrer durante a negotiação ou a renegociação, incluindo depois de um ICE restart, que reusa os objetos `RTCIceTransport` existentes. O par de candidatos atuais pode ser obtido usando `getSelectedCandidatePair()` (en-US).
 Também esta disponível através da propriedade *event handler* `onselectedcandidatepairchange` (en-US).

`statechange` (en-US)

 Enviado par a instancia do `RTCIceTransport` quando o valor da propriedade `state` (en-US) foi alterada, indicando que o processo de recolhimento ICE mudou de estado.
 Também esta disponível através da propriedade *event handler* `onstatechange` (en-US).

Especificações
--------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ProcessingInstruction - APIs da Web

ProcessingInstruction
=====================

Uma **ProcessingInstruction (Instrução de Processamento)** incorpora instruções específicas de aplicações em XML (en-US) que pode ser ignorada por outras aplicações que não as reconhece. Mesmo se um processador XML ignora as instruções de processamento, irá dá-los um lugar no DOM.

Uma instrução de processamento é diferente de uma declaração XML, que fornece informação sobre o documento como por exemplo codificação de caracteres, e pode somente aparecer como o primeiro item em um documento.

Instruções de processamento definidas por usuário não podem começar com `'xml'`, pois estes são reservados (como `<?xml-stylesheet ?>)`.

Instruções de processamento herdam métodos e propriedades do `Node`.

### Atributos

* alvo (DOMString) - depois do `<?` e antes do *whitespace (en-US)* separando-o de `data`.
* dado (DOMString) - primeiro caractere *whitespace* brancodepois de `target` e antes de `?>`
Especificações
--------------

| Specification |
| --- |
| DOM Standard # interface-processinginstruction |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Veja também

* document.createProcessingInstruction
* whitespace no DOM (en-US)


FileReader - APIs da Web

FileReader
==========

O objeto **`FileReader`** permite que aplicativos da web leiam de forma assíncrona o conteúdo de arquivos (ou buffers de dados brutos) armazenados no computador do usuário, usando `File` ou `Blob` objetos para especificar o arquivo ou dados a serem lidos.

Objetos de arquivo podem ser obtidos de um objeto `FileList` retornado como resultado de um usuário selecionar arquivos usando o elemento `<input>` ou de uma operação de arrastar e soltar `DataTransfer` objeto.

O `FileReader` só pode acessar o conteúdo dos arquivos que o usuário selecionou explicitamente, usando um elemento HTML `<input type="file">` ou arrastando e soltando. Ele não pode ser usado para ler um arquivo por nome de caminho do sistema de arquivos do usuário. Para ler arquivos no sistema de arquivos do cliente por nome de caminho, use a API de acesso ao sistema de arquivos (en-US). Para ler arquivos do lado do servidor, use soluções Ajax padrão, com permissão CORS se estiver lendo entre domínios.

**Note:** This feature is available in Web Workers

EventTarget

FileReaderConstrutor
----------

`FileReader()`

Retorna um `FileReader` recém-construído.

Consulte Usando arquivos de aplicativos da Web (en-US) para obter detalhes e exemplos.

Propriedades da instância
-------------------------

`FileReader.error` (en-US) Somente leitura

Um `DOMException` (en-US) representando o erro que ocorreu durante a leitura do arquivo.

`FileReader.readyState` (en-US) Somente leitura

Um número que indica o estado do `FileReader`. Este é um dos seguintes:

| Nome | Valor | Descrição |
| --- | --- | --- |
| `EMPTY` | `0` | Nenhum dado foi carregado ainda. |
| `LOADING` | `1` | Os dados estão sendo carregados no momento. |
| 'DONE' | `2` | Toda a solicitação de leitura foi concluída. |

`FileReader.result` (en-US) Somente leitura

o conteúdo do arquivo. Esta propriedade só é válida após a conclusão da operação de leitura, e o formato dos dados depende de qual dos métodos foi utilizado para iniciar a operação de leitura.

Métodos de instância
--------------------

`FileReader.abort()` (en-US)

Aborta a operação de leitura. Ao retornar, o `readyState` será `DONE`.

`FileReader.readAsArrayBuffer()`

Inicia a leitura do conteúdo do `Blob` especificado, uma vez finalizado, o atributo `result` contém um `ArrayBuffer` representando os dados do arquivo.

`FileReader.readAsBinaryString()`

Inicia a leitura do conteúdo do `Blob` especificado, uma vez concluído, o atributo `result` contém os dados binários brutos do arquivo como uma string.

`FileReader.readAsDataURL()`

Inicia a leitura do conteúdo do `Blob` especificado, uma vez finalizado, o atributo `result` contém uma URL `data:` representando os dados do arquivo.

`FileReader.readAsText()`

Inicia a leitura do conteúdo do `Blob` especificado, uma vez terminado, o atributo `result` contém o conteúdo do arquivo como uma string de texto. Um nome de codificação opcional pode ser especificado.

Eventos
-------

Ouça esses eventos usando `addEventListener()` ou atribuindo um ouvinte de eventos à propriedade `oneventname` desta interface. Remova os ouvintes de eventos com `removeEventListener()`, uma vez que `FileReader` não seja mais usado, para evitar vazamentos de memória.

`abort` (en-US)

Acionado quando uma leitura foi abortada, por exemplo, porque o programa chamou `FileReader.abort()` (en-US).

`error` (en-US)

Acionado quando a leitura falhou devido a um erro.

`load`

Disparado quando uma leitura foi concluída com sucesso.

`loadend` (en-US)

Acionado quando uma leitura foi concluída, com sucesso ou não.

`loadstart` (en-US)

Disparado quando uma leitura é iniciada.

`progress` (en-US)

Acionado periodicamente à medida que os dados são lidos.

Especificações
--------------

| Specification |
| --- |
| File API # APIASynch |

Compatibilidade do navegador
----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Usando arquivos de aplicativos da web (en-US)
* `File`
* `Blob`
* `FileReaderSync` (en-US){ APIRef("File API")}}
Resumo
------

O objeto `FileReader` permite aplicações web ler assincronamente o conteúdo dos arquivos (ou buffers de dados puros) do computador do usuário, utilizando o objeto `File` ou `Blob` para especificar o arquivo ou os dados a serem lidos.

Objetos File podem ser obtidos a partir de um objeto `FileList` retornado como resultado da seleção de um usuário utilizando um elemento `<input>`, a partir de uma operação de drag and drop `DataTransfer`, ou a partir de um `mozGetAsFile()` da api `HTMLCanvasElement` (en-US).

Construtor
----------
```

FileReader FileReader();
```

Veja Using files from web applications para detalhes e exemplos.

Propriedades
------------

`FileReader.error` (en-US) Somente leitura

Um `DOMError` (en-US) representa o erro que ocorreu durante a leitura do arquivo.

`FileReader.readyState` (en-US) Somente leitura

Um número indicando o estado do `FileReader`. Este poderá ser um dos seguintes estados State constants.

`FileReader.result` (en-US) Somente leitura

O conteúdo do arquivo. Esta propriedade é válida apenas após a operação de leitura estar completa, e o formato dos dados dependem de qual método foi usado para iniciar a operação de leitura.

### Manipuladores de eventos

`FileReader.onabort` (en-US)

Um manipulador para o evento `abort (en-US)`. Este evento é chamado cada vez que a operação de leitura é abortada.

`FileReader.onerror` (en-US)

Um manipulador para o evento `error (en-US)`. Este evento é chamado cada vez que a operação de leitura encontra um erro.

`FileReader.onload`

Um manipulador para o evento `load (en-US)`. Este evento é chamado cada vez que a operação de leitura é completada com sucesso.

`FileReader.onloadstart`

Um manipulador para o evento `loadstart (en-US)`. Este evento é chamado cada vez que a leitura começa.

`FileReader.onloadend`

Um manipulador para o evento `loadend (en-US)`. Este evento é chamado cada vez que a operação de leitura é completada (tanto em caso de sucesso quanto de erro).

`FileReader.onprogress`

Um manipulador para o evento `progress (en-US)`. Este evento é chamado durante a leitura do conteúdo de `Blob`.

**Nota:** Nota: O `FileReader` herda de `EventTarget`, todos estes eventos podem ser listados usando o método `addEventListener`.

### Constantes de estado

* `EMPTY`: `0` : Nenhum dado foi carregado ainda.
* `LOADING`: `1` : Os dados estão sendo carregados.
* `DONE`: `2` : Toda a requisição de leitura foi completada.
Métodos
-------

`FileReader.abort()` (en-US)

Aborta a operação de leitura. O retorno, no `readyState` será `DONE`.

`FileReader.readAsArrayBuffer()`

Inicia a leitura do conteúdo do `Blob` espeficado, uma vez finalizado, o atributo `result` conterá um `ArrayBuffer` representando os dados do arquivo.

`FileReader.readAsBinaryString()`

Inicia a leitura do conteúdo do `Blob` especificado, uma vez finalizado, o atributo `result` conterá os dados raw binários do arquivo como string.

`FileReader.readAsDataURL()`

Inicia a leitura do conteúdo do `Blob` especificado, uma vez finalizado, o atributo `result` conterá um `data:` URL representando os dados do arquivo.

`FileReader.readAsText()`

Inicia a leitura do conteúdo do `Blob` especificado, uma vez finalizado, o atributo `result` conterá o conteúdo do arquivo como string de texto.

Especificações
--------------

| Specification |
| --- |
| File API # APIASynch |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Using files from web applications
* `File`
* `Blob`


BiquadFilterNode - APIs da Web

BiquadFilterNode
================

A interface `BiquadFilterNode` representa um filtro simples de ordem baixa, e é criada utilizando o método `AudioContext.createBiquadFilter()` (en-US) . É o `AudioNode` que pode representar diferentes tipos de filtros, dispositivo de controle de timbre, e equalizadores gráficos. Um `BiquadFilterNode` sempre tem exatamente uma entrada e uma saída.

|  |  |
| --- | --- |
| Número de entradas | `1` |
| Número de saídas | `1` |
| Modo de contagem de canal | `"max"` |
| Contagem de canal | `2` (não utilizado no modo de contagem padrão) |
| Interpretação de canal | `"speakers"` |

Construtor
----------

`BiquadFilterNode()` (en-US)

Cria uma nova instância de um objeto do tipo `BiquadFilterNode`.

Propriedades
------------

*Herda as propriedades de seu pai,* *`AudioNode`*.

`BiquadFilterNode.frequency` (en-US)

É um a-rate (en-US) `AudioParam` (en-US), um double que representa a frequência no algoritmo de filtragem atual, medido em hertz (Hz).

`BiquadFilterNode.detune` (en-US)

É um a-rate (en-US) `AudioParam` (en-US) representando a dessintonização da frequência em cents.

`BiquadFilterNode.Q` (en-US)

É um a-rate (en-US) `AudioParam` (en-US), um double representando um Q factor, ou *fator de qualidade*.

`BiquadFilterNode.gain` (en-US) Somente leitura

É um a-rate (en-US) `AudioParam` (en-US), um double representando o gain utilizado no algoritmo de filtragem atual.

`BiquadFilterNode.type` (en-US)

É um valor string que define o tipo de algoritmo de filtragem que o nó está implementando.

| `tipo` | Descrição | `frequência` | `Q` | `ganho` |
| --- | --- | --- | --- | --- |
| `lowpass` | Filtro de resonância lowpass padrão de segunda ordem com 12dB/octave rolloff. Frequências abaixo do ponto de corte passam; frequências acima são atenuadas. | A frequência de corte. | Indica o quão perto a frequência chegou em relação ao ponto de corte. Quantomaior o valor, maior será a aproximação. | *Não utilizado* |
| `highpass` | Filtro de resonância highpass padrão de segunda ordem com 12dB/octave rolloff. Frequências abaixo do ponto de corte são atenuadas; frequências acima passam. | A frequência de corte. | Indica o quão perto a frequência chegou em relação ao ponto de corte. Quantomaior o valor, maior será a aproximação. | *Não utilizado* |
| `bandpass` | Filtro bandpass padrão de segunda ordem. Frequências fora do dado limite de frequências são atenuadas; frequências dentro do limite passam. | O centro de alcance de frequências. | Controla a largura da banda de frequência. Quanto maior o valor `Q`, menor a frequência de banda. | *Não utilizado* |
| `lowshelf` | Filtro lowshelf padrão de segunda ordem. Frequências menores que a frequência recebem um aumento, ou uma atenuação; frequências maiores não sofrem alterações. | O limite superior das frequênicas recebe um aumento ou atenuação. | *Não utilizado* | O aumento, em dB, para ser aplicado; se negativo, ele será uma atenuação. |
| `highshelf` | Filtro highshelf padrão de segunda ordem. Frequências maiores que a frequência recebem aumento ou atenuação; frequências abaixo disso não sofrem alterações. | O limite inferior de frequências recebe aumento ou uma atenuação. | *Não utilizado* | O aumento, em dB, para ser aplicado; se negativo, ele será uma atenuação. |
| `peaking` | Frequências dentro da faixa de frequencias recebem aumento ou atenuação; frequências fora da faixa não sofrem alterações. | O meio da faixa de frequência recebe um aumento ou uma atenuação. | Controla a largura da banda de frequência. Quanto maior o valor `Q`, menor a frequência de banda. | O aumento, em dB, para ser aplicado; se negativo, ele será uma atenuação. |
| `notch` | Filtro notch padrão, também chamado de filtro *band-stop* ou *band-rejection*. É o oposto do filtro de de bandpass: frequências fora da faixa de frequências atribuída passam; frequências de dentro da faixa são atenuadas. | O centro de alcance de frequências. | Controla a largura da banda de frequência. Quanto maior o valor `Q`, menor a frequência de banda. | *Não utilizado* |
| `allpass` | Filtro allpass padrão de segunda ordem. Permite que todas as frequências passem, porém altera a relação de fase entre as diversas frequências. | A frequência com o máximo group delay, ou seja, a frequência onde o centro da fase de transição ocorre. | Controla o quão apurada a transição é na frequência média. Quanto maior este parâmetro, mais apurada e ampla será a transição | *Não utilizado* |

Métodos
-------

*Herda os métodos de seu pai,* *`AudioNode`*.

`BiquadFilterNode.getFrequencyResponse()` (en-US)

A partir dos parâmetros de configuração do filtro atual, este método calcula a frequência de resposta para frequências especificadas no array de frequências.

Exemplo
-------

{{page("/pt-BR/docs/Web/API/AudioContext.createBiquadFilter","Example")}}Especificações
--------------

| Specification |
| --- |
| Web Audio API # BiquadFilterNode |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Utilizando a Web Audio API (en-US)


Worker - APIs da Web

Worker
======

A interface **Worker** da API do Web Worker representa uma tarefa em background (segundo plano) que pode ser facilmente criada e emitir mensagens de volta ao seu criador. Criar um worker é possível chamando o construtor `Worker("path/to/worker/script")` e especificando um script para ser executado em sua própria thread.

Um worker pode, por sua vez, gerar outros workers, contanto que estes estejam hospedados na mesma origem (en-US) da página principal (Nota: workers aninhados não estão atualmente implementados no Blink). Além disso, workers podem utilizar XMLHttpRequest para E/S de rede, desde que seja estipulado que os atributos `responseXML` e `channel` em `XMLHttpRequest` retornem sempre `null`.

Não são todas as interfaces e funções que estão disponíveis para o script associado a um `Worker`.

**Nota:** No Firefox, se você deseja utilizar workers em extensões e gostaria de ter acesso a js-ctypes, você deveria utilizar o objeto `ChromeWorker` .

Construtores
------------

`Worker()` (en-US)

Cria um worker dedicado da web que executa o script especificado na URL. Workers também podem ser construídos usando Blobs.

Propriedades
------------

*Herda as propriedades do pai, `EventTarget`, e implementa as propriedades que compõem o `AbstractWorker` (en-US).*

### Manipuladores de Eventos

`AbstractWorker.onerror` (en-US)

Um `EventListener` é chamado sempre quando um `ErrorEvent` (en-US) do tipo `error` é passado através do worker. Este é herdado pelo `AbstractWorker` (en-US).

`Worker.onmessage` (en-US)

Um `EventListener` é chamado sempre quando um `MessageEvent` (en-US) do tipo `message` é passado através do worker — ou seja, quando uma mensagem é enviada para o documento pai do worker via `DedicatedWorkerGlobalScope.postMessage` (en-US). A mensagem é armazenada na propriedade de dados do evento `data` (en-US).

Métodos
-------

*Os métodos são herdados de seu pai. `EventTarget`, e implementa os métodos de `AbstractWorker` (en-US).*

`Worker.postMessage()` (en-US)

Envia uma mensagem — qual pode consistir de qualquer objeto do JavaScript — para o escopo interno do worker.

`Worker.terminate()` (en-US)

Imediatamente encerra o worker. Isso não oferece ao worker a oportunidade de concluir suas operações; imediatamente o interrompe. `ServiceWorker` não suportam esse método.

Eventos
-------

`message` (en-US)

 O evento é disparado quando o script pai do worker recebe uma mensagem do mesmo.
 Também é disponibilizado via `onmessage.`

`messageerror` (en-US)

 Dispara quando um Worker recebe uma mensagem que não pode ser deserializada (en-US)
 Também é disponibilizado via `onmessageerror.`

`rejectionhandled` (en-US)

 Dispara sempre que um `Promise` é rejeitado, indenpendentemente de haver ou não um manipulador para capturar sua rejeição.
 Também é disponibilizado via `onrejectionhandled.`

`unhandledrejection` (en-US)

Dispara sempre que um `Promise` rejeita, independentemente de haver ou não um manipulador para capturar a rejeição. Também disponível por meio da propriedade do manipulador de eventos `onunhandledrejection.`

Exemplos
--------

The following code snippet shows creation of a `Worker` object using the `Worker()` (en-US) constructor and usage of the object:

```js
var myWorker = new Worker("worker.js");
var first = document.querySelector("#number1");
var second = document.querySelector("input#number2");

first.onchange = function () {
  myWorker.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};
```

For a full example, see ourBasic dedicated worker example (run dedicated worker).

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dedicated-workers-and-the-worker-interface |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using web workers
* Functions available to workers
* Other kind of workers: `SharedWorker` (en-US) and ServiceWorker (en-US).
* Non-standard, Gecko-specific workers: `ChromeWorker`, used by extensions.


Battery Status API - APIs da Web

Battery Status API
==================

A **API Battery Status**, mais conhecida como **Battery API**, fornece informações sobre o nível de carga da bateria presente no sistema e permite que você seja notificado por eventos que são enviados quando os níveis sofrem alterações. Isto pode ser usado para ajustar a utilização de recursos do seu aplicativo, reduzindo a quantidade de energia drenada por ele quando a bateria estiver em nível baixo, ou ainda para salvar mudanças antes da bateria acabar, prevenindo a perda de dados.

A API Battery Status API estende `Window.navigator` com uma propriedade `Navigator.battery` que é um objeto `BatteryManager`, e adiciona alguns novos eventos que você pode receber para monitorar o status da bateria.

Exemplo
-------

Neste exemplo, nós observamos as mudanças em ambos os status de carregamento (se estamos ou não conectados e carregando) e para mudanças no nível da bateria. Isto é feito escutando pelos eventos `chargingchange` e `levelchange`, respectivamente.

```js
var battery =
  navigator.battery || navigator.mozBattery || navigator.webkitBattery;

function updateBatteryStatus() {
  console.log("Status da bateria: " + battery.level \* 100 + " %");

  if (battery.charging) {
    console.log("A bateria está carregando");
  }
}

battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("levelchange", updateBatteryStatus);
updateBatteryStatus();
```

Veja também o exemplo na especificação.

Especificações
--------------

| Specification |
| --- |
| Battery Status API  |

Compatibilidade com navegadores
-------------------------------

### api.BatteryManager

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.Navigator.getBattery

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Hacks blog post - Usando a API Battery API (em inglês)
* `BatteryManager`
* `navigator.battery`


CloseEvent - APIs da Web

CloseEvent
==========

Um `CloseEvent` é enviado aos clientes que usam WebSockets quando a conexão está fechada (closed). Ele é enviado ao ouvinte(listener) pelo atributo `onclose` do objeto `WebSocket`.

Construtor
----------

`CloseEvent()`

Cria um `CloseEvent` novo.

Propriedades
------------

*Esta interface também herda as propriedades de seu objeto pai, `Event`.*

`CloseEvent.code` (en-US) Somente leitura

Retorna um valor `unsigned short` contendo o código de encerramento enviado pelo servidor. Os seguintes valores são status de códigos permitidos. As definições seguintes são originadas da página da IANA [Ref]. Observe que os códigos 1xxx são exclusivamente Websockets internos e não para os mesmos propósitos dos dados enviados (como quando o protocolo da camada de aplicação é invalido). Os únicos códigos que permitem especificação no Firefox são o 1000 e do 3000 ao 4999 [Source, Bug].

| Código de Status | Nome | Descrição |
| --- | --- | --- |
| `0`–`999` |  | **Reservado e não utilizado.** |
| `1000` | `CLOSE_NORMAL` | Encerramento normal. A conexão foi completada com sucesso sempre que o propósito para o qual ela foi criada tenha sido atingida. |
| `1001` | `CLOSE_GOING_AWAY` | O "endpoint" desapareceu, por causa de uma falha no servidor ou por que o navegador navegou para fora da página que abriu a conexão. |
| `1002` | `CLOSE_PROTOCOL_ERROR` | O "endpoint" finalizou a conexão devido a um erro de protocolo. |
| `1003` | `CLOSE_UNSUPPORTED` | A conexão está sendo finalizada por causa de o dado do "endpoint" recebido ser de um tipo que não pode ser aceito (por exemplo, um "text-only endpoint" recebido como dado binário). |
| `1004` |  | **Reservado.** Um significado pode ser definido futuramente. |
| `1005` | `CLOSE_NO_STATUS` | **Reservado.** Indica que um código "no status" foi fornecido mesmo que qualquer outro código seja esperado. |
| `1006` | `CLOSE_ABNORMAL` | **Reservado.** Usado para indicar que uma conexão foi fechada anormalmente (isto é, sem o "close frame" ter sido enviado) quando um "status code" é esperado. |
| `1007` | Unsupported Data | O "endpoint" está finalizando a conexão por causa da mensagem ter sido recebida com dados inconsistentes (por exemplo, dados que não estejam no padrão UTF-8, dentro de uma mensagem de texto). |
| `1008` | Policy Violation | O "endpoint" está finalizando a conexão por causa dele ter recebido uma mensagem que viola sua política. Este é um código de status genérico, usado quando o código 1003 e o código 1009 não sejam adequados. |
| `1009` | `CLOSE_TOO_LARGE` | O "endpoint" está finalizando a conexão por causa de que o "data frame" recebido é muito grande. |
| `1010` | Missing Extension | O cliente está fechando a conexão por causa de que navegador espera o servidor negociar uma ou mais extensões esperadas, o servidor não responde corretamente. |
| `1011` | Internal Error | O servidor está finalizando uma conexão por causa de que ele encontrou uma condição inesperada que o impediu de cumprir a solicitação. |
| `1012` | Service Restart | O servidor está finalizando uma conexão por que ele está em processo de "restar". [Ref] |
| `1013` | Try Again Later | O servidor está finalizando a conexão devido a uma condição temporária, por exemplo, ele estar sobrecarregado e estar rejeitando alguns dos seus clientes. [Ref] |
| `1014` |  | **Reservado para o futuro uso de um padrão WebSocket.** |
| `1015` | TLS Handshake | **Reservado.** Indica que a conexão foi fechada devido a uma falha para executar um " TLS handshake" (por exemplo, o certificado do servidor não pode ser verificado). |
| `1016`–`1999` |  | **Reservado para o futuro uso de um padrão WebSocket.** |
| `2000`–`2999` |  | **Reservado para uso de "WebSocket extensions".** |
| `3000`–`3999` |  | Disponível para uso de bibliotecas e frameworks. **Não pode** ser usado para aplicações. Disponível para registro em "IANA via first-come, first-serve". |
| `4000`–`4999` |  | Disponível para uso em aplicações. |

`CloseEvent.reason` (en-US) Somente leitura

Retorna um `DOMString` indicando a razão do porquê o servidor fechou uma conexão. Isto é especifico para um servidor e sub-protocolo particular.

`CloseEvent.wasClean` (en-US) Somente leitura

Retorna um `Boolean` indicando se a conexão está ou não está claramente fechada.

Métodos
-------

*Esta interface também herda as propriedades de seu objeto pai,* *`Event`.*

`CloseEvent.initCloseEvent()` (en-US)
Non-standard

Inicializa o valor de um `CloseEvent` criado. Se o evento já tenha sido enviado, este método não realiza nada. Não use este método mais, use o construtor `CloseEvent()` em vez disso.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `WebSocket`


Canvas - APIs da Web

Canvas
======

A **Canvas API** provê maneiras de desenhar gráficos via JavaScript e via elemento HTML `<canvas>`. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento `<canvas>`, desenha gráficos 2D e 3D acelerados por hardware.

Exemplo básico
--------------

Este exemplo simples desenha um retângulo verde para um canvas.

### HTML

```html
<canvas id="canvas"></canvas>
```

### JavaScript

O método `Document.getElementById()` pega uma referência para o elemento HTML `<canvas>`. Em seguida, o método `HTMLCanvasElement.getContext()` pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

O desenho atual é feito usando a interface `CanvasRenderingContext2D`. A propriedade `fillStyle` faz o retângulo verde. O método `fillRect()` coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
```

### Resultado

Referência
----------

* `HTMLCanvasElement` (en-US)
* `CanvasRenderingContext2D`
* `CanvasGradient` (en-US)
* `CanvasImageSource` (en-US)
* `CanvasPattern` (en-US)
* `ImageBitmap` (en-US)
* `ImageData` (en-US)
* `RenderingContext`
* `TextMetrics` (en-US)
* `OffscreenCanvas` (en-US)
Experimental
* `Path2D`
Experimental
* `ImageBitmapRenderingContext` (en-US)
Experimental

**Nota:** As interfaces relacionadas ao `WebGLRenderingContext` são referenciadas sob WebGL.

`CanvasCaptureMediaStream` (en-US) é uma interface relacionada.

Guias e Tutoriais
-----------------

Tutorial Canvas

Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.

Mergulhando no Canvas HTML5

Uma introdução prática e extensa à API Canvas e WebGL.

Guia Canvas

Uma referência acessível para a API Canvas.

Demonstração: Um *ray-caster* básico

Uma demonstração de animação *ray-tracing* usando canvas.

Manipulando vídeos usando canvas (en-US)

Combinando `<video>` e `<canvas>` para manipular dados de vídeo em tempo real.

Bibliotecas
-----------

A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.

* EaselJS é uma biblioteca de código aberto que facilita criações de jogos, arte generativa e outras experiências altamente gráficas.
* Fabric.js é uma biblioteca código aberto em canvas com suporte à SVG.
* heatmap.js é uma biblioteca de código aberto para criar mapas de calor (heatmaps) baseados em canvas.
* JavaScript InfoVis Toolkit cria visualizações de dados interativas.
* Konva.js é uma biblioteca de canvas 2D para aplicações *desktop* e móveis.
* p5.js tem um conjunto completo de funcionalidades de desenho canvas para artistas, *designers*, educadores e iniciantes.
* Paper.js é um framework de código-aberto para scripting de vetores gŕaficos que funciona sobre o Canvas HTML5.
* Phaser é um framework de código-aberto rápido, grátis e divertido para jogos de navegador desenvolvidos com Canvas e WebGL.
* Processing.js é um conversor da linguagem de visualização Processing.
* Pts.js é uma biblioteca para codificação criativa e visualização em canvas e SVG.
* Rekapi é uma API de animação *key-framing* para Canvas.
* Scrawl-canvas é uma biblioteca JavaScript de código aberto para criação e manipulação de elementos canvas 2D.
* O framework ZIM provê conveniências, componentes e controles para programar criatividade no canvas - inclui acessibilidade e centenas de tutoriais cheios de cores.

**Nota:** Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-canvas-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver também
----------

* WebGL


Page Visibility API - APIs da Web

Page Visibility API
===================

A **API de visibilidade de página** deixa você saber quando uma página da web está visível ou em foco. Com a navegação em abas, existem razões para que quaisquer páginas da web que estejam sendo executadas em segundo plano e não visíveis para o usuário. Quando o usuário minimiza a página ou muda para outra aba, a API envia um evento `visibilitychange (en-US)` informando o estado de visibilidade da página. Você pode detectar o evento e realizar algumas ações ou modificar o seu comportamento. Por exemplo, se a sua aplicação web estiver reproduzindo um video, ela pode pausar durante o momento que o usuário estiver olhando para outra aba, e reproduz novamente quando o usuário retorna para a aba. O usuário não perde nenhuma parte do video e pode continuar assistindo.

### Benefícios

A API é particularmente util para economizar recursos dando aos desenvolvedores a oportunidade de não realizar tarefas desnecessárias quando a página não está visível.

### Casos de uso

Alguns exemplos:

* Um site tem um carrossel de imagens que não devem avançar para o próximo slide a não ser que o usuário esteja visualizando a página.
* Uma aplicação mostrando um painel de informações não quer fazer requizições de atualizações ao servidor quando a página não estiver visível.
* Uma página quer detectar quando está sendo prerenderizada para poder contar o número de visualizações de forma mais precisa.

Desenvolvedores têm historicamente usado alternativas de se detectar isto. Por exemplo, registrando um handler onblur/onfocus na janela te ajuda a saber quando a sua página não é a ativa, mas isto não te diz se a sua página não está visível para o usuário. Já a API de Visibilidade de Página faz isto. (Quando comparada com a técnica de registrar handlers de onblur/onfocus na janela, uma diferencia chave é que a página *não* fica escondida quando outra janela é ativada e a janela do navegador perde o foco. A página só fica escondida quando o usuário troca para uma aba diferente ou minimiza a janela do navegador.)

Exemplo
-------

Veja exemplo em caso real (video com som).

O exemplo, que pausa o video quando você troca para outra aba e volta a reproduzir quando você retorna, foi criado com o seguinte código:

```js
// Configura o nome da propriedade hidden e o evento de mudança para visibilidade
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
  // Suporte para Opera 12.10 e Firefox 18 em diante
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

var videoElement = document.getElementById("videoElement");

// Se a página está escondida, pausa o video;
// Se a página está visível, reproduz o video
function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// Alerta se o navegador não suporta addEventListener ou a API de visibilidade da página
if (
  typeof document.addEventListener === "undefined" ||
  typeof document[hidden] === "undefined"
) {
  alert(
    "This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.",
  );
} else {
  // Manipula o evento de mudança da visibilidade da página
  document.addEventListener(visibilityChange, handleVisibilityChange, false);

  // Reverte para o favicon existente para o site quando a página é fechada;
  // caso contrário, o favicon continua como paused.png
  window.addEventListener(
    "unload",
    function () {
      favicon.change("/favicon.ico");
    },
    false,
  );

  // Quando o video é pausado, configura o favicon.
  // Isso mostra a imagem paused.png
  videoElement.addEventListener(
    "pause",
    function () {
      favicon.change("images/paused.png");
    },
    false,
  );

  // Quando o video é reproduzido, configura o favicon.
  videoElement.addEventListener(
    "play",
    function () {
      favicon.change("images/playing.png");
    },
    false,
  );

  // Configura o título da aba com o tempo atual do video
  videoElement.addEventListener(
    "timeupdate",
    function () {
      document.title = Math.floor(videoElement.currentTime) + " segundo(s)";
    },
    false,
  );
}
```

Visão geral das propriedades
----------------------------

### `document.hidden` Somented leitura

Retorna `true` se a página está escondida para o usuário, caso contrário, retorna `false`.

### `document.visibilityState` Somente leitura

É a `cadeia de caracteres que denota a visibilidade do documento`. Possíveis valores:

* `visible` : o conteúdo da página pode estar parcialmente visível. Na prática, isso significa que a página é a aba ativa de uma janela não minimizada.
* `hidden` : o conteúdo da página não está visível para o usuário. Na prática, isso significa que o documento está em uma aba inativa, em uma janela minimizada, ou o sistema operacional está com a tela travada.
* `prerender` : o conteúdo da página está sendo prerenderizado e não está visível para o usuário(considerado como escondida para motivos de `document.hidden`). O documento pode começar neste estado, mas nunca mudar dele para algum outro. Nota: a compatibilidade com navegadores é opcional.
* `unloaded` : a página está sendo removida da memória(a aba ou janela está sendo fechada). Nota: a compatibilidade com navegadores é opcional

```js
//startSimulation e pauseSimulation definidas em outro lugar
function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else {
    startSimulation();
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);
```

Nota
----

Os estados de visibilidade de `<iframe>` são os mesmos do documento pai. Esconder o iframe com propriedades CSS não ativa os eventos de visibilidade nem muda o estado do documento do conteúdo.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-document-visibilitystate |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Descrição da API de Visibilidade de Página do IEBlog.
* Descrição da API de visibilidade de Página do Google


Window.crypto - APIs da Web

Window.crypto
=============

`Window.crypto` propriedade somente de leitura, devolve um objeto do tipo `Crypto` associado ao objeto global. Este objeto permite que páginas da web utilizem recursos de criptografia.

Sintaxe
-------
```

var cryptoObj = window.crypto || window.msCrypto; // for IE 11
```

Exemplo
-------

#### Usando a propriedade `Window.crypto` para acessar o método getRandomValues()

### JavaScript

```js
genRandomNumbers = function getRandomNumbers() {
  var array = new Uint32Array(10);
  window.crypto.getRandomValues(array);

  var randText = document.getElementById("myRandText");
  randText.innerHTML = "The random numbers are: ";
  for (var i = 0; i < array.length; i++) {
    randText.innerHTML += array[i] + " ";
  }
};
```

### HTML

```html
<p id="myRandText">The random numbers are:</p>
<button type="button" onClick="genRandomNumbers()">
  Generate 10 random numbers
</button>
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| Web Cryptography API # dom-windoworworkerglobalscope-crypto |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* O objeto global `Window`


DOMStringMap - APIs da Web

DOMStringMap
============

Usado pelo atributo HTML `dataset` para representar atributos próprios adicionados ao elemento.

Visão Geral do Método
---------------------

| `DOMString getDataAttr(in DOMString prop);` |
| --- |
| `boolean hasDataAttr(in DOMString prop);` |
| `void removeDataAttr(in DOMString prop);` |
| `void removeProp(in nsIAtom attr);` |
| `void setDataAttr(in DOMString prop, in DOMString value);` |

Métodos
-------

### hasDataAttr()
```

boolean hasDataAttr(
  in DOMString prop
);
```

###### Parâmetros

`prop`

Nome da propriedade a qual a existência deve ser verificada.

###### Retorno

`true` se a propriedade existir ou `false` se não existir.

### removeDataAttr()
```

void removeDataAttr(
  in DOMString prop
);
```

###### Parâmetros

`prop`

Propriedade a ser removida do data set.

### removeProp()

Remove a propriedade do dataset do objeto. Usada para atualizar o objeto de dataset do objeto quando o atributo data-\* houver sido removido do elemento.
```

void removeProp(
  in nsIAtom attr
);
```

###### Parâmetros

`attr`

A propriedade a ser removida do dataset.

Compatibilidade
---------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `HTMLElement.dataset` (en-US)
* `dataset`


MutationObserver - APIs da Web

MutationObserver
================

MutationObserver fornece aos desenvolvedores uma maneira de reagir a mudanças em um DOM (en-US). Ele é concebido como um substituto para Mutation Events definido na especificação de eventos DOM nível 3.

Constructor
-----------

### `MutationObserver()`

Construtor para instanciar novos observadores de mutação do DOM.
```

MutationObserver(
  function callback
);
```

###### Parâmetros

`callback`

A função que será chamada em cada mutação do DOM. O observador irá chamar esta função com dois argumentos. O primeiro é um array de objetos, cada um do tipo `MutationRecord`. O segundo é a essa instância MutationObserver.

Métodos da instância
--------------------

| `void observe( `Node` target, MutationObserverInit options );` |
| --- |
| `void disconnect();` |
| `Array takeRecords();` |

### `observe()`

Registra a instância MutationObserver para receber notificações das mutações do DOM no nó especificado.
```

void observe(
  `Node` target,
  MutationObserverInit options
);
```

###### Parâmetros

`target`

O `Node` no qual é observadas as mutações do DOM.

`options`

Um objeto `MutationObserverInit` especifica quais mutações DOM devem ser reportadas.

**Nota:** NOTA: Adicionar um observador para um elemento é como utilizar o addEventListener, se você observar o elemento várias vezes não faz diferença. Ou seja, se você observar um elemento duas vezes, o callback do observador não disparará duas vezes, nem você deverá executar duas vezes o disconnect(). Em outras palavras, uma vez que um elemento é observado, observá-lo novamento com a mesma instância do observador não fará nada. No entanto, se o objeto callback for diferente, ele, é claro, adicionará outro observador para isso.

### `disconnect()`

Pára o rebimento de notificações das mutações do DOM na instância `MutationObserver`. O callback do observador não será invocado até que método `observe()` seja novamente utilizado.
```

void disconnect();
```

### `takeRecords()`

Esvazia a fila de registro da instância `MutationObserver` e retorna o que estava nela.
```

Array takeRecords();
```

###### Valor de retorno

Retorna um Array de `MutationRecord`s.

`MutationObserverInit`
----------------------

`MutationObserverInit` é um objeto que pode especificar as seguintes propriedades:

**Nota:** NOTA: No mínimo `childList`, `attributes`, ou `characterData` devem ser definidos como `true`. Caso contrário o erro "An invalid or illegal string was specified" é lançado.

| Property | Description |
| --- | --- |
| `childList` | Defina como `true` se adições e remoções dos elementos filho do nó alvo (incluindo nós de texto) devem ser observadas. |
| `attributes` | Defina como `true` se mutações dos atributos do alvo devem ser observadas. |
| `characterData` | Defina como `true` se mutações dos dados do alvo devem ser observadas. |
| `subtree` | Defina como `true` se mutações não apenas do alvo, mas também dos descendentes do alvo devem ser observadas. |
| `attributeOldValue` | Defina como `true` se `attributes` é definido como `true` e o valor do atributo do alvo antes da mutação precisa ser gravado. |
| `characterDataOldValue` | Defina como `true` se `characterData` é definido como `true` e os dados do alvo antes da mutação precisam ser gravados. |
| `attributeFilter` | Defina como um array de nomes locais de atributo (sem namespace) se nem todas mutações de atributo precisam ser observadas. |

`MutationRecord`
----------------

`MutationRecord` é um objeto que será passado para o callback do observador. Tem as seguintes propriedades:

| Property | Type | Description |
| --- | --- | --- |
| `type` | `String` | Retorna `attributes` se a mutação foi a de um atributo, `characterData` se foi de um nó `CharacterData`, e `childList` se foi a mutação para uma árvore de nós. |
| `target` | ``Node`` | Retorna o nó que a mutação afetou, dependendo do `type`. Para `attributes`é o elemento cujo atributo mudou. Para `characterData` é o nó `CharacterData`. Para `childList` é o nó cujos filhos mudaram. |
| `addedNodes` | ``NodeList`` | Retorna os nós adicionados. Será uma NodeList vazia se nenhum nó foi adicionado. |
| `removedNodes` | ``NodeList`` | Retorna os nós removidos. Será uma NodeList vazia se nenhum nó foi removido. |
| `previousSibling` | ``Node`` | Retorna o irmão anterior dos nós adicionados ou removidos, ou `null`. |
| `nextSibling` | ``Node`` | Retorna o próximo irmão dos nós adicionados ou removidos, ou `null`. |
| `attributeName` | `String` | Retorna o nome local do atributo modificado, ou `null`. |
| `attributeNamespace` | `String` | Retorna o namespace do atributo modificado, ou `null`. |
| `oldValue` | `String` | O valor retornado depende do `type`. Para `attributes`, é o valor do atributo modificado antes da troca. Para `characterData`, são os dados do nó modificado antes da troca. Para `childList` é `null`. |

Exemplo de uso
--------------

O exemplo a seguir foi retirado deste post.

```js
// seleciona o nó alvo
var target = document.querySelector("#some-id");

// cria uma nova instância de observador
var observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    console.log(mutation.type);
  });
});

// configuração do observador:
var config = { attributes: true, childList: true, characterData: true };

// passar o nó alvo, bem como as opções de observação
observer.observe(target, config);

// mais tarde você pode parar de observar
observer.disconnect();
```

Leitura adicional
-----------------

* A brief overview
* A more in-depth discussion
* A screencast by Chromium developer Rafael Weinstein
* The mutation summary library
* The DOM standard que define a interface do `MutationObserver`
Especificações
--------------

| Specification |
| --- |
| DOM Standard # interface-mutationobserver |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Event - APIs da Web

Event
=====

A interface de **eventos** representa qualquer evento de DOM. Ele contém propriedades comuns e métodos para qualquer evento.

Um monte de outras interfaces herdam, diretamente ou não, a partir desta interface base:

* `AnimationEvent`
* `AudioProcessingEvent` (en-US)
* `BeforeInputEvent`
* `BeforeUnloadEvent` (en-US)
* `BlobEvent` (en-US)
* `ClipboardEvent`
* `CloseEvent`
* `CompositionEvent` (en-US)
* `CSSFontFaceLoadEvent`
* `CustomEvent` (en-US)
* `DeviceLightEvent`
* `DeviceMotionEvent` (en-US)
* `DeviceOrientationEvent` (en-US)
* `DeviceProximityEvent`
* `DOMTransactionEvent`
* `DragEvent` (en-US)
* `EditingBeforeInputEvent`
* `ErrorEvent` (en-US)
* `FocusEvent` (en-US)
* `GamepadEvent` (en-US)
* `HashChangeEvent` (en-US)
* `IDBVersionChangeEvent` (en-US)
* `InputEvent` (en-US)
* `KeyboardEvent` (en-US)
* `MediaStreamEvent` (en-US)
* `MessageEvent` (en-US)
* `MouseEvent`
* `MutationEvent` (en-US)
* `OfflineAudioCompletionEvent` (en-US)
* `PageTransitionEvent` (en-US)
* `PointerEvent` (en-US)
* `PopStateEvent` (en-US)
* `ProgressEvent` (en-US)
* `RelatedEvent`
* `RTCDataChannelEvent` (en-US)
* `RTCIdentityErrorEvent`
* `RTCIdentityEvent`
* `RTCPeerConnectionIceEvent` (en-US)
* `SensorEvent`
* `StorageEvent` (en-US)
* `SVGEvent` (en-US)
* `SVGZoomEvent`
* `TimeEvent` (en-US)
* `TouchEvent` (en-US)
* `TrackEvent` (en-US)
* `TransitionEvent` (en-US)
* `UIEvent` (en-US)
* `UserProximityEvent`
* `WheelEvent` (en-US)
Construtor
----------

`Event()`

Cria um objeto Event.

Propriedades
------------

*Esta interface não herda nenhuma propriedade.*

`Event.bubbles` (en-US) Somente leitura

Um booleano que indica se o evento surge em bolha pela DOM ou não.

`Event.cancelable` (en-US) Somente leitura

Um booleano que indica se o evento é cancelado.

`Event.currentTarget` Somente leitura

Uma referencia para o alvo registrado atualmente para o evento.

`Event.defaultPrevented` Somente leitura

Indica se ou não `event.preventDefault()` foi chamado no evento..

`Event.eventPhase` (en-US) Somente leitura

Indica que fase do fluxo de eventos está a ser processada.

`Event.explicitOriginalTarget` (en-US)
Non-standard
 Somente leitura

O objetivo original explícito do evento (Mozilla-specific).

`Event.originalTarget` (en-US)
Non-standard
 Somente leitura

O objectivo inicial do evento, antes de qualquer redirecionamento (Mozilla-specific).

`Event.target` Somente leitura

A referência ao objectivo para o qual o evento foi originalmente despachado.

`Event.timeStamp` (en-US) Somente leitura

O tempo em que o evento foi criado.

`Event.type` Somente leitura

O nome do evento (case-insensitive).

`Event.isTrusted` Somente leitura

Indica se ou não o evento foi iniciado pelo navegador (depois de um clique do usuário, por exemplo) ou por um script (usando um método de criação de evento, como event.initEvent (en-US))

Metodos
-------

*Esta interface não herda nenhum método.*

`Event.initEvent()`
Deprecated

Inicializa o valor de um evento criado. Se o evento já está sendo despachado, este método não faz nada.

`Event.preventBubble()`
Non-standard

Impede o evento de borbulhar. Obsoleto, use `event.stopPropagation` em vez disso.

`Event.preventCapture()`
Non-standard

Obsoleto, use `event.stopPropagation` ao invés.

`Event.preventDefault()`

Cancela o evento (caso seja cancelável).

`Event.stopImmediatePropagation()`

 Para este evento em particular, nenhum outro ouvinte será chamado. Ou aqueles ligados no mesmo elemento, nem aqueles associados em elementos que serão percorridos mais tarde
 (em fase de captura, por exemplo).

`Event.stopPropagation()`

Para a propagação de eventos mais adiante no DOM.

`Event.getPreventDefault()`
Non-standard

Obsoleto, use `Event.defaultPrevented` ao invés.

Veja também
-----------

* Tipos de eventos disponíveis: Referência de eventos (en-US)
* Comparitivo dos Alvos de Eventos (target vs currentTarget vs relatedTarget vs originalTarget)
* Criação e gatilho de eventos customizados (en-US)
* Para desenvolvedores de extensões para o Firefox:
    + Escutando eventos em extensões do Firefox
    + Escutando eventos em todas as abas
* Eventos relacionados da Mozilla na vida real em wiki.mozilla.org


Request - APIs da Web

Request
=======

A interface **`Request`** da Fetch API representa uma requisição de recursos.

Você pode criar um novo objeto `Request` usando o construtor `Request.Request()`, porém é mais provável que você encontre um objeto `Request` que seja retornado como resultado de outra operação de API, como um service worker `FetchEvent.request` (en-US).

Construtor
----------

`Request.Request()`

Cria um novo objeto `Request`.

Propriedades
------------

`Request.method` (en-US) Somente leitura

Contém o método da requisição (`GET`, `POST` etc.)

`Request.url` (en-US) Somente leitura

Contém a URL da requisição.

`Request.headers` (en-US) Somente leitura

Contém o objeto `Headers` (en-US) associado à requisição.

`Request.context` (en-US) Somente leitura
Deprecated

Contém o contexto da requisição (ex., `audio`, `image`, `iframe` etc.)

`Request.referrer` (en-US) Somente leitura

Contém a referência da requisição (ex., `client`).

`Request.referrerPolicy` (en-US) Somente leitura

Contém a política de referência da requisição (ex., `no-referrer`).

`Request.mode` (en-US) Somente leitura

Contém o modo da requisição (ex., `cors`, `no-cors`, `same-origin`, `navigate`.)

`Request.credentials` (en-US) Somente leitura

Contém a credencial da requisição (Ex., `omit`, `same-origin`, `include`).

`Request.redirect` (en-US) Somente leitura

Contém o modo de como os redirecionamentos serão tratados. Pode ser: `follow`, `error` ou `manual`.

`Request.integrity` (en-US) Somente leitura

Contém o valor da subresource integrity (en-US) da requisição (ex., `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).

`Request.cache` (en-US) Somente leitura

Contém o modo de cache da requisição (ex., `default`, `reload`, `no-cache`).

`Request` implementa `Body`, então também possui as seguintes propriedades disponíveis:

`Body.body` (en-US) Somente leitura

Um simples "getter" para ler o conteúdo do corpo através da interface `ReadableStream` (en-US).

`Body.bodyUsed` (en-US) Somente leitura

Armazena um `Booleano` (en-US) que declara se o corpo da requisição já foi utilizado em uma resposta.

Métodos
-------

`Request.clone()` (en-US)

Cria uma cópia atual do objeto `Request`.

`Request` implementa `Body`, então também possui os seguintes métodos disponíveis:

`Body.arrayBuffer()` (en-US)

Retorna um objeto do tipo promise que resolve um `ArrayBuffer` com a representação do corpo da requisição.

`Body.blob()` (en-US)

Retorna um objeto do tipo promise que resolve um `Blob` com a representação do corpo da requisição.

`Body.formData()` (en-US)

Retorna um objeto do tipo promise que resolve um `FormData` com a representação do corpo da requisição.

`Body.json()` (en-US)

Retorna um objeto do tipo promise que resolve um `JSON` com a representação do corpo da requisição.

`Body.text()` (en-US)

Retorna um objeto do tipo promise que resolve um `USVString` (en-US) (texto) com a representação do corpo da requisição.

**Nota:** Os métodos de `Body` só poderão ser executadas apenas uma vez; As chamadas subsequentes serão resolvidas com strings/ArrayBuffers vazias.

Exemplos
--------

No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor `Request()` (para um arquivo de imagem no mesmo diretório do código) e, em seguida, nos retorna alguns valores das propriedades da requisição:

```js
const myRequest = new Request("http://localhost/flowers.jpg");

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit
```

Você poderá, então, solicitar uma nova requisição passando o objeto `Request` como parâmetro para a chamada `GlobalFetch.fetch()` (en-US), por exemplo:

```js
fetch(myRequest)
  .then((response) => response.blob())
  .then((blob) => {
    myImage.src = URL.createObjectURL(blob);
  });
```

No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor `Request()` com alguns valores iniciais e contendo o corpo para APIs que precisam processar essas informações:

```js
const myRequest = new Request("http://localhost/api", {
  method: "POST",
  body: '{"foo":"bar"}',
});

const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true
```

**Nota:** O tipo do corpo poderá ser apenas: `Blob`, `BufferSource`, `FormData`, `URLSearchParams`, `USVString` (en-US) ou `ReadableStream` (en-US). Para adicionar um objeto JSON ao corpo, é necessário converter esse objeto para string.

Você poderá, então, solicitar uma nova requisição passando o objeto `Request` como parâmetro para a chamada `GlobalFetch.fetch()` (en-US), por exemplo, e poderá capturar a resposta da seguinte forma:

```js
fetch(myRequest)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("Ops! Houve um erro em nosso servidor.");
    }
  })
  .then((response) => {
    console.debug(response);
    // ...
  })
  .catch((error) => {
    console.error(error);
  });
```

Especificações
--------------

| Specification |
| --- |
| Fetch Standard # request-class |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* ServiceWorker API (en-US)
* HTTP access control (CORS) (en-US)
* HTTP


Eventos do Toque - APIs da Web

Eventos do Toque
================

Com a finalidade de fornecer suporte de qualidade para interfaces baseadas em toque (touch), os eventos de touch oferecem a capacidade de interpretar a atividade em telas sensíveis ao toque ou trackpads.

Definições
----------

Surface

A superfície sensível ao toque. Pode ser uma tela ou trackpad.

Touch point

Um ponto de contato com a superfície. Pode ser um dedo (ou cotovelo, orelha, nariz, o que seja, mas provavelmente, um dedo) ou uma caneta.

Interfaces
----------

`TouchEvent` (en-US)

Representa um evento quando ocorre o estado de toque na superfície.

`Touch` (en-US)

Representa um único ponto de contato entre o usuário e a superfície sensível a toque.

`TouchList` (en-US)

Representa um grupo de toques, isto é usado quando usuário tem por exemplo, vários dedos ao mesmo tempo sobre a superfície.

`DocumentTouch`

Contém métodos de conveniência para criar `Touch` (en-US) e objetos `TouchList` (en-US) .

Exemplo
-------

Este exemplo acompanha múltiplos pontos de contato de cada vez, permitindo o usuário desenhe em um `<canvas>` com mais de um dedo por vez. Ele só funcionará em um browser que tenha suporte a eventos de toque.

**Nota:** O texto a seguir utiliza o termo "finger" quando descreve o contato com a superfície, mas poderia, é claro, ser também uma caneta ou outro método de contato.

### Crie um canvas

```html
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
  Seu browser não tem suporte ao elemento canvas.
</canvas>
<br />
<button onclick="startup()">Initialize</button>
<br />
Log:
<pre id="log" style="border: 1px solid #ccc;"></pre>
```

### Configurado os eventos

Quando uma página é carregada, a função `startup()` mostrada abaixo deve ser chamada pelo nosso elemento `<body>` através do atributo `onload` (Mas no exemplo usamos um botão para adicioná-lo, devido as limitações do MDN live example system).

```js
function startup() {
  var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleEnd, false);
  el.addEventListener("touchmove", handleMove, false);
  log("initialized.");
}
```

Define simplesmento todos os ouvintes dos eventos do nosso elemento `<canvas>` para que possamos trabalhar com os eventos de toque quando eles ocorrerem.

#### Rastreando novos toques

Vamos acompanhar os toques em seu progresso.

```js
var ongoingTouches = new Array();
```

Quando ocorre um evento `touchstart`, indicando que um novo toque na superfície tenha ocorrido, a função abaixo `handleStart()` é chamada.

```js
function handleStart(evt) {
  evt.preventDefault();
  log("touchstart.");
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;

  for (var i = 0; i < touches.length; i++) {
    log("touchstart:" + i + "...");
    ongoingTouches.push(copyTouch(touches[i]));
    var color = colorForTouch(touches[i]);
    ctx.beginPath();
    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 \* Math.PI, false); // a circle at the start
    ctx.fillStyle = color;
    ctx.fill();
    log("touchstart:" + i + ".");
  }
}
```

A chamada `event.preventDefault()` mantem o browser a processa o evento de toque ( isso também previne que um mouse event seja despachado). Então, temos o contexto e puxamos a lista de pontos de contato disparados noa propriedade do evento `TouchEvent.changedTouches` (en-US).

Depois disso, nós iteramos sobre todos os objetos `Touch` (en-US) da lista e os adicionamos em um array de pontos de contatos ativos e definimos o ponto inicial para desenhar um pequeno circulo; estamos usando um raio de 4 pixels, então um círculo de 4 pixels irá aparecer em nosso canvas.

#### Desenhando movimento do toque

Cada vez que um ou mais dedos se movem, um evento de TouchMove é disparado, assim chamando nossa função handleMove(). A sua responsabilidade neste exemplo é atualizar as informações armazenadas e desenhar uma linha a partir da posição anterior para a atual de cada toque.

```js
function handleMove(evt) {
  evt.preventDefault();
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;

  for (var i = 0; i < touches.length; i++) {
    var color = colorForTouch(touches[i]);
    var idx = ongoingTouchIndexById(touches[i].identifier);

    if (idx >= 0) {
      log("continuing touch " + idx);
      ctx.beginPath();
      log(
        "ctx.moveTo(" +
          ongoingTouches[idx].pageX +
          ", " +
          ongoingTouches[idx].pageY +
          ");",
      );
      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
      ctx.lineTo(touches[i].pageX, touches[i].pageY);
      ctx.lineWidth = 4;
      ctx.strokeStyle = color;
      ctx.stroke();

      ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
      log(".");
    } else {
      log("can't figure out which touch to continue");
    }
  }
}
```

Esta interação sobre os toques também muda, mas parece em cache as informações em um array para cada toque anterior, a fim de determinar um pont de partida e o destino para o desenho do trajeto. Isto é feito para olhar cada touch da propriedade `Touch.identifier` (en-US). Esta propriedade é um número inteiro único para cada toque, e mantém-se consistente para cada evento durante o tempo de contato de cada dedo como a superfície.

Isto permite obter as coordenadas da posição anterior de cada contato e usar os métodos de contexto apropriado para desenhar uma linha que une as duas posições.

Depois de desenhar a linha, nós chamamos `Array.splice()` para substituir as informações previas sobre o ponto de toque com a informação atual no array `ongoingTouches`.

#### Gerenciando o final do evento de toque

Quando o usuário retira o dedo da superfície , um evento `touchend` é disparado. Da mesma forma, se o dedo deslisa para fora do canvas, nós teremos um evento `touchleave` disparado. Nós tratamos da mesma forma em ambos os casos: chamamos a função `handleEnd()`. A sua missão é desenhar uma linha para o final do ponto de toque e remover o ponto de toque da lista ongoing.

```js
function handleEnd(evt) {
  evt.preventDefault();
  log("touchend/touchleave.");
  var el = document.getElementsByTagName("canvas")[0];
  var ctx = el.getContext("2d");
  var touches = evt.changedTouches;

  for (var i = 0; i < touches.length; i++) {
    var color = colorForTouch(touches[i]);
    var idx = ongoingTouchIndexById(touches[i].identifier);

    if (idx >= 0) {
      ctx.lineWidth = 4;
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      ctx.lineTo(touches[i].pageX, touches[i].pageY);
      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // and a square at the end
      ongoingTouches.splice(idx, 1); // remove it; we're done
    } else {
      log("can't figure out which touch to end");
    }
  }
}
```

Isto é muito semelhante a função anterior, as únicas diferenças reais são o desenho de um pequeno quadrado para marcar o fim e quando chamamos `Array.splice()`, nós simplesmente removemos a antiga entrada da lista de toque do ongoing, sem adição das informações atualizadas. O resultado é que paramos o tracking do ponto de contato.

#### Tratando toques cancelados

Se o dedo do usuário deslisa em uma UI de um navegador, ou o toque de outra forma precisa ser cancelado, o evento touchcancel é disparado e nos chamamaos a função `handleCancel()`.

```js
function handleCancel(evt) {
  evt.preventDefault();
  log("touchcancel.");
  var touches = evt.changedTouches;

  for (var i = 0; i < touches.length; i++) {
    ongoingTouches.splice(i, 1); // remove it; we're done
  }
}
```

Uma vez que a idéia dé cancelar imediatamento o toque, nós simplesmente removemos da lista de ongoing sem desenhar uma linha final.

### Funções de conveniência

Este exemplo usa duas funções de conveniência que deve ser olhado rapidamente para ajudar a fazer o resto do código mais claro

#### Selecionando a cor para cada toque

A fim de fazer cada toque desenhar com uma cor diferente, a função `colorForTouch()` é usada para escolher uma cor com base em um identificador único do toque, Este identificador é um número opaco, mas pelo menos podemos conta com ele diferindo entre os toques ativos no momento.

```js
function colorForTouch(touch) {
  var r = touch.identifier % 16;
  var g = Math.floor(touch.identifier / 3) % 16;
  var b = Math.floor(touch.identifier / 7) % 16;
  r = r.toString(16); // make it a hex digit
  g = g.toString(16); // make it a hex digit
  b = b.toString(16); // make it a hex digit
  var color = "#" + r + g + b;
  log("color for touch with identifier " + touch.identifier + " = " + color);
  return color;
}
```

O resultado desta função é uma string que pode ser usada ao chamar as funções `<canvas>` para setar a cor do desenho. Por exemplo, para um valor `Touch.identifier` (en-US) de 10, o resultado será a string "#aaa".

#### Copiando touch objects

Alguns browsers (mobile Safari, por exemplo) re-usa touch objects entre os eventos, por isso é melhor ter cuidado para copiar os bits, em vez de fazer referência a todo objeto.

```js
function copyTouch(touch) {
  return {
    identifier: touch.identifier,
    pageX: touch.pageX,
    pageY: touch.pageY,
  };
}
```

#### Encontrando um toque ongoing

A função `ongoingTouchIndexById()` abaixo verifica através do array `ongoingTouches` para encontrar o toque correspondente ao indentificador passado, então ele retorna o índice do touch no array.

```js
function ongoingTouchIndexById(idToFind) {
  for (var i = 0; i < ongoingTouches.length; i++) {
    var id = ongoingTouches[i].identifier;

    if (id == idToFind) {
      return i;
    }
  }
  return -1; // não econtrado
}
```

#### Mostrando o que está acontecendo

```js
function log(msg) {
  var p = document.getElementById("log");
  p.innerHTML = msg + "\n" + p.innerHTML;
}
```

If your browser supports it, you can see it live.

jsFiddle example

Additional tips
---------------

This section provides additional tips on how to handle touch events in your web application.

### Handling clicks

Since calling `preventDefault()` on a `touchstart` or the first `touchmove` event of a series prevents the corresponding mouse events from firing, it's common to call `preventDefault()` on `touchmove` rather than `touchstart`. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)

```js
function onTouch(evt) {
  evt.preventDefault();
  if (
    evt.touches.length > 1 ||
    (evt.type == "touchend" && evt.touches.length > 0)
  )
    return;

  var newEvt = document.createEvent("MouseEvents");
  var type = null;
  var touch = null;
  switch (evt.type) {
    case "touchstart":
      type = "mousedown";
      touch = evt.changedTouches[0];
      break;
    case "touchmove":
      type = "mousemove";
      touch = evt.changedTouches[0];
      break;
    case "touchend":
      type = "mouseup";
      touch = evt.changedTouches[0];
      break;
  }
  newEvt.initMouseEvent(
    type,
    true,
    true,
    evt.originalTarget.ownerDocument.defaultView,
    0,
    touch.screenX,
    touch.screenY,
    touch.clientX,
    touch.clientY,
    evt.ctrlKey,
    evt.altKey,
    evt.shirtKey,
    evt.metaKey,
    0,
    null,
  );
  evt.originalTarget.dispatchEvent(newEvt);
}
```

### Calling preventDefault() only on a second touch

One technique for preventing things like `pinchZoom` on a page is to call `preventDefault()` on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.

Especificações
--------------

| Specification |
| --- |
| Touch Events  |

Compatibilidade com navegadores
-------------------------------

### api.Touch

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.TouchEvent

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.TouchList

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.