Stream the canvas to peer without alpha channel

[RamyaAshika]

Browser affected

All Browsers

Description

Whenever I'm sending my canvas to the peer, it's showing with the black background but I just want to make it transparent.

Steps to reproduce

Pass the canvas stream from one peer to another peer its showing background color as black and I have attached screenshots.

Expected results

It should not show the background color as black. I just need the canvas line whatever I'm drawing from one peer.

Actual results

But its showing as a background color as black.

[Pehrsons]

This happens when you have transparency in the canvas, so the images captured from it are transparent, but the peer connection's encoder doesn't encode transparency, so the transparency is ignored. You then end up with the solid color behind that transparency instead, in this case black.

Note that if you by background color mean the background-color from CSS, or just what happened to be behind the captured transparent canvas, neither of them are part of the actual canvas, and so are not part of the captured images either.

Your best bet here is to render the background color into the canvas itself until encoding transparency is supported. If you want white you can do transparent white, and it'll be transparent on the local side and white on the remote side.

You can make all this clearer by turning off alpha for your canvas through canvas.getContext('2d', { alpha: false });.

[RamyaAshika]

canvas.getContext('2d', { alpha: false });. But This is making completely black but I want to make transparency the canvas in the remote side also. So for that what I have done is, I'm getting my image as

                                           ctx.drawImage($this, 0, 0); 
                                            var imageData = ctx.getImageData(0, 0, sharedCv.width, sharedCv.height);
                                            var data = imageData.data;
                                            var removeBlack = function () {
                                                for (var i = 0; i < data.length; i += 4) {
                                                    if (data[i] + data[i + 1] + data[i + 2] < 10) {
                                                        data[i + 3] = 0; // alpha
                                                    }
                                                }
                                                ctx.putImageData(imageData, 0, 0);
                                            };
                                            removeBlack();

It works and I have removed that alpha channel but I'm not getting any clarity in this. Could you please see it @Pehrsons

[Pehrsons]

Like I said, if the encoder doesn't support transparency you cannot expect transparency after decoding. You have to draw solids to your canvas. Disabling alpha is to make this clearer since transparency isn't supported anyway.

[RamyaAshika]

Ok Thanks @Pehrsons

[jimmywarting]

facing similar issue. it's also reproducible on https://webrtc.github.io/samples/src/content/capture/canvas-pc/

dose any browser supports alpha transparancy encoding yet?
6y since this issue where open... something must have happen since then?