+
@@ -53,6 +55,7 @@ export class TangyPhotoCapture extends PolymerElement {
@@ -81,6 +84,11 @@ export class TangyPhotoCapture extends PolymerElement {
value: 256,
reflectToAttribute: true
},
+ label: {
+ type: String,
+ observer: 'reflect',
+ value: ''
+ },
hintText: {
type: String,
observer: 'onHintTextChange',
@@ -152,7 +160,12 @@ export class TangyPhotoCapture extends PolymerElement {
type: Boolean,
value: false,
reflectToAttribute: true
- }
+ },
+ front: {
+ type: Boolean,
+ value: false,
+ reflectToAttribute: true
+ },
}
}
@@ -161,6 +174,11 @@ export class TangyPhotoCapture extends PolymerElement {
this.shadowRoot.querySelector('#qnum-number').innerHTML = this.hasAttribute('question-number')
? `
`
: ''
+ let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
+ let devices = navigator.mediaDevices.enumerateDevices().then(function(devices) {
+ var arrayLength = devices.length;
+ })
+ this.constraints = {video: { facingMode: { exact: "environment" } }}
}
ready() {
@@ -170,13 +188,27 @@ export class TangyPhotoCapture extends PolymerElement {
accept: t('accept'),
clear: t('clear')
}
+ this.shadowRoot.querySelector('#label').innerHTML = this.label
// Start streaming video
- navigator.mediaDevices.getUserMedia({video: { facingMode: { exact: "environment" } }})
+ const constraints = this.getConstraints()
+ navigator.mediaDevices.getUserMedia(constraints)
.then(mediaStream => {
this.shadowRoot.querySelector('video').srcObject = mediaStream;
const track = mediaStream.getVideoTracks()[0];
this.imageCapture = new ImageCapture(track);
- })
+ }).catch(error => {
+ if (error.constraint && error.constraint === 'facingMode') {
+ navigator.mediaDevices.getUserMedia({video: true})
+ .then(mediaStream => {
+ this.shadowRoot.querySelector('video').srcObject = mediaStream;
+ const track = mediaStream.getVideoTracks()[0];
+ this.imageCapture = new ImageCapture(track);
+ });
+ } else {
+ console.log("error: " + error)
+ }
+ }
+ )
if (this.value) {
this.shadowRoot.querySelector('video').style.display = 'none'
@@ -253,17 +285,42 @@ export class TangyPhotoCapture extends PolymerElement {
async acceptPhoto() {
// Convert blob to base64 string
- // https://stackoverflow.com/questions/18650168/convert-blob-to-base64/61226119#61226119
- const reader = new FileReader();
- reader.readAsDataURL(this.blob);
- this.value = await new Promise(resolve => {
- reader.onloadend = () => resolve(reader.result);
- });
+ const arrayBuffer = await this.blob.arrayBuffer()
+ // convert arrayBuffer to a base64String
+ const base64String = window.btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
+ // turn it into a data:image
+ const nudata = 'data:image/jpeg;base64,' + base64String
+ this.value = nudata
this.shadowRoot.querySelector('#capture-button').setAttribute('disabled', '')
this.shadowRoot.querySelector('#accept-button').setAttribute('disabled', '')
}
+
+
+ getConstraints() {
+ if (this.front) {
+ return {video: { facingMode: { exact: "user" } }}
+ } else {
+ return {video: { facingMode: { exact: "environment" } }}
+ }
+ }
+
+ toggleCamera() {
+ if (this.front) {
+ this.front = false
+ } else {
+ this.front = true
+ }
+ const constraints = this.getConstraints()
+ navigator.mediaDevices.getUserMedia(constraints)
+ .then(mediaStream => {
+ this.shadowRoot.querySelector('video').srcObject = mediaStream;
+ const track = mediaStream.getVideoTracks()[0];
+ this.imageCapture = new ImageCapture(track);
+ })
+ }
+
onDiscrepancyChange(value) {
this.shadowRoot.querySelector('#discrepancy-text').innerHTML = this.hasDiscrepancy
? `
${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''}
`