Add camera access error message

components/Alert.tsx

@@ -10,7 +10,7 @@ function Alert(props: AlertProps): JSX.Element {
 
     return (
         <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 mt-5 rounded relative" role="alert">
-            <span className="block sm:inline" id="message">{props.errorMessage}</span>
+            <span className="block sm:inline pr-6" id="message">{props.errorMessage}</span>
             <span className="absolute top-0 bottom-0 right-0 px-4 py-3" onClick={props.onClose}>
         <svg className="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20">

components/Form.tsx

@@ -29,6 +29,11 @@ function Form(): JSX.Element {
 
     // Check if there is a translation and replace message accordingly
     const setErrorMessage = (message: string) => {
+        if (message == undefined) {
+            _setErrorMessage(undefined);
+            return;
+        }
+
         const translation = t('errors:'.concat(message));
         _setErrorMessage(translation !== message ? translation : message);
     };
@@ -68,7 +73,13 @@ function Form(): JSX.Element {
         const codeReader = new BrowserQRCodeReader();
 
         // Needs to be called before any camera can be accessed
-        await BrowserQRCodeReader.listVideoInputDevices();
+        const deviceList = await BrowserQRCodeReader.listVideoInputDevices();
+        
+        // Check access to camera device
+        if (deviceList.length == 0) {
+            setErrorMessage("noCameraAccess");
+            return;
+        }
 
         // Get preview Element to show camera stream
         const previewElem: HTMLVideoElement = document.querySelector('#cameraPreview');

public/locales/de/errors.yml

@@ -14,4 +14,5 @@ couldNotFindQrCode: QR-Code konnte in der ausgewählten Datei nicht gefunden wer
 invalidQrCode: Ungültiger QR-Code
 certificateType: Kein gültiger Zertifikatstyp gefunden
 invalidTestResult: Ungültiges Testergebnis
-invalidTestType: Ungültiger Testtyp
+invalidTestType: Ungültiger Testtyp
+noCameraAccess: Kein Zugriff auf die Kamera möglich. Überprüfe die Berechtigungen unter Einstellungen > Safari > Kamera.

public/locales/en/errors.yml

@@ -14,4 +14,5 @@ couldNotFindQrCode: Could not find QR Code in provided file
 invalidQrCode: Invalid QR code
 certificateType: No valid certificate type found
 invalidTestResult: Invalid test result
-invalidTestType: Invalid test type
+invalidTestType: Invalid test type
+noCameraAccess: Could not access camera. Check permissions under Settings > Safari > Camera.

public/locales/fi/errors.yml

@@ -14,4 +14,5 @@ couldNotFindQrCode: QR-koodia ei löytynyt annetusta tiedostosta
 invalidQrCode: Virheellinen QR-koodi
 certificateType: Kelvollista varmennetyyppiä ei löytynyt
 invalidTestResult: Virheellinen testitulos
-invalidTestType: Virheellinen testityyppi
+invalidTestType: Virheellinen testityyppi
+noCameraAccess: Kameraan ei päässyt käsiksi. Tarkista käyttöoikeudet kohdasta Asetukset > Safari > Kamera.

public/locales/fr/errors.yml

@@ -14,4 +14,5 @@ couldNotFindQrCode: Impossible de trouver le QR Code dans le fichier fourni
 invalidQrCode: QR Code non valide
 certificateType: Aucun type de certificat valide n'a été trouvé
 invalidTestResult: Résultat du test non valide
-invalidTestType: Type de test non valide
+invalidTestType: Type de test non valide
+noCameraAccess: Impossible d'accéder à la caméra. Vérifiez les autorisations sous Paramètres > Safari > Appareil photo.

public/locales/nl/errors.yml

@@ -14,4 +14,5 @@ couldNotFindQrCode: Kon de QR-code niet vinden in het verstrekte bestand
 invalidQrCode: Ongeldige QR-code
 certificateType: Geen geldig certificaattype gevonden
 invalidTestResult: Ongeldig testresultaat
-invalidTestType: Ongeldig testtype
+invalidTestType: Ongeldig testtype
+noCameraAccess: Kon geen toegang krijgen tot de camera. Controleer de machtigingen onder Instellingen > Safari > Camera.