Skip to content
Snippets Groups Projects
Verified Commit ef2d3ba6 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

feat: Enhance camera control with device selection and error handling

Summary of changes
- Added functionality to enumerate video input devices and switch between cameras if multiple are available.
- Included an error message display for cases when no camera is found.
- Added styling for the newly introduced error message.

Changes
- In `camera-capture.mjs`:
  - Implemented `navigator.mediaDevices.enumerateDevices()` to fetch available cameras and create a dropdown for selection when more than one camera is present.
  - Modified the `startCameraWithDeviceId` function to initialize the camera based on the selected device ID.
  - Enhanced error handling by adding a user-facing message if no cameras are detected.

Changes
- In `camera-capture.pcss`:
  - Introduced a new class `.camera-not-supported-text` for consistent error message styling.

- In `camera-capture.mjs`:
  - Reformatted code for better readability and consistency in style, including standardizing import statements.

These changes improve the user experience by allowing flexibility in camera selection and providing better feedback in the event of errors, ensuring that users aren't left in the dark when things go awry.
parent b7d6d218
No related branches found
No related tags found
No related merge requests found
...@@ -208,8 +208,45 @@ function initCameraControl() { ...@@ -208,8 +208,45 @@ function initCameraControl() {
return; return;
} }
navigator.mediaDevices.enumerateDevices().then((devices) => {
const cameras = devices.filter((device) => device.kind === "videoinput");
if (cameras.length === 0) {
addErrorAttribute(self, getTranslations().cameraNotSupportedOrNotAllowed);
return;
}
// Nur Dropdown anzeigen, wenn mehr als 1 Kamera vorhanden
if (cameras.length > 1) {
const select = document.createElement("select");
select.setAttribute("data-monster-role", "cameraSelector");
select.style.marginBottom = "0.5rem";
cameras.forEach((camera, index) => {
const option = document.createElement("option");
option.value = camera.deviceId;
option.text = camera.label || `Kamera ${index + 1}`;
select.appendChild(option);
});
select.addEventListener("change", () => {
startCameraWithDeviceId.call(self, select.value);
});
// Vor dem Video-Element einfügen
self[controlElementSymbol].insertBefore(select, self[videoElementSymbol]);
}
// Mit der ersten Kamera starten
startCameraWithDeviceId.call(self, cameras[0].deviceId);
});
}
function startCameraWithDeviceId(deviceId) {
const self = this;
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({video: true}) .getUserMedia({ video: { deviceId: { exact: deviceId } } })
.then(function (stream) { .then(function (stream) {
self[takePictureButtonElementSymbol].style.display = "block"; self[takePictureButtonElementSymbol].style.display = "block";
self[videoElementSymbol].style.display = "block"; self[videoElementSymbol].style.display = "block";
...@@ -222,6 +259,7 @@ function initCameraControl() { ...@@ -222,6 +259,7 @@ function initCameraControl() {
}); });
} }
/** /**
* @private * @private
* @returns {{takePicture: string}} * @returns {{takePicture: string}}
...@@ -448,7 +486,7 @@ function getTemplate() { ...@@ -448,7 +486,7 @@ function getTemplate() {
</g> </g>
</svg> </svg>
<p data-monster-replace="path:labels.cameraNotSupportedOrNotAllowed | default:there was an error:string"></p> <p class="camera-not-supported-text" data-monster-replace="path:labels.cameraNotSupportedOrNotAllowed | default:there was an error:string"></p>
</monster-state> </monster-state>
......
...@@ -21,6 +21,16 @@ ...@@ -21,6 +21,16 @@
} }
.camera-not-supported-text {
color: var(--monster-color-primary-1);
background-color: var(--monster-bg-color-primary-1);
font-size: 1.2rem;
font-weight: 600;
text-align: center;
margin: 0;
padding: 1rem;
}
video, canvas { video, canvas {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment