Hls.js: drawCanvas screenshot blank in Safari

[kmturley]

Environment

• [x] The stream has correct Access-Control-Allow-Origin headers (CORS)
• [x] There are no network errors such as 404s in the browser console when trying to play the stream
• [x] The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• [x] The issue occurs in the latest reference client on http://video-dev.github.io/hls.js/demo and not just on my page
• Link to playable M3U8 file: https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8
• Hls.js version: 0.10.1 (latest)
• Browser name/version: Safari 11.1.1 (12605.2.8)
• OS name/version: MacOS Sierra 10.12.6 (16G1408)

Steps to reproduce

1. Embed your getting started code onto a page
2. Add a button with the code to draw the video to canvas:

<button id="capture" class="button">Capture</button>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var capture = document.getElementById('capture');
capture.addEventListener('click', function(e) {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
});

1. Notice how the canvas is empty on Safari browsers only http://jsfiddle.net/kmturley/pch4dew5/13/
2. Now comment out your feature detection and see it work in Safari: http://jsfiddle.net/pch4dew5/4/

Expected behavior

I expect to be able to draw the video frame to canvas, whether it's the native video player, or hls.js taking over

Actual behavior

Canvas is empty. I believe Safari supports HLS, so is inserting the js player, but that is somehow preventing drawImage. I don't think it's CORS, because the same code/video works without HLS.js loading the source

If I flip the if statements it works because it uses mpegurl for safari:

if (el.canPlayType('application/vnd.apple.mpegurl')) {
  // do something
} else if (Hls.isSupported()) {
  // do something else
}

http://jsfiddle.net/kmturley/pch4dew5/11/

[kmturley]

IE11 is also having issues with drawImage. The image displays but is squashed, even though the dimensions are reported correctly:
http://jsfiddle.net/kmturley/q8fqLdaj/47/

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kmturley]

Any resolution?

[anazei]

I came upon this thread while researching a similar problem.

Here is what my extensive testing has told me so far:

• iOS Safari does not allow context.drawImage() to work on HLS video streams for some reason. However, it works fine on MP4.

• IE11 does not support MediaSource which is what HLS.js uses IF you are on Windows 7. However, MediaSource is supported on Windows 8.1+ so HLS.js works on those.

• IE11 does not support HLS natively.

Good luck!

[tchakabam]

This issue is not hls.js related but solely to browser impl of HTMLMediaElement and respective canvas image copy.

[HUGY1]

if (el.canPlayType('application/vnd.apple.mpegurl')) { // do something } else if (Hls.isSupported()) { // do something else }

this can really work!!

[anazei]

if (el.canPlayType('application/vnd.apple.mpegurl')) { // do something } else if (Hls.isSupported()) { // do something else }

this can really work!!

It works fine on all desktop browsers I tested but I find the canPlayType("mimeType") is really 50/50 depending on the mobile device you're using.

Many mobile devices erroneously report "maybe" as a response which means it's unsure until you physically try to play it back. I've seen that sometimes, "maybe" does mean it can play while other times, it fails.

The response "maybe" is basically useless since it's not a deterministic answer.