Webcam Not working for IE11 in React project using webcam.js

Question

while accessing the webcam I'm getting blank screen like this

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>
  );
}

I've tried in all the browsers and it's working fine on every browser except IE, Please help me regarding this, Thanks.

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.