Add pr https://github.com/firvida

Allow to get high quality pictures bensonruan#29 This was easier than actually building upon the pr
MV-GH · Dec 23, 2021 · d1246ad · d1246ad
1 parent 0bcf89b
commit d1246ad
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/dist/webcam-easy.js b/dist/webcam-easy.js
diff --git a/src/webcam-easy.js b/src/webcam-easy.js
@@ -1,15 +1,21 @@
 export default class Webcam {
     constructor(webcamElement, facingMode = 'user', canvasElement = null, snapSoundElement = null) {
         this._webcamElement = webcamElement;
-        this._webcamElement.width = this._webcamElement.width || 640;
-        this._webcamElement.height = this._webcamElement.height || this._webcamElement.width * (3 / 4);
+        this._webcamElement.width = this._webcamElement.width || screen.availWidth;
+        this._webcamElement.height = this._webcamElement.height || screen.availHeight;
         this._facingMode = facingMode;
         this._webcamList = [];
         this._streamList = [];
         this._selectedDeviceId = '';
         this._canvasElement = canvasElement;
         this._snapSoundElement = snapSoundElement;
         this._horizontalFlipFactor = 1;
+        const self = this;
+
+        window.addEventListener("resize", function () {
+            self._webcamElement.width = screen.availWidth;
+            self._webcamElement.height = screen.availHeight;
+        }, false);
     }
 
     get facingMode() {
@@ -35,14 +41,20 @@ export default class Webcam {
     /* Get all video input devices info */
     getVideoInputs(mediaDevices) {
         this._webcamList = [];
-        mediaDevices.forEach(mediaDevice => mediaDevice.kind === 'videoinput' && this._webcamList.push(mediaDevice));
-        this._webcamList.length === 1 && (this._facingMode = 'user');
+        mediaDevices
+            .filter(mediaDevice => mediaDevice.kind === 'videoinput')
+            .forEach(mediaDevice => this._webcamList.push(mediaDevice));
+
+        if (this._webcamList.length === 1) {
+            this._facingMode = 'user';
+        }
         return this._webcamList;
     }
 
     /* Get media constraints */
     getMediaConstraints() {
-        const videoConstraints = {};
+        /* Try to get a media stream that takes at least 1080p pictures */
+        const videoConstraints = {height: {min: 1080}};
         if (this._selectedDeviceId === '') {
             videoConstraints.facingMode = this._facingMode;
         } else {
@@ -89,7 +101,7 @@ export default class Webcam {
     */
     start(startStream = true) {
         this.stop();
-        return this.info().then( _ => { //get all video input devices info
+        return this.info().then(_ => { //get all video input devices info
             this.selectCamera(); //select camera based on facingMode
             if (startStream) {
                 return this.stream();
@@ -107,8 +119,13 @@ export default class Webcam {
     /* Start streaming webcam to video element */
     stream() {
         return navigator.mediaDevices.getUserMedia(this.getMediaConstraints()).then(stream => {
+            const self = this;
             this._streamList.push(stream);
             this._webcamElement.srcObject = stream;
+            this._webcamElement.onloadedmetadata = function() {
+                self.snapHeight = this.videoHeight;
+                self.snapWidth = this.videoWidth;
+            }
             if (this._facingMode === 'user' && !this._isStopped) this._horizontalFlipFactor = -1;
             this.calibrateWebCamElement();
             delete this._isStopped;
@@ -132,10 +149,10 @@ export default class Webcam {
             this._snapSoundElement.currentTime = 0;
             this._snapSoundElement.play();
         }
-        this._canvasElement.height = this._webcamElement.scrollHeight;
-        this._canvasElement.width = this._webcamElement.scrollWidth;
+        this._canvasElement.width = this.snapWidth || this._webcamElement.scrollWidth;
+        this._canvasElement.height = this.snapHeight || this._webcamElement.scrollHeight;
         const context = this._canvasElement.getContext('2d');
-        if(this._horizontalFlipFactor === -1){
+        if (this._horizontalFlipFactor === -1) {
             context.translate(this._canvasElement.width, 0);
             context.scale(-1, 1);
         }