0

In a webbrowser preferably google chrome, using JavaScript can we access and manipulate the data fetched by various html media elements like img, video? And save the resource or some data using javascript?

I want to do something like this

var myvideo=document.getElementById("myvideo");
if(window.save(myvideo.data,"myvideo.mp4")){
  console.log("video saved successfully.");
}else{
  console.log("save operation canceled by user");
}

and

var myfile="Some text file content";
if(window.save(myfile,"myfile.txt")){
  console.log("video saved successfully.");
}else{
  console.log("save operation canceled by user");
}

did any popular browser capable of doing this and how? Is it in HTML5 standard? Though the save is done on users permission Are there still any security issues in implementing above?

--EDIT--

Google chrome extension,singleFile is able to do that. It is inserting raw media data into html file. Am I wrong? If so what is the singleFile's approach in obtaining the raw media data.

Necktwi
  • 2,483
  • 7
  • 39
  • 62
  • What exactly do you want to manipulate? – Pekka Sep 08 '13 at 14:55
  • @Pekka an image or a video – Necktwi Sep 08 '13 at 14:56
  • May be I will write a javascript decoder and a encoder for images. – Necktwi Sep 08 '13 at 14:59
  • Ugh. That may be *theoretically* possible, but JS in the browser doesn't sound like the ideal envronment to do that – Pekka Sep 08 '13 at 15:09
  • I asked the question 'cos I thought its easy to implement so it would have been implemented. Browser should just give access to byte data pointed by a property of a resource. @Pekka I wonder y it can't be ideal environment despite the beauty of javscript. – Necktwi Sep 09 '13 at 12:04

1 Answers1

0

You could, probably, but not easily.

In a webbrowser preferably google chrome, using JavaScript can we access and manipulate the data fetched by various html media elements like img, video?

It's possible to access and manipulate DOM elements with Javascript. That means you could change the source of an image like this:

$( "img" ).attr( "src", "some other url" );

However it is not possible (client-side) to access a pixel of the loaded image and alter its color.

And save the resource or some data using javascript?

This is going to be a bit of a hack, but I think so, yes. In HTML5 there is a download attribute for anchor tags. Instead of following the link, the browser will open a save dialog for the resource. To programatically save a resource, you will have to trigger a click on its link from Javascript. It will not work reliably in all browsers, but at least in Chrome.

So your algorithm will go something like this:

  1. Find all media elements in page
  2. Wrap an anchor tag with download attribute around them
  3. One after another, simulate a click.

See this fiddle.

This will work fine for one media element on a page, but probably break for more. The save dialog is not part of the browser, but the operating system, so you won't find out if a user already saved something. The best you could do is set a long enough timeout before triggering the next click.

Note that this technique will work with HTML5 video/audio, where the media source is visible in the markup, but not with Flash or Silverlight.

I'd also like to point out that this functionality is better suited to be implemented on a server, see web scraping.

Community
  • 1
  • 1
prayerslayer
  • 883
  • 9
  • 13
  • thanq for mentioning html5 `download` attribute. I don't want to access pixel data of an image but wanna access image data fetched in http protocol. – Necktwi Sep 08 '13 at 15:05
  • How is the "image data fetched in http protocol" different from the image that's displayed on the page? Also I'm pretty sure you don't have access to raw network data via Javascript for security reasons. – prayerslayer Sep 08 '13 at 15:14