javascript - 网络摄像头在使用 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

The issue is that webcam.js, same as any other library related to camera capturing, uses the getUserMedia API. However, it is not supported in Internet Explorer.

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

Worth to note, that this will not be supported in future either, as IE is now deprecated at all.

Webcam.js implemented the Flash fallback for such case, but, unfortunately Flash is not supported anymore in the modern web world. Flash player probably can be installed by user into IE separately, but it makes the general solution overcomplicated, requires additional actions from user with no guaranteed result.