Can not capture video element in Safari using blob url

Question

I am using hls.js to play HLS video stream. The hls.js is using blob URL to display the video element in src tag (<video src="blob://.." />). I can capture it in Chrome by converting to canvas using drawImage() function but when I do the same in Safari it will be a white canvas!

I tried to change the blob URL to normal URL and it worked. So somehow Safari can not convert blob URL to canvas as Chrome do.

Answer 1

maybe I encountered the same problem here. I tried to play m3u8 file from indexeddb in form of blob (created by URL.createObjectURL). It works fine on every browser but safari on iOS. On safari ios, the video tag only send 2 request to blob url and the response status is 206 partial content then throw an error: video not supported. I'm trying to figure out what happened here, if I play sample m3u8 from hls example, the video play ok but when I play blob URL I got not supported error. Not sure if it is partial content problem or it needs to be file extension at the end of URL

Answer 2

One workaround for this is to use the blob URL in a video element, then use the video element as the source for the canvas. Another workaround is to use the MediaStream API to get the video stream from the blob URL, and then use that stream to create the video element and canvas.

Also Safari does not support drawImage() with blob URLs. Instead, you can use the createObjectURL() method to create a temporary URL that represents the blob, and then use this URL in the drawImage() function to capture the video element.