• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

187
Views
¿Transmitir contenido de lienzo HTML5 con transparencia parcial?

Actualmente estoy enviando un flujo de lienzo a través de WebRTC, usando canvas.captureStream() . Esto funciona según lo previsto, pero mi lienzo es una superposición sobre otro video y, por lo tanto, tiene píxeles transparentes.

Soy consciente de que los formatos habituales H26x o VPx no son compatibles con la transparencia (consulte también Transmisión de video con píxeles transparentes usando webrtc ), así que decidí usar la clave de croma antigua (es decir, 100 % verde == transparente).

Para llegar allí, actualmente estoy llenando el lienzo con verde transparente al inicio:

 // already tried various composite ops here, none seem to work // context.globalCompositeOperation = "destination-out"; context.fillStyle = "rgba(0,255,0,0)"; context.fillRect(0, 0, canvas.width, canvas.height);

Esto parece correcto en el lado del cliente (el lienzo es transparente, lo que sea que dibuje en la parte superior no lo es), pero en el flujo resultante que sale a través de WebRTC, el fondo que es transparente en el navegador aparentemente es solo negro, en lugar de verde. ¿Esperaría que el valor alfa simplemente se elimine?

Cuando cambio el valor alfa a cualquier otro que no sea 0 (por ejemplo, 1 o 128), el resultado ya no es transparente, sino completamente opaco de color verde brillante, tanto en la transmisión saliente (bien) como en el navegador (no bueno).

Preferiría evitar tener que hacer manualmente la conversión RGBA -> RGB en Javascript para cada cuadro en un lienzo oculto, que es la única alternativa que se me ocurre en este momento. Otras ideas muy bienvenidas :-)

EDITAR: probado con Chrome 96 y Firefox 94, en Ubuntu 20.04. Como referencia, aquí está la descripción de las operaciones de composición: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Según los comentarios de Kaiido (¡gracias!), descubrí una solución relativamente (?) eficiente: ahora tengo dos lienzos, uno visible y otro oculto, y todos los comandos de dibujo se replican en ambos. El visible usa un fondo negro transparente y se superpone al video, el oculto tiene un fondo verde brillante y se usa como fuente de transmisión.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error