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.
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.