Captura de tela no Chrome - preparando-se para getDisplayMedia


A Chrome Web Store decidiu proibir a instalação embutida de extensões para o Chrome. Isso está diretamente relacionado aos aplicativos WebRTC, pois agora você precisa de uma extensão para capturas de tela no Chrome. A API getDisplayMedia será útil ?

Captura de tela no Chrome


Quando esse recurso apareceu no Chrome 33 , ele precisava de uma extensão para funcionar - para resolver problemas de segurança. Esse método é melhor que o anterior, quando as capturas de tela foram ocultadas sob uma bandeira, por causa de quais sites pediram aos usuários para ativá-la ... O que levou a mensagens de segurança pública .

O Chrome não mudou muito desde 2013. Os requisitos de extensão adicionaram dificuldades ao processo de compartilhamento, mas graças à instalação em linha , que simplificou a vida útil:

  • o usuário clica em um botão para iniciar uma captura de tela;
  • O aplicativo da web determina que o Chrome está sendo usado e que a extensão desejada não está instalada;
  • o aplicativo Web inicia a instalação embutida, resolve com êxito o retorno de chamada;
  • no Chrome, uma janela de escolha aparece exatamente o que o usuário deseja compartilhar.

Detalhes da implementação podem ser encontrados aqui .

A caixa de seleção é um elemento chave aqui. É seguro usá-lo sem uma rede da Web Store?


Nesse caso, o compartilhamento de uma guia é particularmente intrigante, pois viola o princípio do sandbox para scripts de "origem cruzada".

Captura de tela do Firefox


O Firefox tem uma abordagem diferente - uma lista branca de sites que têm permissão para usar a API. Para entrar nessa lista, o site deve fazer uma solicitação à Mozilla e mostrar que ela possui os Termos de Serviço e a política de privacidade. Você pode modificar a lista de permissões usando a extensão. A necessidade dessa lista desapareceu com o lançamento do Firefox 52, quando qualquer fonte confirmada teve permissão para usar capturas de tela. A nova API getDisplayMedia ainda não é usada aqui , sobre a qual falaremos em breve, mas a implementação é quase a mesma:

navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}})
.then(stream => {
// ,
videoElement.srcObject = stream;
}, error => {
console.log(" ", error);
});

Como resultado, a implementação será alterada para atender às especificações .

API getDisplayMedia


O W3C Consortium está trabalhando para padronizar a API de captura de tela . É relativamente simples e baseado em promessas, como getUserMedia :

// 1 Screen Capture API
navigator.getDisplayMedia({ video: true })
.then(stream => {
// ,
videoElement.srcObject = stream;
}, error => {
console.log(" ", error);
});
view raw example1-spec.js hosted with ❤ by GitHub

O Microsoft EDGE já lançou capturas de tela este ano. O cenário de uso é pensado muito bem, com a adição de uma moldura amarela em torno da área que o usuário compartilha:


Captura de tela da janela no Edge. Preste atenção ao quadro amarelo que destaca exatamente o que é compartilhado.

Os tempos mudam e as extensões do Chrome com eles


Falando da experiência do usuário, a extensão appear.in funciona como descrito acima e possui mais de um milhão de instalações. A grande maioria dos usuários passou por uma instalação embutida, e há muitos deles que as capturas de tela da extensão na Chrome Web Store não são atualizadas desde ... provavelmente 2014.

Como o blog da Chrome Web Store diz , eles agora estão cortando uma instalação embutida. Foi uma grande surpresa, eu aprendi sobre isso graças ao antigo problema do Chrome - para tornar as capturas de tela mais acessíveis (graças a Wilhelm Wanecek pela dica).

Se eu entendi corretamente, isso levará à abertura da Chrome Web Store em uma guia separada. Na parte do aplicativo da Web, será mais difícil determinar quando o usuário instalou a extensão, será necessário usar pesquisas ou um tempo limite. Os seguintes termos são indicados na postagem:

  • Uma instalação em linha não estará disponível para novas extensões a partir de 12 de junho. Sem aviso prévio;
  • para extensões já publicadas, a instalação em linha estará disponível até 12 de setembro. Aviso prévio - com três meses de antecedência.

