Переключение ч / б нескольких камер по кнопке Нажмите Веб-страница: HTML, JS - PullRequest
Новая
       4

Переключение ч / б нескольких камер по кнопке Нажмите Веб-страница: HTML, JS

0 голосов
/ 20 марта 2020

Итак, у меня есть сценарий, с помощью которого я могу показать канал двух камер, подключенных к устройству, при выборе конкретной опции.

Сценарий, который я использовал, показан ниже: 

var videoElement = document.querySelector('video');
    var videoSelect = document.querySelector('select#videoSource'); 
    videoSelect.onchange = getStream;

    getStream().then(getDevices).then(gotDevices);

    function getDevices()
    {
        return navigator.mediaDevices.enumerateDevices();
    }

    function gotDevices(deviceInfos)
    {
     window.deviceInfos = deviceInfos; // make available to console
 console.log("Available Input and Output Devices: ", deviceInfos);

        for(const deviceInfo of deviceInfos)
        {
            const option = document.createElement('option');
            option.value = deviceInfo.deviceId;
            if(deviceInfo.kind === 'videoinput'){
                option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}` ;
                videoSelect.appendChild(option);
        }
     }
    }

    function getStream()
    {
        if(window.stream)
        {
            window.stream.getTracks().forEach(track =>{
                track.stop();
            });
        }

        const videoSource = videoSelect.value
        const constraints = {
            video:{deviceId: videoSource ? { exact: videoSource}: undefined }
        };

        return navigator.mediaDevices.getUserMedia(constraints).
        then(gotStream).catch(handleError);
    }

    function gotStream(stream)
    {
        window.stream = stream ;
        videoSelect.selectedIndex = [...videoSelect.options].
    findIndex(option => option.text === stream.getVideoTracks()[0].label);
    console.log("videoSelecte.selectedIndex : ", videoSelect.selectedIndex)
  videoElement.srcObject = stream;
    }

    function handleError(error)
    {
        console.log("Error: ", error);
    }

Но мне нужно вместо опции выбора, мне нужна кнопка «Изменить камеру». При нажатии на эту кнопку камера должна переключиться. Есть ли способ достичь этого.

Вы можете проверить скрипку того, что я сделал.

https://jsfiddle.net/abnitchauhan/y8tjrow3/

1 Ответ

0 голосов
/ 27 марта 2020 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebCam</title>
  </head>
  <body>
    <div>
      <div id="container">
        <div className="select">
          <label>Select Video Input</label>
          <button id="toggleCam">Toggle Camera</button>
        </div>
      </div>

      <video autoplay muted playsinline></video>
    </div>

    <script>
      function main() {
        const videoElement = document.querySelector("video");
        const toggleButton = document.querySelector("#toggleCam");

        /**
         * @type {Array<MediaDeviceInfo>}
         */
        let videoDevices;
        let currIndex = -1;

        init();

        function init() {
          if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
            navigator.mediaDevices
              .getUserMedia({ video: {} })
              .then(() => navigator.mediaDevices.enumerateDevices())
              .then(deviceInfos => {
                videoDevices = Array.from(deviceInfos).filter(item => item.kind == "videoinput");

                if (videoDevices.length == 0) {
                  noCameraFound();
                } else if (videoDevices.length == 1) {
                  const label = videoDevices[0].label || "Default Camera";
                  toggleButton.textContent = `Using ${label}`;
                  toggleButton.setAttribute("disabled", "1");
                  useCamera(videoDevices[0]);
                } else {
                  toggleCamera();
                  toggleButton.addEventListener("click", toggleCamera);
                }
              });
          } else {
            noCameraFound();
          }
        }

        function noCameraFound() {
          toggleButton.textContent = "No Camera";
          toggleButton.setAttribute("disabled", "1");
        }

        /**
         * @param {MediaDeviceInfo} device
         */
        function useCamera(device) {
          if (videoElement && videoElement.srcObject && videoElement.srcObject.getTracks) {
            videoElement.srcObject.getTracks().forEach(track => track.stop());
          }

          const deviceId = device.deviceId;
          const constraints = {
            video: { deviceId: deviceId ? { exact: deviceId } : undefined }
          };

          navigator.mediaDevices
            .getUserMedia(constraints)
            .then(stream => {
              videoElement.srcObject = stream;
            })
            .catch(handleError);
        }

        function toggleCamera() {
          currIndex = (currIndex + 1) % videoDevices.length;
          useCamera(videoDevices[currIndex]);

          const nextIndex = (currIndex + 1) % videoDevices.length;
          const label = videoDevices[nextIndex].label || `Camera ${nextIndex}`;
          toggleButton.textContent = `Use ${label}`;
        }

        function handleError(error) {
          console.log("Error: ", error);
        }
      }

      main();
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...