I was wondering how you can transfer an image from a web page to a Native Client application.
I have two main use cases:
1.) A user uploads an image from their filesystem
2.) An image is captured from the web camera and saved in a canvas element
I have looked at the documentation under imageData, but I am not sure exactly how to use this, or if that is even the right approach.
I know also that we can use the message framework to pass data, but I wasn't sure if that method was efficient in any way, for images that are least 640x480.
Yes, you can transfer image data from JS to NaCl via the PostMessage API.
var imageData = context.getImageData(0, 0, this.canvas.width, this.canvas.height);
NaClModule.postMessage(imageData.data.buffer);
In addition, you can actually hand the fileBlob URL to NaCl (also via postmessage), and using the pp::GetURL API, fetch the file directly. This will allow you to popup a file-chooser in JS, and have NaCl load the file, rather than having JS load it, and pass it over.
You should check Nacl-mounts in Nacl ports. You can load image files from the server using http2mount classes. However, as of now, I don't think there is any way to access Camera from Nacl. They are yet to release camera api.
Related
I have a learn new language site, that i want to wrap in cordova phonegap.
The app needs to work offline. I also want to make it available on the app store.
The project budget is very low. I need to find a quick way to create this app within the budget and time frame.
My question.
Is it possible to just wrap the whole site? And save it all offline.
What happens to the database? Do i need to recreate the database for the app, use sqlite ect.
Some pages will have audio files, where user can listen to the word pronunciations. What happens to the audio files. Do i need to rebuild this? Or is there a quicker way.
Can all of this be achieved by using cache?
If there is a better way of doing this please let me know.
Thanks in advance
cordova-plugin-inappbrowser provides a web browser view that displays when calling cordova.InAppBrowser.open().
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
The cordova.InAppBrowser.open() function is defined to be a drop-in
replacement for the window.open() function. Existing window.open()
calls can use the InAppBrowser window, by replacing window.open:
window.open = cordova.InAppBrowser.open;
The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs. For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova webview. The InAppBrowser is not subject to the whitelist, nor is opening links in the system browser.
I'm developing a webapp for firefox aurora (android). And i have an file input.
But when users click on the input they can't choose files from sdcard or filesystem only pictures, music or videos.
I search at MOZILLA DEVELOPER NETWORK, but couldn't find anything helpful.
In my manifest.webbapp i have device-storage permission:
"permissions": {
"device-storage:sdcard":{ "access": "readonly" }
},
I assume you are currently simply using the markup ?
The device-storage:sdcard is for a very different set of use cases really. And we don't have that implemented on Firefox for Android yet.
The list of applications being shown is just the set of applications that we're getting from the Android Intents system. I would imagine that if the user has some sort of filebrowser app installed it might respond to that intent and it'd pop up there.
But of course that's not something you can rely on in your app.
I'm honestly somewhat surprised that there's no default applications on android that provide that functionality, but I guess that's how it is. Or does someone know of a way to also get a filepicker intent that we can hook up to?
Medium term you will be able to use the DeviceStorage API. This will give you direct JS access to the sdcard which will allow you to build your own UI for choosing a file from the SD card. But that extra power comes with quite a few downsides. It's a privileged API which means that you'll have to write the app as a packaged app and you have to use CSP. And you'll have to go through the Firefox marketplace review process (all privileged apps have to go through code review).
So it's a pretty distant second choice.
Other than that there aren't any solutions. The best would of course be if there was a way we could plopp up an Android file picker, but I'm not sure if that's doable. And it's definitely not implemented yet.
According to the source code, this permission is only granted to apps that are packaged and privileged, the latter also means the app has to be signed by the Marketplace.
You can find more about packaged apps and privileged app types here:
https://developer.mozilla.org/en-US/docs/Apps/Packaged_apps
Just install an Android file manager app (https://play.google.com/store/search?q=file+manager&c=apps) and you will be able to select files from the SD card. There is no need for specific rights because this is handled automatically by the standard file input.
Accessing the SD Card can only be achieved through a privileged or certified app. Currently to my knowledge, there is no integration the system menus as you are hoping would be the case. Personally, I'm hoping that this will change.
API Documentation: https://developer.mozilla.org/en-US/docs/WebAPI/Device_Storage
You could create your own menu that mimics the the system one; in this way the user gets a seamless experience and they don't know the difference. It would require a little boilerplate though it's not insurmountable levels of boilerplate.
A quick snippet for browsing/enumerating all photos on the the SDCard:
var storage = navigator.getDeviceStorage("sdcard");
sdcard.browse = function () {
var pics = navigator.getDeviceStorage('pictures');
// Let's browse all the images available
var cursor = pics.enumerate();
cursor.onsuccess = function () {
var file = this.result;
alert("File found: " + file.name);
// Once we found a file we check if there are other results
if (!this.done) {
// Then we move to the next result, which call the cursor
// success with the next file as result.
this.continue();
}
}
cursor.onerror = function () {
alert("No files found: " + this.error);
}
};
If you would like some more details for reading, writing, and caulating available storage, I'm currently working on a little wrapper library in my spare time to work with the SDCard more easily (and handle some callbacks to integrate better with other code) in my spare time and can probably help you out.
I'm trying to run my flex application in the air runtime instead of flash runtime. It seems to work perfectly except the images. Adobe Air runtime tries to load them. Is there a way to change the root adresses for Image to server side? If possible I'd like to use the same code for flash runtime and air runtime .. "single codebase ;-)"
var icon:Image = new Image();
icon.source = "images/test.png";
regards
cyrill
Typically I would simply package the assets into the AIR app. That way the relative paths would be valid both in the web app and the desktop app. However, since you pointed out in the comments that we're talking 10000 images you'll have to find another solution.
What you need is a variable that is configurable for each type of project. The final code to access your images should look like:
var icon:Image = new Image();
icon.source = rootUrl + "/images/test.png";
That rootUrl may be "" for the web app, and "http://www.mydomain.com" for the desktop app. Or it could be the absolute path in both cases. It doesn't matter: we don't want to hardcode that URL into our application.
Create a .properties file (or XML, or JSON; whatever configuration file you like) that contains the value for rootUrl and read that into your application model. This configuration file can be packaged into the AIR app.
A .properties file will look like this:
#myapp.properties
rootUrl=http://www.mydomain.com
For reading the file, you could use AIR's file streaming capabilities, but I suggest you load it the old-fashioned way with a URLLoader: this way it'll work both in the web and the desktop app.
i have been working on a Photoshop UI project and also working with Flash Builder for about 3 weeks and i can't find a solution to a communication problem. Here are some details about the issue; if you are interested in helping me, thanks.
The main frame of the UI is Extendscript
I have an as3 swf which needs to load a local JPG file dynamicly, I
assume this is a "Access Local Files Only" situation for Flash.
The same SWF needs to communicate with Extendscript, so i load it into
a FLEX app dynamicly via SWFLoader and it passes some variables to,
and triggers some functions in FLEX via a "myFlexParent" object.
Flex is the bridge between Flash and Extendscript so it passes the
variables and functions to Extendscript JSX code via
Externalinterface.call or CSXSInterface.instance.evalScript().
This is where i'm STUCK. I guess ExternalInterface calls or CSXSInterface.instance.evalScript() are threated as a network operation and they don't work if i set the compile option "-use-network=false" in flex. Bu otherwise the local JPG file cannot be loaded.
Adding locations in the Settings Manager wont work for me because i'm going to turn the UI into an Extension and it should be easy to install.
I guess i'm trying to find a way to establish 2 way communication between FLEX and ExtendScript, that would be interpreted by flash player as a LOCAL communication, which actually is.
I'll appreciate any bit of information. Thanks.
ExternalInterface is going to be considered a network call and setting the -use-network=false will break those calls down. This is due to the security sandbox. If it was allowed then the flash app could be used with some simple AJAX to turn a non-network app into a network app very easily.
Adobe doc's say:
This communication relies on the domain-based security restrictions
that the allowScriptAccess and allowNetworking properties define. You
set the values of the allowScriptAccess and allowNetworking properties
in the SWF file’s wrapper.
Reference link:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf6167e-7fff.html#WS2db454920e96a9e51e63e3d11c0bf6167e-7ff5
Look into changing your app into an AIR app as you will be able to do both network and local file operations (different security model since the user installs the application).
So I created an ASP.NET 4 application in VS2010, that needs to play sound to the end user, and it is working perfectly in my local development environment. The problem is the sound resource nor the Resources.resx is not being published to the server. Any idea why?
What I did:
1) Under Project Properties Recources I added my sound resource called: soundbyte (containing soundbyte.wav). I noticed this creates a Resource folder with the wav file and under my project a Resources.resx file referencing the file
2) In my code I play the file as follows:
Dim audioFile = My.Resources. soundbyte
Dim player = New Media.SoundPlayer(audioFile)
player.Load()
player.Play()
In the Visual Studio Solution Explorer right-click on Resources.resx and select Properties. Build Action. Set to content.
EDIT: The following resource might also help.
http://blog.andreloker.de/post/2010/07/02/Visual-Studio-default-build-action-for-non-default-file-types.aspx
Ultimately, I found a way to play the sound to the client browser (as opposed to the server the asp app is running on) was to follow the techniques in this example: http://www.vbdotnetheaven.com/UploadFile/scottlysle/PlaySoundsInASPX09032006083212AM/PlaySoundsInASPX.aspx
But I found an even better way in my case was to use Javascript, which doesnt' require the Resources technique.
simply embed the sound on the page after the tag:
<embed src="Sounds/jump.wav" autostart=false width=1 height=1 id="sound1" enablejavascript="true">
Then in javascript setup the function:
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Play();
}
Finally play the sound in the browser as needed in Javascript:
EvalSound('sound1');