網絡攝像頭不適用於使用 webcam.js 的 React 項目中的 IE11

Question

在訪問網絡攝像頭時，我遇到了這樣的空白屏幕

import React from "react";
import Webcam from './webcam.js'
export default function Camera() {

 const renderCamera = () => {
    Webcam.set({
      width: 320,
      height: 240,
      image_format: "jpeg",
      jpeg_quality: 90,
    });
    Webcam.attach("#my_camera");
  };

  const take_snapshot = () => {
    // take snapshot and get image data
    Webcam.snap(function (data_uri) {
      // display results in page
      document.getElementById("results").innerHTML =
        "<h2>Here is your image:</h2>" + '<img src="' + data_uri + '"/>';
    });
  };
  return (
    <div className="App">
      <h1>Image Capture</h1>
      <button onClick={renderCamera}>open Camera</button>
      <div id="my_camera"></div>
      <div id="results">Your captured image will appear here...</div>
      <button onClick={take_snapshot}>take a picture</button>
    </div>
  );
}

我已經在所有瀏覽器中嘗試過，它在除 IE 之外的所有瀏覽器上都運行良好，請幫助我解決這個問題，謝謝。

Answer 1

問題在於 webcam.js 與任何其他與相機捕獲相關的庫一樣，使用getUserMedia API。 但是，它在 Internet Explorer 中不受支持。

https://caniuse.com/#search=getuserMedia

值得注意的是，將來也不支持此功能，因為 IE 現在已完全棄用。

Webcam.js 在這種情況下實現了 Flash 回退，但不幸的是，現代網絡世界不再支持 Flash。 Flash 播放器可能可以由用戶單獨安裝到 IE 中，但它使通用解決方案過於復雜，需要用戶額外的操作而不能保證結果。