通过网页从手机前摄像头捕获屏幕截图-不适用于iPhone

对于安卓设备，摄像头工作正常。但对于iPhone摄像头来说，它不起作用

<div class="container-fluid px-0">
  <div class="row mx-0 mt-3">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <h3 class="text-title text-center">Capture Screenshot</h3>
            <div class="row mx-0">
              <div class="col-md-6 text-center mt-4">
                <div class="camera">
                  <video id="video">Video Stream not available</video>
                </div>
              </div>
              <div class="col-md-6 text-center mt-4">
                <div class="output">
                  <img alt="Picture will appear here" id="picture" />
                </div>
              </div>
              <div class="col-md-12 text-center">
              <div>
                <button 
                    class="btn btn-primary shadow-none text-white my-4"                                 
                    id="takePictureBtn">Take Picture</button>
                <button 
                    class="btn btn-secondary shadow-none text-white my-4 ml-3"
                    id="clearPictureBtn">Clear</button>
                <button 
                    class="btn btn-success shadow-none text-white my-4 ml-3"
                    id="downloadPictureBtn">Download Picture</button>
              </div>
              <canvas id="canvas"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Javascript:

谁能推荐一下吗

代码笔URL:

#canvas {
  display: none;
}

.camera video, .output img {
  width: 320px;
  height: 240px;
}

var width = 320;
var height = 0;
var streaming = false;
let video = document.querySelector("#video");
let canvas = document.querySelector("#canvas");
let picture = document.querySelector("#picture");
let takePictureBtn = document.querySelector("#takePictureBtn");
let downloadPictureBtn = document.querySelector("#downloadPictureBtn");
let clearPictureBtn = document.querySelector("#clearPictureBtn");

function startup() {
  getMediaDevices();
  videoEventListener();
  takePictureBtnEventListener();
  clearPicture();
}

// use navigator to get video media device
function getMediaDevices() {
  navigator.mediaDevices
    .getUserMedia({
      video: true,
    })
    .then((stream) => {
      // pass stream object to video src
      video.srcObject = stream;
      // play video
      video.play();
  })
  .catch((err) => {
    alert("Error occured: ", err);
  });
}

// add "canplay" event listener on video and set its width & height
function videoEventListener() {
  video.addEventListener(
    "canplay",
    (event) => {
    // check if streaming is false (i.e if we're already streaming or not)
      if (!streaming) {
        // set height of video container
        height = video.videoHeight / (video.videoWidth / width);

        // if height is invalid number then set height manually
        if (isNaN(height)) {
          height = width / (4 / 3);
        }

        video.setAttribute("width", width);
        video.setAttribute("height", height);
        canvas.setAttribute("width", width);
        canvas.setAttribute("height", height);
        streaming = true;
      }
    },
    // event is in bubbling phase
    false
  );
}

// on click of take picture btn call takePicture function
function takePictureBtnEventListener() {
  takePictureBtn.addEventListener(
    "click",
    (event) => {
      event.preventDefault();
        takePicture();
      },
      false
    );
  }

  // clear picture
  function clearPicture() {
    let context = canvas.getContext("2d");
    context.fillStyle = "#AAA";
    context.fillRect(0, 0, canvas.width, canvas.height);

    let data = canvas.toDataURL("image/png");
    picture.setAttribute("src", data);
  }

  // take picture
  function takePicture() {
    let context = canvas.getContext("2d");
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      // draw image on canvas captured from video streaming
      context.drawImage(video, 0, 0, width, height);

      // encode screenshot captured
      let data = canvas.toDataURL("image/png");

      // pass encoded url to picture's src attribute
      picture.setAttribute("src", data);
    } else {
      clearPicture();
    }
  }

  clearPictureBtn.addEventListener("click", (event) => {
    clearPicture();
  });

  // on click of download btn encode scrennshot and convert it to octet stream. 
  Then create `a` element and finally download screenshot. 
  downloadPictureBtn.addEventListener("click", function (event) {
  event.preventDefault();

  let image = canvas
    .toDataURL("image/png", 1.0)
    .replace("image/png", "image/octet-stream");

  let link = document.createElement("a");
  link.download = "me.png";
  link.href = image;
  link.click();
 });

 // on page load call load function in bubbling phase
 window.addEventListener("load", startup, false);