fix(@init): capabilities empty on some devices

According to

  https://oberhofer.co/mediastreamtrack-and-its-capabilities/#queryingcapabilities

on some devices, getCapabilities only returns a non-empty object
aftersome delay. There is no appropriate event so we have to add
some constant timeout.

Author: gruhn

demo.html

@@ -33,7 +33,9 @@
         {{ errorMessage }}
       </p>
 
-      <qrcode-stream @decode="onDecode" camera="rear" @init="onInit"></qrcode-stream>
+      <qrcode-stream @decode="onDecode" :torch="torch" @init="onInit"></qrcode-stream>
+
+      <button @click="torch=!torch">Torch On/Off</button>
     </div>
   </body>
   <script>
@@ -43,7 +45,8 @@
       data() {
         return {
           decodedContent: '',
-          errorMessage: ''
+          errorMessage: '',
+          torch: false
         }
       },
 

src/misc/camera.js

@@ -1,7 +1,7 @@
 import adapterFactory from "webrtc-adapter/src/js/adapter_factory.js";
 import { StreamApiNotSupportedError, InsecureContextError } from "./errors.js";
 import { imageDataFromVideo } from "./image-data.js";
-import { eventOn } from "callforth";
+import { eventOn, timeout } from "callforth";
 
 class Camera {
   constructor(videoEl, stream) {
@@ -19,7 +19,6 @@ class Camera {
 
   getCapabilities() {
     const [track] = this.stream.getVideoTracks();
-
     return track.getCapabilities();
   }
 }
@@ -121,12 +120,18 @@ export default async function(videoEl, { camera, torch }) {
 
   await eventOn(videoEl, "loadeddata");
 
+  // According to: https://oberhofer.co/mediastreamtrack-and-its-capabilities/#queryingcapabilities
+  // On some devices, getCapabilities only returns a non-empty object after
+  // some delay. There is no appropriate event so we have to add a constant timeout
+  await timeout(500);
+
   if (torch) {
     const [track] = stream.getVideoTracks();
+    const capabilities = track.getCapabilities();
 
-    try {
-      await track.applyConstraints({ advanced: [{ torch: true }] });
-    } catch (error) {
+    if (capabilities.torch) {
+      track.applyConstraints({ advanced: [{ torch: true }] });
+    } else {
       console.warn("device does not support torch capability");
     }
   }