zhanll1986 / openui5-camera

OpenUI5 SAPUI5 control for accessing the device camera and capturing photos. Pure JavaScript.

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

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

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

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

Usage in your app

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

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

2. Add the following to the same view's namespace declarations: xmlns:cam="openui5.camera"

3. 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?

1. 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)

2. Clone the repository and navigate into it

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

3. Install all npm dependencies (also installs all bower dependencies)

npm install

4. 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

5. 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 - [email protected] - @tiagobalmeida

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