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.

Answer 2

Install http-server globally using npm command(provided you have installed Node.js in your system beforehand). Navigate to your file folder in CMD and type http-server . Your app should run in localhost:8080 .