WebRTC does not maintain alpha channel when it streams <canvas> content using captureStream() to another browser
Reported by
kwtha...@gmail.com,
Nov 11 2016
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.87 Safari/537.36 Steps to reproduce the problem: 1. Create a <canvas> and paint on it something. Make some pixels transparent (alpha =0.0). 2. Use canvas.captureStream() to get a MediaStream and 3. Use WebRTC to stream it to another browser which will paint it on a <video>. What is the expected behavior? The <video> on the other browser is rendered as it was rendered on the <canvas> taking into consideration the alpha channel. What went wrong? The pixels that were transparent (alpha = 0.0) are painted black on the <video> Did this work before? No Does this work in other browsers? N/A Chrome version: 54.0.2840.87 Channel: n/a OS Version: 10.0 Flash Version: Shockwave Flash 23.0 r0 Are there any possible workarounds someone can use until this gets fixed?
,
Nov 14 2016
Could you please provide us the sample test case to reproduce the issue , that would help us in triaging the issue better. Thanks !
,
Nov 15 2016
I will try but it is quite difficult to set up a jsfiddle for this.
,
Nov 23 2016
Thank you for providing more feedback. Adding requester "hdodda@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Nov 29 2016
This is a known limitation, we don't support alpha channel "on the wire" currently.
,
Nov 29 2016
Do you know appr. when this feature will be supported ?
,
Dec 6 2016
As per comment #5, removing myself from owners list.
,
Dec 6 2016
,
Jan 2 2017
Is there a workaround? I'm having the same issue trying to capture a canvas with a transparent background.
,
Jan 2 2017
You can use shaders to make all the black pixels transparent on the other side of the streaming. It is not perfect but it works for me at the moment.
,
Jan 2 2017
Ah, nice. In my scenario, I'm saving the stream and trying to make an animated gif. I just finished using ffmpeg and ImageMagick. I was also thinking toDataUrl would work better.
,
Feb 21 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Feb 23 2018
,
Jan 7
The MediaStream generated by canvas.captureStream() supports Alpha channel (see [1] where the VideoFrames are created). What's missing is sending those through a PeerConnection, and displaying a remote MediaStream, so, correcting Components. [1] https://cs.chromium.org/chromium/src/content/renderer/media_capture_from_element/canvas_capture_handler.cc?sq=package:chromium&dr=CSs&g=0&l=398 |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by guidou@chromium.org
, Nov 14 2016