OpenUI5-Camera

An UI5 control which uses the HTML5 media capture API to access the device's camera. The control renders a live camera preview and can take pictures when the users clicks/taps on it. This is a work in progress so feature set is still very basic.

Demo

Please check here

TODO

Add an optional button instead of clicking on the preview only
Allow the image format to be configurable
Allow an easy way to get the actual image pixels for manipulation
Configurable camera (front-facing vs back-facing)
Think about video and audio streams

Usage

To use it you must first install this code in your app.

Instalation

Make sure your app has a package.json at the root. If it does not, do npm init and follow the prompts.
Do npm install openui5-camera at the root of your project. This will pull this code into a subfolder named node_modules.
Copy file node_modules\openui5-camera\dist\openui5\camera\library-preload.js into thirdparty\openui5\camera\library-preload.js (create folders as necessary).
In your manifest, declare a dependency to this control by adding the following inside sap.ui5:

"resourceRoots": {
   "openui5.camera": "./thirdparty/openui5/camera/"
}

Check test/demo/manifest.json if you're unclear about the previous step.

Usage in your app

In the view you want to display the camera preview, insert the following:

<cam:Camera
    id="idCamera"
    width="800"
    height="600"
    snapshot=".onSnapshot" />

Add the following to the same view's namespace declarations: xmlns:cam="openui5.camera"
In the corresponding controller, add an event handler. This function will be called everytime the user clicks/taps the preview. It contains the picture in PNG format encoded in base64 (so it is a character string).

 onSnapshot: function (oEvent) {
    // The image is inside oEvent, on the image parameter,
    // let's grab it.
    var sSnapshot = oEvent.getParameter("image")});
    // Do something with it!
    // As you see in the demo, you can attach it directly to a src of an Image. 
    // Because it is already a text string it is also easy to POST to a server inside a json message. 
},

Found a bug? Want to contribute to this project?

Install node.js (get it from nodejs.org).

If working behind a proxy, you need to configure it properly (HTTP_PROXY / HTTPS_PROXY / NO_PROXY environment variables)

Clone the repository and navigate into it

git clone https://github.com/jumpifzero/openui5-camera
cd openui5-camera

Install all npm dependencies (also installs all bower dependencies)

npm install

Run npm start or grunt to lint, build and run a local server (have a look into Gruntfile.js to see all the tasks).

grunt

Open a test page in your browser: http://localhost:8080/test/demo/index.html Attention: In Chrome, the camera API is blocked when using http as the protocol. For this reason, you have to either disable web security or setup a self-signed https local server.

Contributing

Contributions are welcomed. Please use a feature branch and don't forget to include your name (alphabetical order) in the list below.

Contributors

Tiago Almeida - jumpifzero@gmail.com - @tiagobalmeida

@stermi repo openui5-chartjs was also critical as an example, so thanks @stermi and all other UI5Lab contributors :)

Michadelic/openui5-camera