Blob URL causing problems

[geneellis]

We're using HLS.JS as the video player on several television platforms. Works great, however one of the platforms is having problems because HLS.JS is creating a blob url as a media stream source. For example, the code is coming through as:

<video id="video" width="100%" height="100%" src="blob:https://tv.music.com/05e6a180-e56b-4da4-ba63-8722f54eac88">

instead of:

<video id="video" width="100%" height="100%" src="https://tv.music.com/song.mp4">

Any way to stop HLS.JS from creating/using blobs urls? Thanks!

[itsjamie]

No.

This is done because hls.js creates a MediaSource in the browser, which the <video> element references by the Object URL. This is the blob URL that you see in the source element.

[itsjamie]

However, what is the platform that is having issue, and does Hls.isSupported() return true?

[geneellis]

@itsjamie, it's a Smart TV Platform. And yes, Hls.isSupported() returns true

[robwalch]

it's a Smart TV Platform

@geneellis Please be more specific; Include device, make, model and browser user-agent string.

Hls.isSupported() returns true when the Media Source Extensions API is present. It depends on URL.createObjectURL() to create that blob: URL that connects the video tag to the source buffers.

URL.createObjectURL() Creates an object URL pointing to a MediaSource object that can then be specified as the src value of an HTML media element to play a media stream.

I'm not sure this is actually the problem. If it is, your device cannot use hls.js or any other MSE based player.

[falahati]

I am not sure if this is relevent but please take a look at this note in MDN: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

Using object URLs for media streams

In older versions of the Media Source specification, attaching a stream to a

Important: If you still have code that relies on createObjectURL() to attach streams to media elements, you need to update your code to simply set srcObject to the MediaStream directly.

[robwalch]

@falahati It might be, but MediaStream is not the same as MediaSource. While srcObject could be used https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject support for srcObject=MediaSource does not appear to be there https://caniuse.com/#search=srcObject in any browser outside Safari 13 (where you are best off using src="m3u8").

I haven't seen examples of other players using it. We still don't know anything about this device. @geneellis you might try forking the project and trying this out.

[geneellis]

Thanks so much for the comments everyone. I'll reach out to the testing team to see about getting more information about the device.

Thanks again and I'll be in touch!

[geneellis]

Hey everyone, here is the information provided by the testing team about the devices which were tested. Does this help shine a light on the problem? https://docs.google.com/spreadsheets/d/1661SO4YruuUAo81QppAhnl7VNB8PAjAvyUibYoVvHZk/edit#gid=183776889

[robwalch]

Thanks @geneellis,

I can gather that you're working with Philips Android based Smart TVs. But without access to one there is nothing I can do to reproduce your issue - and find out what it is.

one of the platforms is having problems because HLS.JS is creating a blob url as a media stream source

We don't know for sure that the blob url is the cause. What is the problem? Do you have any debugging data available from these TVs? Is an error displayed on the screen, or can you connect a browser debugger and collect logs from these devices?

[robwalch]

Closing as there is not enough information or resources for us to reproduce the issue, or confirm the author's assumption.

[mreinstein]

@robwalch this is still an issue, even with today's latest stable version of hls.js. We should re-open.

It has something to do with content security policy settings.

Here are the repro steps:

1. visit this page in latest stable chrome: https://www.walmart.com/ip/Free-Assembly-Women-s-Ribbed-Crewneck-Tee-with-Short-Sleeves/350855124

2. paste this code into the javascript console

   
   async function main () {
   const m = await import('https://cdn.skypack.dev/pin/hls.js@v0.14.17-QdyRkPkPkLxzq8fkAgzR/mode=imports,min/optimized/hlsjs.js')
   const Hls = m.default;
   
   if (Hls.isSupported()) {
   var video = document.createElement('video')
   video.id = 'video';
   document.body.appendChild(video)
   var hls = new Hls();
   console.log('attaching...');
   // bind them together
   hls.attachMedia(video);
   // MEDIA_ATTACHED event is fired by hls object once MediaSource is ready
   hls.on(Hls.Events.MEDIA_ATTACHED, function () {
     console.log('video and hls.js are now bound together !');
   });
   }
   }

main()

3. notice the `Refused to load media from 'blob...` error message and that the `MEDIA_ATTACHED` callback never fires

[robwalch]

Hi @mreinstein,

This issue is closed. We need a stand-alone case with steps to repro. Your steps are a start, but is it possible to reproduce without going to walmart.com? That brings in all of the dependencies of a website that could be the cause of the issue. You'll need to isolate the issue to something we can debug.

Please fill out the Bug Report Template as part of your issue, making sure to include:

• Test stream/page (if possible)
• Steps to reproduce
• Expected behavior
• Actual behavior

If the issue is related to your stream, and you cannot share the stream, please include all the information we would need to reproduce the issue. This includes how to generate a stream that reproduces the issue.

[robwalch]

It has something to do with content security policy settings.

HLS.js does not define or detect page CSPs so this sounds like an issue on the page; If you want to use HLS.js on the page then CSPs need to be configured properly, otherwise the error described is expected. If you want HLS.js to detect a CSP that would break MSE setup, then file a feature request explaining the issue with a stand-alone test and the expected behavior.

My suggestion would be that if you know you need to operate on a page with CSPs that break HLS.js, either detect them yourself (HLS.isSupported() checks for MSE only) or handle this error and fallback to mp4 source. Looking around there might even be an attribute like default-src which you can add to your video element which may achieve what you want.