8 Jun 2017

Manipulate Mobile Camera and Album by JavaScript

Default blog image

In the last blog, I introduced my practice with gyro sensor and touch of mobile, remotely connecting to the web application of Forge Viewer. As promised, I am now introducing the way to access mobile camera and album by native JavaScript. This would be useful for a typical scenario of construction industry: the worker checks issues on the field, takes a photo, and submits to the administration platform.

This is also very straightforward. We simply define an DOM element of HTML as a File type, specifying it to accept image and camera.


The web page would look like :

[[{"fid":"2070","view_mode":"wysiwyg","type":"media","attributes":{"height":"400","width":"225","class":"media-element file-wysiwyg"}}]]

On PC, clicking this file button, it will be just a common functionality of choosing file, while on the mobile, it will take you to access existing album or take a new photo.

[[{"fid":"2069","view_mode":"wysiwyg","type":"media","attributes":{"height":"300","width":"169","class":"media-element file-wysiwyg"}}]]


For some small images, we could simply submit the image stream (blob). I used a class JIC to compress the source stream, in order to relieve the internet traffic when transferring. If it is a large image, it is best to upload the source image file.

[[{"fid":"2071","view_mode":"wysiwyg","type":"media","attributes":{"height":"400","width":"200","class":"media-element file-wysiwyg"}}]]

In the web application of Forge Viewer, my demo creates a panel which consumes the image blob from the server.

[[{"fid":"2072","view_mode":"wysiwyg","type":"media","attributes":{"height":"400","width":"611","class":"media-element file-wysiwyg"}}]]

The whole demo codes is available at: https://github.com/xiaodongliang/Forge-Test-Field-Mobile-Camera

Related Article

Posted By

Xiaodong Liang

Xiaodong Liang has been with Autodesk since 2007, focusing on providing programming support, consulting, training and evangelism to external developers. He started his career China and now lives in Beijing, China. Xiaodong is currently a developer consultant in the team Developer Technical Services (DevTech), the worldwide team of API gurus providing technical services through the Autodesk Developer Network. He...