Getting "Not allowed to load local resource" error while trying to attach a MediaSource object as the source of a HTML5 video tag

Question

I am trying to get this example to work. It works fine when I click the link. But when I try to download the HTML file on my local machine and try the same, it is throwing this error.

Not allowed to load local resource: blob:null/6771f68d-c4b8-49a1-8352-f2c277ddfbd4

The line of code that seems to be causing the issue is this,

video.src = window.URL.createObjectURL(mediaSource);

What this line of code is doing is basically trying to set the source of the video tag media element to the MediaSource object. I have tried various permutations without much luck.

I am using Chrome Version 28.0.1500.72 m, which is the latest stable release.

I would appreciate any pointers.

Answer 1

As @dandavis has said, "run it from http: not file".

I'm posting this as an answer for the sake of organization.

For starters: Running you project from http means having a http server (such as apache or a simple node http-server) and running your project via http://localhost.