0

I have a simple RTCPeerConnection between two peers, to stream video.

The connection works perfectly with MediaStream types. Video and camera streams are going through and received.

However, when I try to send a MediaStream that contains a CanvasCaptureMediaStreamTrack, nothing useful comes out of pc2, the receiving peer. A MediaStream arrives, but when I attach it to a <video> element, it shows nothing (not even a blank picture), and a MediaRecorder also records nothing (0 bytes). At the same time, there seems to be a video track in the stream.

The canvas isn't empty. It has a width of 320x200, and contains a filled rectangle, with a text on it. I can send the captured canvas stream directly to a <video> element, and it appears correctly.

It's apparently not impossible to send a CanvasCaptureMediaStreamTrack through an RTC connection, as it's demonstrated here: https://webrtc.github.io/samples/src/content/capture/canvas-pc/

When I looked into the source code, I saw nothing new. This is how the demo captures the canvas stream, and passes it to the RTCPeerConnection:

const pc1 = new RTCPeerConnection(null);
const stream = canvas.captureStream();

stream.getTracks().forEach(track => {
  pc1.addTrack(track, stream);
});

Is there something I'm missing? Why won't my canvas stream go through the connection, while the demo works?

Tamás Polgár
  • 2,082
  • 5
  • 21
  • 48
  • You may be hitting https://bugs.chromium.org/p/chromium/issues/detail?id=1156408 – Philipp Hancke Mar 26 '22 at 05:59
  • Do you draw anything on that canvas after the track has been captured? If so what is beeing drawn? – Kaiido Mar 26 '22 at 07:43
  • @PhilippHancke isn't this bug specifically about MediaElement.captureStream() though? I see there that going through a canvas is even recommended as a workaround – Kaiido Mar 26 '22 at 07:46
  • Yes, I draw on the canvas. It's a full size rectangle with a fillText. It appears in the video element correctly, if I capture and send it directly. – Tamás Polgár Mar 26 '22 at 17:19

0 Answers0