Captura de pantalla en Chrome: preparación para getDisplayMedia


Chrome Web Store ha decidido prohibir la instalación en línea de extensiones para Chrome. Esto está directamente relacionado con las aplicaciones WebRTC, ya que ahora necesita una extensión para capturas de pantalla en Chrome. ¿La API getDisplayMedia vendrá al rescate?

Captura de pantalla en Chrome


Cuando esta característica apareció en Chrome 33 , necesitaba una extensión para funcionar, para resolver problemas de seguridad. Este método es mejor que el anterior, cuando las capturas de pantalla se ocultaban bajo una bandera, debido a qué sitios pedían a los usuarios que activaran esta bandera ... Lo que condujo a mensajes de seguridad pública .

Chrome no ha cambiado mucho desde 2013. Los requisitos de extensión agregaron dificultades al proceso de compartir, pero gracias a la instalación en línea , que simplificó la vida:

  • el usuario hace clic en un botón para iniciar una captura de pantalla;
  • La aplicación web determina que Chrome se está utilizando y que la extensión deseada no está instalada;
  • la aplicación web inicia la instalación en línea, resuelve con éxito la devolución de llamada;
  • en Chrome, aparece una ventana de elección que muestra exactamente lo que el usuario quiere compartir.

Los detalles de la implementación se pueden encontrar aquí .

El cuadro de selección es un elemento clave aquí. ¿Es seguro usarlo sin una red de la Tienda Web?


En este caso, compartir una pestaña es particularmente desconcertante, ya que viola el principio de sandbox para los scripts de "origen cruzado".

Captura de pantalla de Firefox


Firefox tiene un enfoque diferente: una lista blanca de sitios que pueden usar la API. Para ingresar a esta lista, el sitio debe hacer una solicitud a Mozilla y demostrar que tiene los Términos de servicio y la política de privacidad. Puede modificar la lista blanca usando la extensión. La necesidad de dicha lista desapareció con el lanzamiento de Firefox 52, cuando a cualquier fuente confirmada se le permitió usar capturas de pantalla. La nueva API getDisplayMedia todavía no se usa aquí , de lo que hablaremos pronto, pero la implementación es casi la misma:

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

Como resultado, la implementación se cambiará para cumplir con la especificación .

API getDisplayMedia


El Consorcio W3C está trabajando para estandarizar la API de captura de pantalla . Es relativamente simple y se basa en promesas, 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

Microsoft EDGE ya ha lanzado capturas de pantalla este año. El escenario de uso está muy bien pensado, con la adición de un marco amarillo alrededor del área que comparte el usuario:


Captura de pantalla de la ventana en Edge. Presta atención al marco amarillo que resalta lo que se comparte exactamente.

Los tiempos cambian y las extensiones de Chrome con ellos


Hablando de la experiencia del usuario, la extensión aparecen.in funciona como se describió anteriormente y tiene más de un millón de instalaciones. La gran mayoría de los usuarios realizó una instalación en línea, y hay tantos de ellos que las capturas de pantalla de la extensión en Chrome Web Store no se han actualizado desde ... probablemente 2014.

Como dice el blog de Chrome Web Store , ahora están cortando una instalación en línea. Fue una gran sorpresa, lo aprendí por primera vez gracias al viejo problema de Chrome: hacer que las capturas de pantalla sean más accesibles (gracias a Wilhelm Wanecek por el consejo).

Si entiendo correctamente, esto llevará a que Chrome Web Store se abra en una pestaña separada. Por parte de la aplicación web, será más difícil determinar cuándo el usuario ha instalado la extensión, tendrá que usar encuestas o tiempo de espera. Los siguientes términos se indican en la publicación:

  • Una instalación en línea no estará disponible para nuevas extensiones a partir del 12 de junio. Sin previo aviso;
  • para extensiones ya publicadas, la instalación en línea estará disponible hasta el 12 de septiembre. Aviso previo: tres meses de anticipación.

