Fix webcam switch issue for IOS (#47)

Expose native video element (#44)
basst314 · Jun 16, 2019 · de87a11 · de87a11
1 parent 6c61dd7
commit de87a11
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -10,5 +10,5 @@
 <link rel="stylesheet" href="styles.09e2c710755c8867a460.css"></head>
 <body>
   <appRoot></appRoot>
-<script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"></script><script src="polyfills-es2015.43244fb1bca8dedd392f.js" type="module"></script><script src="runtime-es5.741402d1d47331ce975c.js" nomodule></script><script src="polyfills-es5.c31392a910a7a6d6981c.js" nomodule></script><script src="main-es2015.ca97c680fc9baf6336fb.js" type="module"></script><script src="main-es5.797abddb5dfe48b80f48.js" nomodule></script></body>
+<script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"></script><script src="polyfills-es2015.43244fb1bca8dedd392f.js" type="module"></script><script src="runtime-es5.741402d1d47331ce975c.js" nomodule></script><script src="polyfills-es5.c31392a910a7a6d6981c.js" nomodule></script><script src="main-es2015.e114a13b21c7c65caa7f.js" type="module"></script><script src="main-es5.bd47186c72c3106dc703.js" nomodule></script></body>
 </html>
diff --git a/docs/main-es2015.ca97c680fc9baf6336fb.js → docs/main-es2015.e114a13b21c7c65caa7f.js b/docs/main-es2015.ca97c680fc9baf6336fb.js → docs/main-es2015.e114a13b21c7c65caa7f.js
diff --git a/docs/main-es5.797abddb5dfe48b80f48.js → docs/main-es5.bd47186c72c3106dc703.js b/docs/main-es5.797abddb5dfe48b80f48.js → docs/main-es5.bd47186c72c3106dc703.js
diff --git a/src/app/modules/webcam/webcam/webcam.component.ts b/src/app/modules/webcam/webcam/webcam.component.ts
@@ -206,7 +206,7 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
    */
   public takeSnapshot(): void {
     // set canvas size to actual video size
-    const _video = this.video.nativeElement;
+    const _video = this.nativeVideoElement;
     const dimensions = {width: this.width, height: this.height};
     if (_video.videoWidth) {
       dimensions.width = _video.videoWidth;
@@ -219,7 +219,7 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
 
     // paint snapshot image to canvas
     const context2d = _canvas.getContext('2d');
-    context2d.drawImage(this.video.nativeElement, 0, 0);
+    context2d.drawImage(_video, 0, 0);
 
     // read canvas content as image
     const mimeType: string = this.imageType ? this.imageType : WebcamComponent.DEFAULT_IMAGE_TYPE;
@@ -286,12 +286,16 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
     return classes.trim();
   }
 
+  public get nativeVideoElement() {
+    return this.video.nativeElement;
+  }
+
   /**
    * Returns the video aspect ratio of the active video stream
    */
   private getVideoAspectRatio(): number {
     // calculate ratio from video element dimensions if present
-    const videoElement = this.video.nativeElement;
+    const videoElement = this.nativeVideoElement;
     if (videoElement.videoWidth && videoElement.videoWidth > 0 &&
       videoElement.videoHeight && videoElement.videoHeight > 0) {
 
@@ -306,7 +310,7 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
    * Init webcam live view
    */
   private initWebcam(deviceId: string, userVideoTrackConstraints: MediaTrackConstraints) {
-    const _video = this.video.nativeElement;
+    const _video = this.nativeVideoElement;
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
 
       // merge deviceId -> userVideoTrackConstraints
@@ -325,6 +329,10 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
           this.videoInitialized = true;
 
           this.cameraSwitched.next(activeDeviceId);
+
+          // Initial detect may run before user gave permissions, returning no deviceIds. This prevents later camera switches. (#47)
+          // Run detect once again within getUserMedia callback, to make sure this time we have permissions and get deviceIds.
+          this.detectAvailableDevices();
         })
         .catch((err: MediaStreamError) => {
           this.initError.next(<WebcamInitError>{message: err.message, mediaStreamError: err});