84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
export class WebCamHelper {
|
|
constructor() {
|
|
this.imageCapture = null;
|
|
this.mediaStream = null;
|
|
this.deviceInfosArray = [];
|
|
this.ready = false;
|
|
}
|
|
checkSecureContext() {
|
|
var isSecureOrigin =
|
|
location.protocol === "https:" || location.host === "localhost";
|
|
if (!isSecureOrigin) {
|
|
alert(
|
|
"getUserMedia() must be run from a secure origin: HTTPS or localhost." +
|
|
"\n\nChanging protocol to HTTPS"
|
|
);
|
|
location.protocol = "HTTPS";
|
|
}
|
|
}
|
|
|
|
startApi() {
|
|
this.checkSecureContext();
|
|
navigator.mediaDevices
|
|
.enumerateDevices()
|
|
.then((deviceInfos) => {
|
|
this.deviceInfosArray = deviceInfos;
|
|
})
|
|
.catch((error) => {
|
|
console.log("enumerateDevices() error: ", error);
|
|
})
|
|
.then(() => {
|
|
this.getStream();
|
|
});
|
|
}
|
|
|
|
getStream() {
|
|
if (this.mediaStream) {
|
|
this.mediaStream.getTracks().forEach((track) => {
|
|
track.stop();
|
|
});
|
|
}
|
|
let videoSource = [0].deviceId;
|
|
let constraints = {
|
|
video: {
|
|
deviceId: this.deviceInfosArray[0].deviceId
|
|
? { exact: videoSource }
|
|
: undefined,
|
|
},
|
|
};
|
|
navigator.mediaDevices
|
|
.getUserMedia(constraints)
|
|
.then((stream) => {
|
|
this.gotStream(stream);
|
|
})
|
|
.catch((error) => {
|
|
console.log("getUserMedia error: ", error);
|
|
});
|
|
}
|
|
|
|
gotStream(stream) {
|
|
console.log("getUserMedia() got stream: ", stream);
|
|
this.mediaStream = stream;
|
|
this.imageCapture = new ImageCapture(stream.getVideoTracks()[0]);
|
|
this.ready = true;
|
|
}
|
|
async GrabFrameToCanvas(imageBitmap, canvasid) {
|
|
this.canvas = document.getElementById(canvasid);
|
|
|
|
console.log("Grabbed frame:", imageBitmap);
|
|
this.canvas.width = imageBitmap.width;
|
|
this.canvas.height = imageBitmap.height;
|
|
this.canvas.getContext("2d").drawImage(imageBitmap, 0, 0);
|
|
let imageBlob = await new Promise((resolve) =>
|
|
this.canvas.toBlob(resolve, "image/png")
|
|
);
|
|
return imageBlob;
|
|
}
|
|
|
|
GrabFrame(complete) {
|
|
this.imageCapture.grabFrame().then(function (imageBitmap) {
|
|
complete(imageBitmap);
|
|
});
|
|
}
|
|
}
|