Reclamos


Definitivamente hay problemas aquí. Y ni siquiera estoy hablando de Google Hangouts / Meet, que evita por completo las dificultades de UX con las que todos los demás tienen que lidiar con la extensión incorporada. Los chicos de Chrome ya están torciendo sus manos .

Me gustaría recibir algunas noticias del equipo de Chrome Web Store por adelantado (la carta llegó aproximadamente 24 horas después de la publicación del blog). La extensión del archivo .in tiene más de un millón de usuarios, lo que hace que esta extensión sea una de las más populares para capturas de pantalla. Nuestros usuarios confían en nuestro sitio, es decir, nos dan acceso a sus micrófonos y cámaras. El uso de una instalación en línea basada en esta confianza es probablemente más seguro que la instalación desde Chrome Web Store. También recurrimos al soporte de la Tienda Web para eliminar copias ilegales de la extensión, que cientos de usuarios se han establecido en varias ocasiones.

Y sería genial si los chicos de Google nos advirtieran.


La cuenta @webrtc mencionó la intención de implementar getDisplayMedia en respuesta a los cambios en la política de instalación en línea.

El camino para Chrome es el lanzamiento de getDisplayMedia . "Intención de despliegue" se publicó poco después de las principales noticias . Sin embargo, dado el ciclo de lanzamiento de Chrome, tomará varias semanas. Este es un cambio no trivial en las disposiciones de seguridad y escenarios de usuarios, por lo que es dudoso que suceda antes de la fecha límite del 12 de septiembre. El punto de ramificación para Chrome 69, que se lanzará el 12 de septiembre, es dentro de un mes.

La situación con Chrome es complicada por el hecho de que ahora está permitido compartir pestañas, pero con una limitación en la elección de la pantalla para el usuario. El uso compartido de salida de audio es compatible con Chrome, pero ni siquiera está en la especificación getDisplayMedia .

Cómo prepararse para los cambios en Chrome


El código relacionado con el soporte getDisplayMedia es relativamente sencillo. Normalmente, una llamada a esta API es lo mismo que getUserMedia con el argumento mediaSource en Firefox. Determinar si esta función está disponible es fácil, debe verificar si existe getDisplayMedia y usar la prioridad si está disponible:

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

Todavía no está claro cómo indicar la velocidad de fotogramas. El uso de applyConstraints en el MediaStreamTrack devuelto funciona para getUserMedia y probablemente 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

Los detalles se encuentran en la especificación bugtracker .

Por desgracia, adapter.js no puede insertar getDisplayMedia , ya que la interacción con cada extensión se implementa de manera un poco diferente.

Más y más alto


Superviso cuidadosamente si los desarrolladores de WebRTC de Google pueden influir en la fecha límite para las instalaciones en línea o implementar getDisplayMedia a tiempo. El desarrollo en la web a veces es desordenado, sí, pero al final vemos un buen resultado. Estamos esperando el final de esta historia y estaremos encantados de despedirnos de nuestras extensiones.



Captura de pantalla en Voximplant


También tenemos una captura de pantalla que funciona con éxito en Chrome. Sin embargo, si bien nadie se despidió de las extensiones, debe hacer lo siguiente:

  1. Descargue la extensión de nuestro repositorio: github.com/voximplant/voximplant-chrome-extension
  2. Vaya a la carpeta donde se descarga la extensión, abra manifest.json y agregue la URL de su sitio a la sección de coincidencias .
  3. En la nueva pestaña de Chrome, ingrese chrome: // extensiones , habilite el modo desarrollador y cargue la extensión desde la carpeta.

Entonces instalas la versión dev de la extensión. Es más conveniente para los usuarios finales si publica la extensión en Googe Web Store. Sobre esto, así como sobre cómo usar capturas de pantalla en nuestra plataforma, puede leer nuestro Cómo . ¡Que tengas un buen intercambio!

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


All Articles