Webcodecs VideoDecoder undefined

Question

I tried to use webodecs in my react project. But it doesn't seem to work.

Here is my debug code:

import logo from './logo.svg';
import './App.css';
// import Editor from './components/pages/editor/editor';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    console.log(window.VideoDecoder);
  });

  return (
    <div></div>
    // <Editor/>
  );
}

export default App;

Then I opened http://localhost:port/, I got ƒ VideoDecoder() { [native code] } in console. But if I opened http://ip:port/, I would get undefined in console.

Answer 1

The VideoDecoder interface is only available in secure contexts

[Exposed=(Window,DedicatedWorker), SecureContext]

You must serve your page from such a secure context, i.e from https:// here.