Manipulate Mobile Camera and Album by JavaScript

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