Search code examples
javascripthtml5-videoblobchromium

Blob-video link doesn't work in Chromium browser

UPD: It appeared that the issue is not related to Blob itself. Chromium simply does not support h264 format. Please, check the answers.

I use URL.createObjectURL() to generate blob-url to local video. It works on most of the browser (tested bunch of mobile and desktop browsers). But now I tried to use Chromium (for autotesting purposes). It does generate blob-url, but it is just empty. So i can't put this url to video source. Obviously, video events like 'loadedmetadata' do not trigger. Also, blob link doesn't work in another tab.

function setVideo(el) 
{
  console.log('inited');
    const file = el.files[0];
  let video = document.querySelector('#video');
  let url = URL.createObjectURL(file);
  let videoSrc = video.querySelector('source');
  videoSrc.src = url;
  videoSrc.setAttribute('type', file.type);
  let metaLoaded = function () {
   console.log('metaloaded');
  };
  
  video.load();

  if ( video.readyState > 0 )
    metaLoaded();
  else
    video.addEventListener('loadedmetadata', metaLoaded, false);
}

Example https://jsfiddle.net/pwdhs42v/3/ Works on all browsers except of Chromium (122.0.6258.0) Any idea why it works like that? Could it be some security restriction? If so, can I disable it?

Thanks in advance!

Solution

  • I checked chrome://media-internals, and got those errors:

    FFmpegDemuxer: skipping invalid or unsupported video track

    FFmpegDemuxer: no supported streams

    "Warning, FFmpegDemuxer failed to create a valid/supported video decoder configuration from muxed stream

    Chromium does not support the h264 codec out of the box, and ironically, all of my test videos were encoded in this format.

    I should have checked this in here: https://www.chromium.org/audio-video/

    So, I have to use other video formats or build Chromium with h264 support.