Improve camera start/switch experience

Author: joshknopp

Diff for: .gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: npm install && npm run build
+    command: npm run start
+
+

Diff for: package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --host 0.0.0.0 --port 4200 --disable-host-check true",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

Diff for: src/app/document-capture/document-capture.component.html

@@ -1,7 +1,6 @@
 <div>
   <video #video autoplay></video>
   <canvas #canvas [width]="video.videoWidth" [height]="video.videoHeight"></canvas>
-  <button (click)="startCamera()">Start Camera</button>
   <button (click)="changeCamera(device)" *ngFor="let device of videoDevices">
     {{ device.label || 'Camera ' + (device.deviceId || '') }}
   </button>
@@ -17,5 +16,6 @@ <h2>Results:</h2>
     <p>Source Text: {{ sourceText }}</p>
     <p>Category: {{ category }}</p>
     <p>Tags: {{ tags.join(', ') }}</p>
+    <pre>{{ videoDevices | json }}</pre>
   </div>
 

Diff for: src/app/document-capture/document-capture.component.ts

@@ -17,7 +17,6 @@ export class DocumentCaptureComponent implements AfterViewInit {
   tags: string[] = [];
   sourceText!: string;
   videoDevices!: MediaDeviceInfo[];
-  selectedVideoDevice!: MediaDeviceInfo | null;
 
   constructor() {
     this.captures = [];
@@ -26,36 +25,33 @@ export class DocumentCaptureComponent implements AfterViewInit {
   ngAfterViewInit() {
     this.video = this.videoElement.nativeElement;
     this.canvas = this.canvasElement.nativeElement;
+    this.getCameraList();
   }
 
-  startCamera() {
+  getCameraList() {
     navigator.mediaDevices.enumerateDevices().then(devices => {
+      console.log(devices)
       this.videoDevices = devices.filter(device => device.kind === 'videoinput');
-      if (this.videoDevices.length > 0) {
-        this.selectedVideoDevice = this.videoDevices[0]; // Select the first available video device by default
-        this.startMediaStream();
-      } else {
+      if (this.videoDevices?.length == 0) {
         console.error('No video devices found.');
       }
     });
   }
 
   changeCamera(device: MediaDeviceInfo) {
-    this.selectedVideoDevice = device;
-    this.startMediaStream();
+    this.startMediaStream(device);
   }
 
-  startMediaStream() {
-    if (this.selectedVideoDevice) {
-      navigator.mediaDevices.getUserMedia({ video: { deviceId: this.selectedVideoDevice.deviceId } })
-        .then(stream => {
-          this.video.srcObject = stream;
-          this.video.play();
-        })
-        .catch(err => {
-          console.error('Error accessing video stream:', err);
-        });
-    }
+  startMediaStream(device: MediaDeviceInfo) {
+    this.video.load();
+    navigator.mediaDevices.getUserMedia({ video: { deviceId: device.deviceId } })
+      .then(stream => {
+        this.video.srcObject = stream;
+        this.video.play();
+      })
+      .catch(err => {
+        console.error('Error accessing video stream:', err);
+      });
   }  
 
   capture() {