kagami / avif.js Goto Github PK

demo/index.html is not working due to the numerous JS errors
even if I change to

e.g.
index.js:5 Uncaught ReferenceError: require is not defined
at index.js:5:14

index.html:1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://tst.1st-social.com/html/avif.js/') with script ('https://.../avif.js/avif-sw.js'): ServiceWorker script evaluation failed

Just like Firefox, but unlike libavif, avif.js doesn’t support the alpha channel yet, giving fun artefacts in images such as https://linkmauve.fr/files/railgun.avif

See Firefox’s rendering (but it’s the same in avif.js):

Microsoft Edge 110+ supports HDR Canvas, HDR AV1 video, and HDR JPEG

Edge HDR canvas can be done via enabling "Experimental Features" flag in edge://flags and then creating a canvas via:

// Create HDR canvas in Chrome/Edge 110+if enabled in chrome://flags "Experimental Features ON"
surface = canvas.getContext("2d", {colorSpace:'rec2100-pq', pixelFormat:'float16'});
canvas.drawingBufferColorSpace = 'rec2100-pq';
canvas.unpackColorSpace = 'rec2100-pq';

Then HDR works. I'd like to support HDR AVIF files in Microsoft Edge.

Service worker is not yet active when page is loaded for first time, thus image is not loading on first page load.
How to reproduce: open in incognito mode.

Data used is here: http://download.opencontent.netflix.com/?prefix=AV1/Chimera/AVIF/

This decodes fine in Chrome 74 (which has native support) and Firefox 66 (with AV1 enabled), but fails on Safari (Safari 12.1, in this case). Console did not leave any useful backtraces.

It doesn't work on Chrome Mobile although Chrome is specified as supported browser.

I guess the reason for this is that Chrome Mobile relies on Android for video codecs and Android doesn't support AV1 yet. So as with other browsers it could be resolved with polyfill.

Probably it's good idea to state in README that for now it works only on desktop Chrome.

I have a test AVIF file on the Bitcoin SV blockchain: https://bico.media/4c97b18d3f157b593045fe1525f5fdc608bc207e4729964855604ad40dc77e0f

I'd like to be able to demo this file to people via something like:

https://kagami.github.io/avif.js/?src=https://bico.media/4c97b18d3f157b593045fe1525f5fdc608bc207e4729964855604ad40dc77e0f

Certainly people can download the file from the blockchain and then use the "Load" button, but streamlining this for other sample files would be cool!

Other sample/test file libraries:

https://github.com/AOMediaCodec/av1-avif/tree/master/testFiles

http://download.opencontent.netflix.com/?prefix=AV1/Chimera/AVIF/

Thanks!

Hello,

I'm quite lost on how to generate a UMD module to use in a browser. I have an error while using browserify, which seems to be linked to babelify, which I need to use first apparently. There's no clear explanation on how to do that. Can you provide a guide on how to do so ?

I was wondering if it would be possible to use this solution in static websites aswell
Like webp-hero does! Just include one JavaScript and everything just works! No need to get node :)

Is there a way to use this without a bundler (like browserify)?

(Using Firefox 88.)

I loaded the demo page happily. Then I opened a single image in a new tab (using right-click + "Open Image in New Tab"). This fails.

A hard reload (shift-reload) fixes the problem and shows the image, but reloading the page normally (f5, ctrl-r) shows the same error. The message in the console is:

Failed to load ‘https://kagami.github.io/avif.js/Mexico.5f45d60c.avif’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘TypeError: can't access property "id", e is undefined’. avif-sw.js:8:856

I am using Vue for my website, and I cannot get this polyfill to work.

When using the require/register method in the Readme, Edge will complain with the following error (On localhost):

An SSL certificate error occurred when fetching the script.
Which is strange, because the website works fine. The certificate is self-signed, but it is accepted.

When directly importing the files like this:

import 'avif.js/avif.js';
import 'avif.js/avif-sw.js';

Nothing happens. Safari on iOS doesn't seem to do anything in the above scenarios. I cannot debug on desktop Safari, because I haven no more mac OS devices.

Not that it's of much value, but Firefox and Chrome both don't work. On Firefox it's because of the ServiceWorker being unsupported, I believe that this is a known issue.

Does anyone know how to get this working in Vue? I would love AVIF support in browsers which do not support it!

I used this plug-in in the blog built by vitepress, but the compiler reported an error

my package.json

{
  "name": "vitepress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs --open",
    "build": "vitepress build docs",
    "serve": "vitepress serve docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@algolia/client-search": "^4.14.2",
    "@types/node": "^18.11.18",
    "vitepress": "1.0.0-alpha.40"
  },
  "dependencies": {
    "avif.js": "^0.2.0"
  }
}

can u help me ?

All the pictures on my blog are in avif format, but edge browsers do not support avif format. I hope to let edge browsers display pictures through your plug-in. This is my request.