How can i save a webcam screenshot to a website?
I know you can save it to your hard drive using:
var browseFileReference = new FileReference();
browseFileReference.save(video);
But how would i go about it to save this image to a website, lets say flickr or facebook or something.
Any help?
You should have a look at existing AS3 library.
Flickr : http://code.google.com/p/as3flickrlib/
Facebook : http://www.adobe.com/devnet/facebook.html
The basic steps are, generate the bitmap data for the region you want, use one of the F/OSS libraries to generate PNG or JPEG data, base64 the data, and then generate a URLRequest with the encoded image as POST data, which can hen be handled server side. I would have to dig through projects to find the proper classes I have to do this to show a real example, but this is actually really simple. Each of the steps I outline can be implemented in a few lines of code using existing libraries.
You can save the screenshot of the webcam as ByteArray. Make sure you have the JPGEncoder class (from the as3corelib).
// bitmapdata
var btmData:BitmapData = new BitmapData(video.width, video.height);
btmData.draw(video);
// make jpg
var jpgEncoder:JPGEncoder = new JPGEncoder(90);
var jpgBytes:ByteArray = jpgEncoder.encode(btmData);
Now, you can use the as3flickrlib to connect with Flickr. Danny Patterson wrote a nice article to upload a ByteArray to Flickr with this library, see http://blog.dannypatterson.net/2009/08/upload-bytearray-to-flickr/
Edit: I would first try to upload it to Facebook, that is much easier than uploading an image to Flickr.
Related
I can't seem to figure out why my image which lives in AWS is not displaying in my HTML. I'ts simply displaying a white image with the small icon in the top right noting there is no image found (And no alt attribute).
If this is the URL to the image:
https://s3.amazonaws.com/mng-moment/test/PA/40.0103647%2C-75.2625353_1492304397972.jpg
Then shouldn't the img src be
https://s3.amazonaws.com/mng-moment/test/PA/40.0103647,-75.2625353_1492304397972.jpg
I have also tried to match the URL exactly. I tried to print out in the HTML exactly what is in the img src. I tried to take out the extension along with other miscellaneous things.
I have done some research on this and it seems like I'm doing it correctly, although clearly i'm not. Any idea what is wrong here?
Thanks for any and all help.
EDIT:
This is the code where I create the object to upload:
var blob = new Blob([dataURItoBlob(picture)], {type: 'image/jpg'});
var file = new File([blob], moment.location);
return core.upload(moment.key, moment);
I figured this out. It was this thing:
var blob = new Blob([dataURItoBlob(picture)], {type: 'image/jpg'});
var file = new File([blob], moment.location);
return core.upload(moment.key, moment);
I was foolishly not passing in the file into my upload function even though I went through the trouble of creating it. It must've been a refactoring mistake I made.
My page generates a URL like this: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f" How can I convert it to a normal address?
I'm using it as an <img>'s src attribute.
A URL that was created from a JavaScript Blob can not be converted to a "normal" URL.
A blob: URL does not refer to data the exists on the server, it refers to data that your browser currently has in memory, for the current page. It will not be available on other pages, it will not be available in other browsers, and it will not be available from other computers.
Therefore it does not make sense, in general, to convert a Blob URL to a "normal" URL. If you wanted an ordinary URL, you would have to send the data from the browser to a server and have the server make it available like an ordinary file.
It is possible convert a blob: URL into a data: URL, at least in Chrome. You can use an AJAX request to "fetch" the data from the blob: URL (even though it's really just pulling it out of your browser's memory, not making an HTTP request).
Here's an example:
var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);
var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';
xhr.onload = function() {
var recoveredBlob = xhr.response;
var reader = new FileReader;
reader.onload = function() {
var blobAsDataUrl = reader.result;
window.location = blobAsDataUrl;
};
reader.readAsDataURL(recoveredBlob);
};
xhr.open('GET', blobUrl);
xhr.send();
data: URLs are probably not what you mean by "normal" and can be problematically large. However they do work like normal URLs in that they can be shared; they're not specific to the current browser or session.
another way to create a data url from blob url may be using canvas.
var canvas = document.createElement("canvas")
var context = canvas.getContext("2d")
context.drawImage(img, 0, 0) // i assume that img.src is your blob url
var dataurl = canvas.toDataURL("your prefer type", your prefer quality)
as what i saw in mdn, canvas.toDataURL is supported well by browsers. (except ie<9, always ie<9)
For those who came here looking for a way to download a blob url video / audio, this answer worked for me. In short, you would need to find an *.m3u8 file on the desired web page through Chrome -> Network tab and paste it into a VLC player.
Another guide shows you how to save a stream with the VLC Player.
UPDATE:
An alternative way of downloading the videos from a blob url is by using the mass downloader and joining the files together.
Download Videos Part
Open network tab in chrome dev tools
Reload the webpage
Filter .m3u8 files
Look through all filtered files and find the playlist of the '.ts' files. It should look something like this:
You need to extract those links somehow. Either download and edit the file manually OR use any other method you like. As you can see, those links are very similar, the only thing that differs is the serial number of the video: 's-0-v1-a1.ts', 's-1-v1-a1.ts' etc.
https://some-website.net/del/8cf.m3u8/s-0-v1-a1.ts
https://some-website.net/del/8cf.m3u8/s-1-v1-a1.ts
https://some-website.net/del/8cf.m3u8/s-2-v1-a1.ts
and so on up to the last link in the .m3u8 playlist file. These .ts files are actually your video. You need to download all of them.
For bulk downloading I prefer using the Simple Mass Downloader extension for Chrome (https://chrome.google.com/webstore/detail/simple-mass-downloader/abdkkegmcbiomijcbdaodaflgehfffed)
If you opt in for the Simple Mass Downloader, you need to:
a. Select a Pattern URL
b. Enter your link in the address field with only one modification: that part of the link that is changing for each next video needs to be replaced with the pattern in square brackets [0:400] where 0 is the first file name and 400 is the last one. So your link should look something like this https://some-website.net/del/8cf.m3u8/s-[0:400]-v1-a1.ts.
Afterwards hit the Import button to add these links into the Download List of Mass Downloader.
c. The next action may ask you for the destination folder for EACH video you download. So it is highly recommended to specify the default download folder in Chrome Settings and disable the Select Destination option in Chrome Settings as well. This will save you a lot of time! Additionally you may want you specify the folder where these files will go to:
c1. Click on Select All checkbox to select all files from the Download List.
c2. Click on the Download button in the bottom right corner of the SMD extension window. It will take you to next tab to start downloading
c3. Hit Start selected. This will download all vids automatically into the download folder.
That is it! Simply wait till all files are downloaded and you can watch them via the VLC Player or any other player that supports the .ts format. However, if you want to have one video instead of those you have downloaded, you need to join all these mini-videos together
Joining Videos Part
Since I am working on Mac, I am not aware of how you would do this on Windows. If you are the Windows user and you want to merge the videos, feel free to google for the windows solution. The next steps are applicable for Mac only.
Open Terminal in the folder you want the new video to be saved in
Type: cat and hit space
Open the folder where you downloaded your .ts video. Select all .ts videos that you want to join (use your mouse or cmd+A)
Drag and drop them into the terminal
Hit space
Hit >
Hit Space
Type the name of the new video, e.g. my_new_video.ts. Please note that the format has to be the same as in the original videos, otherwise it will take long time to convert and even may fail!
Hit Enter. Wait for the terminal to finish the joining process and enjoy watching your video!
Found this answer here and wanted to reference it as it appear much cleaner than the accepted answer:
function blobToDataURL(blob, callback) {
var fileReader = new FileReader();
fileReader.onload = function(e) {callback(e.target.result);}
fileReader.readAsDataURL(blob);
}
I'm very late to the party.
If you want to download the content you can simply use fetch now
fetch(blobURL)
.then(res => res.blob())
.then(blob => /*do what you want with the blob here*/)
Here the solution:
let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
let videoURL = window.URL.createObjectURL(blob);
const blobF = await fetch(videoURL).then(res => res.blob())
As the previous answer have said, there is no way to decode it back to url, even when you try to see it from the chrome devtools panel, the url may be still encoded as blob.
However, it's possible to get the data, another way to obtain the data is to put it into an anchor and directly download it.
<a href="blob:http://example.com/xxxx-xxxx-xxxx-xxxx" download>download</a>
Insert this to the page containing blob url and click the button, you get the content.
Another way is to intercept the ajax call via a proxy server, then you could view the true image url.
I want to embed an HTTP call which returns a png image into an html page.
I will run the page on github's gh-pages if that makes a difference.
The url is: http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png
Note that sometimes the url doesn't return the png as the service is sometimes down.
I want to call that url using POST method, and simply return the png into the page. Ideally the http call would be run on page recycle as well.
Do I use an iframe, form, javascript?
Thanks! Scott
[I might as well answer properly]
When a server is feeding you image data and you want to load it, you might as well treat it like an image and use an img tag. The problem with this approach in your particular case is that you said that the server can sometimes be down and this would mean that if you simply appended the image without checking for a broken link first you will get that ugly broken image space.
However, the simplicity of using an image is still feasible. By using a little javascript with a load event handler you can append the image if and only if it loads successfully. If you get any kind of error code from the request the load event will never fire and you won't append a broken image.
Here's the concept in vanilla-js:
img = document.createElement("img");
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);};
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png";
You can also see it in action here: http://jsfiddle.net/BwJeC/
You could use XHR to load the binary data from the external, dynamic page and set the content of the image.
This question, is very much similar
Or this
I really don't understand why you want to POST.
Anyway if you want to query a picture with a POST data you could, may have to do a Js XHR call and return the the image as base64 and then do something like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
The best would still be to to a simple get call:
<img src="/dynamicallyGeneratedPicture" />
with a route or script that return a document of type image.
Trying to get the current URL of the website I have posted the flash object in, without using Javscript or ExternalInterface calls.
e.g.
Website Im posting in is http://some.forum.com
Website of swf is http://uploaded.to/site/of/object.swf
In my post at some.forum.com I include in the post:
[flash=100,100]http://uploaded.to/site/of/object.swf[/flash]
Unfortunately it keeps returning the url of website I initially uploaded to, and not the current forum I am linking it in.
Current used methods are:
var urlname:LocalConnection = new LocalConnection();
trace(urlname.domain());
and
var urlName:String = this.loaderInfo.url;
trace(urlName)
Both returning uploaded.to/site/of/object.swf, and not some.forum.com
How do I get my desired result?
Not sure if it applies to your scenario but have you tried BrowerManager: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64e50-7ff8.html
Something like
var browserManager:BrowserManager = BrowserManager.getInstance();
trace(browserManager.url);
Hmm. Well I've found a small workaround: Referrer.
All I need to do is get the swf to request another website that performs some javascript or php to return the URL of the referrer website.
var textLoader:URLLoader = new URLLoader()
var textReq:URLRequest = new URLRequest("http://my.site.com/findReferrer.html");
textLoader.load(textReq);
textLoader.addEventListener(Event.COMPLETE, trace(textLoader.data);
Unfortunately referrer is purely browser dependent and often doesn't work for https.
So back to square one..
I'm trying to load profile images (friend images) from Facebook with AS3 but I seem to be running into a security issue.
I'm currently using the "official" Adobe Facebook API for Actionscript 3 which works fine. However, I seem to be having trouble loading profile images when running my application in a browser. The images load fine when running in the Flash IDE.
The images are being loaded from https://graph.facebook.com and there seems to be a crossdomain.xml policy on that domain:
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" secure="false" />
<site-control permitted-cross-domain-policies="master-only" />
</cross-domain-policy>
In other sources I found that adding a ContextLoader to my Loader object when loading the image should solve the problem but this doesn't seem to be the case either:
loader = new Loader();
// add some listeners here...
loader.load( new URLRequest( "imageurl" ), new LoaderContext(true) );
I'm not quite sure how to proceed at the moment. I was hoping that the Adobe Facebook API would provide assistance in this but I can't seem to find anything that solves this issue.
Any help greatly appreciated.
UPDATE:
I just noticed that when I visit one of the images in a browser that I'm actually redirected to Facebook's CDN where the actual image is stored. When I hard-code the image url with the redirected URL I can load the image in the browser. It seems that this is not a security issue after all but a redirection issue.
If this is a redirection issue then the question would become; How can I have Flash Player load an image from a redirected URL?
UPDATE 2:
It seems that the URLRequest class has a followRedirects property which is only available in AIR.
UPDATE 3:
I'm currently using a PHP script to get me the redirected URL as a work around but this of course is far from ideal and potentially a big strain on my server.
I had the same problem and it looks like you have to manually load the crossdomain file of the domain you are redirected to in actionscript. For now, it looks like all facebook profile images are finally loaded from the domain http://profile.ak.fbcdn.net/.
I just added this line before loading the images:
Security.loadPolicyFile("http://profile.ak.fbcdn.net/crossdomain.xml");
This should allow for loading the redirected images, as long as the redirect domain does not change. ;)
You can use a URLLoader and load the image as a ByteArray. This appears to work regardless of the redirect. You can then use the ByteArray as the source for an Image/BitmapImage or use a Loader to load the bytes as you would have the image url in the first place.
For example:
var urlRequest:URLRequest = new URLRequest("http://graph.facebook.com/id/picture");
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener(Event.COMPLETE, completeHandler);
urlLoader.load(urlRequest);
function completeHandler(event:Event):void
{
var byteArray:ByteArray = loader.data;
// Then either:
bitmapImage.source = byteArray;
// or:
var loader:Loader = new Loader();
...
loader.loadBytes(byteArray);
...
}
it should be a relitively easy thing to do, all of the facebook profile images can be found by using the picture root of the graph API. like this link:
"http://graph.facebook.com/" + userid + "/picture"
I would like to confirm martin's solution here.
My case goes from testing the application on AIR platform which is fine and works great, the image loaded successfully.
But when I port it into canvas app on facebook then I face a problem, the profile images won't come along, it cannot load.
I use what martin suggest here. And if you track a url redirection, you will see that actually image profiles are located at that CDN server not facebook itself, so you need to load that domain's policy file according to actionscript's security-sandbox.
Thanks again.
totally guessing but you could use URLLoader to get the data from the redirected call, then parse it together into a picture xD
I am using two loadPolicyFile calls, as it seems there are 2 possible CDNs that facebook uses. This is working for me but of course, a generic solution is preferable, facebook might again add another CDN and things would just stop working on their own --
Security.loadPolicyFile('http://profile.ak.fbcdn.net/crossdomain.xml');
Security.loadPolicyFile('http://profile.cc.fbcdn.net/crossdomain.xml');
The URLLoader solution suggested by #Stiggler might work. I haven't tried. But it seems heavier compared to using a Loader object.
Since there are a lot of domains where Facebook stores it's photos I wrote a little script that uses the domain of the image to load the appropriate policy file:
import com.adobe.net.URI;
import flash.system.Security;
var someFacebookImageUrl:String = "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c66.66.828.828/s160x160/537210_440478782684964_233907781_n.jpg";
var uri:URI = new URI(someFacebookImageUrl);
Security.loadPolicyFile(uri.scheme + "://" + uri.authority + "/crossdomain.xml");
Nice this is that it works not only for the profile images but for all images facebook uses.
Hope this helps some of you!
PS: The URI class is part of the as3 core lib: http://code.google.com/p/as3corelib/