Как изменить камеру в браузере на смартфоне?

Как можно сделать, чтобы при нажатии на кнопку "смена камеры" происходило переключение между доступными камерами устройства для видеопотока?
  • 28 июня 2024 г. 17:42
Ответы на вопрос 1
Для изменения камеры в браузере на смартфоне при использовании видеопотока, необходимо использовать JavaScript и API для доступа к медиаустройствам браузера.

Для реализации кнопки "смена камеры" достаточно создать кнопку на странице и добавить обработчик события click, который будет вызывать функцию для переключения между камерами устройства.

Пример реализации функции смены камеры:

```javascript
let videoElement = document.querySelector('video');

function switchCamera() {
    navigator.mediaDevices.enumerateDevices()
    .then(devices => {
        let videoDevices = devices.filter(device => device.kind === 'videoinput');
        
        if (videoDevices.length > 1) {
            let currentDeviceIndex = videoDevices.findIndex(device => device.deviceId === videoElement.srcObject.getVideoTracks()[0].getSettings().deviceId);
            
            let nextDeviceIndex = (currentDeviceIndex + 1) % videoDevices.length;
            let nextDeviceId = videoDevices[nextDeviceIndex].deviceId;
            
            navigator.mediaDevices.getUserMedia({
                video: { deviceId: { exact: nextDeviceId } }
            })
            .then(stream => {
                videoElement.srcObject = stream;
            })
            .catch(error => {
                console.error('Error switching camera:', error);
            });
            
        } else {
            console.log('No other video devices found');
        }
    })
    .catch(error => {
        console.error('Error enumerating devices:', error);
    });
}

document.getElementById('switchCameraButton').addEventListener('click', switchCamera);
```

В данном примере при нажатии на кнопку с id "switchCameraButton" будет вызываться функция switchCamera(), которая сначала перечисляет доступные устройства, затем находит текущую камеру в списке устройств и меняет на следующую камеру, если таковая имеется.

Не забудьте добавить элемент `<video>` на страницу для вывода видеопотока.
Похожие вопросы