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