You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by GitBox <gi...@apache.org> on 2019/03/29 10:14:14 UTC
[GitHub] [cordova-plugin-camera] GedasGa opened a new pull request #435:
Update browser plugin
GedasGa opened a new pull request #435: Update browser plugin
URL: https://github.com/apache/cordova-plugin-camera/pull/435
<!--
Please make sure the checklist boxes are all checked before submitting the PR. The checklist is intended as a quick reference, for complete details please see our Contributor Guidelines:
http://cordova.apache.org/contribute/contribute_guidelines.html
Thanks!
-->
### Platforms affected
Browser and Electron
### Motivation and Context
<!-- Why is this change required? What problem does it solve? -->
<!-- If it fixes an open issue, please link to the issue here. -->
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
<!-- Describe your changes in detail -->
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
<!-- Please describe in detail how you tested your changes. -->
`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 `Cancel`is 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 `Cancel`is 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 `Cancel`is 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](https://help.github.com/articles/closing-issues-using-keywords/))
- [x] I've updated the documentation if necessary
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org