I am working with the HTMl5 Canvas API, specifically drawing to the canvas and then capturing a stream from it. I am running into a weird issue that I cannot seem to solve and need some help.
For my setup, I have a canvas element, and 2 input field:
- Bg Color
- Bg Url
Like labeled, when I put in a color, the canvas is painted that color and when I put in a URL, the canvas paints the image (post fetch).
All of that is working, with the problem beginning with captureStream(fps).
I added a video element to my page to display the output of the canvas stream (for testing).
As I change colors, the canvas element reflects all the changes, and the change is also being reflected through the stream in my video element.
Now I want to try to add the background image, so I input an image URL. No matter what size image I put into that field, the same result occurs. The canvas will reflect the change and draw my image; however, the change is not reflected through the stream. The stream will either disappear, or 'freeze' on the last frame (before the image is drawn). I cannot for the life of me figure out why.
I added a callback to the stream, like:
stream.addEventListener('inactive', (event) => {
console.log(`${event.track.kind} inactive`);
});
And the event is never fired, which leads me to believe the stream is still active.
Any ideas? Thanks in advance!
EDIT: It seems as if the video track of the canvas stream is being set to mute, but have no idea why. Its not a settable option. From docs:
"The mute event is sent to a MediaStreamTrack when the track's source is temporarily unable to provide media data. When the track is once again able to produce media output, an unmute event is sent."
So still no idea whats causing that.