Невозможно привязать MediaStream из canvas.captureStream к элементу проигрывателя в Safari - PullRequest
Новая
       121

Невозможно привязать MediaStream из canvas.captureStream к элементу проигрывателя в Safari

0 голосов
/ 04 июля 2019

MDN сообщает о полной поддержке captureStream в Safari.

Следующий код создает поток с веб-камеры пользователя и связывает его с элементом видео. Однако захват неподвижного изображения с помощью кнопки Take picture работает только в Firefox.

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

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="webcam_interface">
      <canvas id="canvas" hidden></canvas>
      <video id="player" autoplay muted></video>
      <br />
      <button id="capture">Take picture</button>
      <button id="discard">Discard picture</button>
    </div>
    <script>
      const player = document.getElementById("player");
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      const captureButton = document.getElementById("capture");
      const discardButton = document.getElementById("discard");

      const constraints = {
        video: true
      };

      captureButton.addEventListener("click", () => {
        // Draw the video frame to the canvas.
        context.drawImage(player, 0, 0, canvas.width, canvas.height);
        player.srcObject = canvas.captureStream();
      });

      navigator.mediaDevices.getUserMedia(constraints).then(stream => {
        // Copy dimensions of video stream to canvas for still image
        const videoTrack = stream.getVideoTracks()[0];
        const videoSettings = videoTrack.getSettings();
        canvas.height = videoSettings.height;
        canvas.width = videoSettings.width;
        // Attach the video stream to the video element and autoplay.
        player.srcObject = stream;

        // Allow the video stream to reappear when discarding image.
        discardButton.addEventListener("click", () => {
          player.srcObject = stream;
        });
      });
    </script>
  </body>
</html>

Примечание: Фрагмент не будет запускаться здесь, потому что он помещен в "песочницу":

Нарушение доступа к песочнице: заблокирован кадр в "https://stacksnippets.net" от доступа к кадру в "https://stackoverflow.com". Кадр, запрашивающий доступ, помещен в" песочницу " и отсутствует флаг "allow-same-origin".

Таким образом, чтобы воспроизвести поведение, вам, вероятно, потребуется доступ к HTML с использованием HTTPS-соединения (локальное открытие не будет работать).

...