Update browser plugin

[GedasGa]

Platforms affected

Browser and Electron

Motivation and Context

Using the camera plugin with the Browser platform you can not specify the location, where the camera opens. Once you call navigator.camera.getPicture, for example, from your index.js with sourceType: Camera.PictureSourceType.CAMERA option, it creates a container and opens the Camera in it.

The problem is, the container with the video is always appended to the document.body and the user has no control of it, except the width and height. The only way to customize its style is by selecting cordova-camera-capture class and applying your styles. Besides, this makes close impossible to open the camera inside a modal, unless you're willing to do crazy DOM manipulation after you call navigator.camera.getPicture method. Same applies for the capture button.

Moreover, I'm missing the Cancel/Close button because once you open the camera, now there's no way to close it unless you take a picture.

Similarly when you call navigator.camera.getPicture, for example, from your index.js with sourceType: Camera.PictureSourceType.PHOTOLIBRARY or sourceType: Camera.PictureSourceType. SAVEDPHOTOALBUM option, it creates the input field.This field is also appended to the document.body and the user has no control of it.

I've felt, the need to allow the user to choose where he wants to open the camera, which capture/ cancel button or which input field he wants to use. For example, the user could create a container element and provide us with the ID of the element, where he wants to open the camera. This would give the user more control of the camera plugin and let easier modify its container. This would allow the user to easily open the Camera in a modal or where ever he wants.

Description

Allow users to set 4 additional options: - customCameraContainer (id of custom camera's container element) - customCaptureButton (id of custom camera's capture button) - customCancelButton (id of custom camera's cancel button) - customSourceInput (id of the custom source input element, when using different mode than the default sourceType)

The default values of these options are null. If the user does not provide the ID of a custom element, the *default element will be used.

Besides, these changes, I've refactored the code to use const and let instead of var. Also, I've broken down big function to functions smaller.

Testing

npm t

I've already tested the code manually.

Also tested the following cases manually.

• Calling navigator.camera.getPicture with no options:

• Results: Once function is called, it create the following container. Streams a video form the Camera.

  • If Capture is clicked, it returns the image data as base64, stops video stream and deletes the <div> element.
  • If Cancelis clicked, it stops video stream and deletes the <div> element.

<div class="cordova-camera-capture" style="position: relative; z-index: 2147483647;">
    <video width="320" height="240" src="blob:file:///90647c34-f521-4c8d-9df4-1224f60c981e"></video>
    <button>Capture</button>
    <button>Cancel</button>
</div>

---

• Calling navigator.camera.getPicture with options:

    sourceType: Camera.PictureSourceType.PHOTOLIBRARY

• Results: Once function is called, it create the following input field.
  • If Input is clicked, it open default file manager and allows to upload 1 image. Return the image data as a callback.

<input class="cordova-camera-select" type="file" name="files[]" style="position: relative; z-index: 2147483647;">

---

• Calling navigator.camera.getPicture with options:

    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    customCancelButton: 'cordova-source-input'
    

• Results: Once function is called, it create the following input field.
  • If Input is clicked, it open default file manager and allows to upload 1 image. Return the image data as a callback.

<input class="cordova-source-input" type="file" name="files[]">

---

• Calling navigator.camera.getPicture with options:

    customCameraContainer: 'cordova-camera-preview',

• Results: Once function is called, it create the following container. Streams a video form the Camera.
  • If Capture is clicked, it returns the image data as base64, stops video stream and deletes everything inside <div> element.
  • If Cancelis clicked, it stops video stream and deletes the <div> everything inside element.

<div id="cordova-camera-preview">
    <video width="320" height="240" src="blob:file:///90647c34-f521-4c8d-9df4-1224f60c981e"></video>
    <button>Capture</button>
    <button>Cancel</button>
</div>

---

• Calling navigator.camera.getPicture with options:

    customCameraContainer: 'cordova-camera-preview',
    customCaptureButton: 'cordova-camera-capture',
    customCancelButton: 'cordova-camera-cancel'

• Results: Once function is called, it create the following container. Streams a video form the Camera.
  • If Capture is clicked, it returns the image data as base64, stops video stream and deletes the <video> element.
  • If Cancelis clicked, it stops video stream and deletes the <video> element.

<div id="cordova-camera-preview">
    <video width="320" height="240" src="blob:file:///90647c34-f521-4c8d-9df4-1224f60c981e"></video>
    <button id="cordova-camera-capture">Capture</button>
    <button  id="cordova-camera-cancel">Cancel</button>
</div>

Checklist

• [x] I've run the tests to see all new and existing tests pass
• [ ] I added automated test coverage as appropriate for this change
• [ ] Commit is prefixed with (platform) if this change only applies to one platform (e.g. (android))
• [ ] If this Pull Request resolves an issue, I linked to the issue in the text above (and used the correct keyword to close issues using keywords)
• [x] I've updated the documentation if necessary

[baibhavprdn]

Any idea when this feature will be included? This is exactly the thing I've been needing in my app.

[timbru31]

@baibhavprdn - No. As you can see, there are still unresolved discussions that need to be worked on first. Generally: No ETA on features, bugs and new releases.