Reivindicações


Definitivamente, existem problemas aqui. E nem estou falando do Google Hangouts / Meet, que evita completamente as dificuldades de experiência do usuário com as quais todos os outros precisam lidar com a extensão incorporada. Os caras do Chrome estão torcendo as mãos .

Gostaria de receber algumas notícias da equipe da Chrome Web Store com antecedência (a carta chegou cerca de 24 horas após a postagem do blog). A extensão appear.in tem mais de um milhão de usuários, o que a torna uma das mais populares para capturas de tela. Nossos usuários confiam em nosso site, ou seja, eles nos dão acesso a seus microfones e câmeras. Usar uma instalação embutida com base nessa confiança é provavelmente mais seguro do que instalar na Chrome Web Store. Também recorremos ao suporte da Web Store para remover cópias ilegais da extensão, que centenas de usuários se definiram repetidamente.

E seria ótimo se os caras do Google nos avisassem.


A conta @webrtc mencionou a intenção de lançar o getDisplayMedia em resposta a alterações na política de instalação em linha.

O caminho para o Chrome é o lançamento do getDisplayMedia . "Intenção de lançar" foi publicado logo após as principais notícias . No entanto, dado o ciclo de lançamento do Chrome, levará várias semanas. Essa é uma alteração não trivial nas disposições de segurança e nos cenários dos usuários; portanto, é duvidoso que isso ocorra antes do prazo de 12 de setembro. O ponto de ramificação do Chrome 69, que será lançado em 12 de setembro, é dentro de um mês.

A situação com o Chrome é complicada pelo fato de agora o compartilhamento de guias ser permitido, mas com uma limitação na escolha da exibição para o usuário. O compartilhamento de saída de áudio é suportado no Chrome, mas nem na especificação getDisplayMedia .

Como se preparar para as alterações no Chrome


O código relacionado ao suporte da getDisplayMedia é relativamente simples. Normalmente, uma chamada para esta API é igual a getUserMedia com o argumento mediaSource chamado no Firefox. Para determinar se esse recurso está disponível é fácil, é necessário verificar se existe getDisplayMedia e usá-lo com prioridade, se disponível:

if ('getDisplayMedia' in window.navigator) {
// getDisplayMedia
} else {
//
}

Ainda não está claro como indicar a taxa de quadros. O uso de applyConstraints no MediaStreamTrack retornado funciona para getUserMedia e provavelmente funcionará para getDisplayMedia :

navigator.getDisplayMedia({video: true})
.then(stream => {
stream.getTracks()[0].applyConstraints({frameRate: 5});
return stream;
})
view raw frame-rate.js hosted with ❤ by GitHub

Os detalhes estão no rastreador de especificações .

Infelizmente, adapter.js não pode inserir getDisplayMedia , pois a interação com cada extensão é implementada de maneira um pouco diferente.

Mais e mais alto


Monitoro cuidadosamente se os desenvolvedores do WebRTC do Google podem influenciar o prazo para instalações em linha ou lançar o getDisplayMedia no prazo. O desenvolvimento sob a web às vezes é confuso, sim, mas como regra, no final, vemos um bom resultado. Estamos aguardando o final desta história e teremos o maior prazer em dizer adeus às nossas extensões.



Captura de tela no Voximplant


Também temos uma captura de tela que funciona com êxito no Chrome. No entanto, embora ninguém tenha se despedido das extensões, faça o seguinte:

  1. Faça o download da extensão em nosso repositório: github.com/voximplant/voximplant-chrome-extension
  2. Vá para a pasta em que a extensão foi baixada, abra o manifest.json e adicione o URL do seu site à seção de correspondências .
  3. Na nova guia Chrome, insira chrome: // extensions , ative o modo de desenvolvedor e carregue a extensão da pasta.

Então você instala a versão dev da extensão. É mais conveniente para os usuários finais se você publicar a extensão na Googe Web Store. Sobre isso, além de como usar capturas de tela em nossa plataforma, você pode ler em nosso Como Fazer . Tenha um bom compartilhamento!

Source: https://habr.com/ru/post/pt415201/


All Articles