Allow WebP and AVIF image streams

[dvoracek-slub]

Have you read the FAQ and checked for duplicate open issues?
Yes

Is your feature request related to a problem? Please describe.
To allow better compression in thumbnail / image tracks, I would like to use WebP or AVIF instead of JPEG images (when supported in the browser). Currently, AVIF streams are always dropped, and WebP are kept only on WebOS, Tizen, Chromecast.

Describe the solution you'd like
Instead of white-listing supported image formats per platform, StreamUtils::filterImageStreams_() should check actual browser support.

Describe alternatives you've considered
Alternatively, stream filtering could be made customizable, so that I may check browser support in the app itself.

[avelad]

Do you know an API to verify image support?

One possibility is to use something like this:

function isImageSupported (imageElement) {
  return new Promise((resolve) => {
    if ('decode' in imageElement) {
      imageElement.decode().then(() => {
        resolve(true);
      }).catch(() => {
        resolve(false);
      });
    } else {
      imageElement.onload = imageElement.onerror = () => {
        resolve(imageElement.height === 2);
      };
    }
  });
}

const WebP = new Image();
WebP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
isImageSupported(WebP).then((res) => {
  console.log('WebP support:', res);
});

const AVIF = new Image();
AVIF.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=';
isImageSupported(AVIF).then((res) => {
  console.log('AVIF support:', res);
});

[dvoracek-slub]

I don't know a way other than via a sample image, but also I hadn't looked into this extensively yet. At least for WebP, though, this seems to be the recommended approach (https://developers.google.com/speed/webp/faq#in_your_own_javascript).

[avelad]

@joeyparrish do you know another method to check if a image mime type is supported?

[joeyparrish]

No, I don't know a better way. I would suggest this:

1. Create the smallest sample images possible for each format, to minimize the size of the base64 data URIs
2. Hard-code the data URIs into a map, indexed by MIME type
3. Adapt the async code above to check by MIME type using that map (would work like an async version of MediaSource.isTypeSupported)
4. Have the implementation memoize the results of a MIME type query, so future filtering passes could be done more quickly