infinity-forge
Version:
350 lines • 15.7 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var React = __importStar(require("react"));
(function polyfillGetUserMedia() {
if (!process.browser) {
return;
}
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
var getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error("getUserMedia is not implemented in this browser"));
}
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
};
}
})();
function hasGetUserMedia() {
return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
}
var Webcam = /** @class */ (function (_super) {
__extends(Webcam, _super);
function Webcam(props) {
var _this = _super.call(this, props) || this;
_this.canvas = null;
_this.ctx = null;
_this.requestUserMediaId = 0;
_this.unmounted = false;
_this.state = {
hasUserMedia: false
};
return _this;
}
Webcam.prototype.componentDidMount = function () {
var _a = this, state = _a.state, props = _a.props;
this.unmounted = false;
if (!hasGetUserMedia()) {
props.onUserMediaError("getUserMedia not supported");
return;
}
if (!state.hasUserMedia) {
this.requestUserMedia();
}
if (props.children && typeof props.children != 'function') {
console.warn("children must be a function");
}
};
Webcam.prototype.componentDidUpdate = function (nextProps) {
var props = this.props;
if (!hasGetUserMedia()) {
props.onUserMediaError("getUserMedia not supported");
return;
}
var audioConstraintsChanged = JSON.stringify(nextProps.audioConstraints) !==
JSON.stringify(props.audioConstraints);
var videoConstraintsChanged = JSON.stringify(nextProps.videoConstraints) !==
JSON.stringify(props.videoConstraints);
var minScreenshotWidthChanged = nextProps.minScreenshotWidth !== props.minScreenshotWidth;
var minScreenshotHeightChanged = nextProps.minScreenshotHeight !== props.minScreenshotHeight;
if (videoConstraintsChanged ||
minScreenshotWidthChanged ||
minScreenshotHeightChanged) {
this.canvas = null;
this.ctx = null;
}
if (audioConstraintsChanged || videoConstraintsChanged) {
this.stopAndCleanup();
this.requestUserMedia();
}
};
Webcam.prototype.componentWillUnmount = function () {
this.unmounted = true;
this.stopAndCleanup();
};
Webcam.stopMediaStream = function (stream) {
if (stream) {
if (stream.getVideoTracks && stream.getAudioTracks) {
stream.getVideoTracks().map(function (track) {
stream.removeTrack(track);
track.stop();
});
stream.getAudioTracks().map(function (track) {
stream.removeTrack(track);
track.stop();
});
}
else {
stream.stop();
}
}
};
Webcam.prototype.stopAndCleanup = function () {
var state = this.state;
if (state.hasUserMedia) {
Webcam.stopMediaStream(this.stream);
if (state.src) {
window.URL.revokeObjectURL(state.src);
}
}
};
Webcam.prototype.getScreenshot = function (screenshotDimensions) {
var _a = this, state = _a.state, props = _a.props;
if (!state.hasUserMedia)
return null;
var canvas = this.getCanvas(screenshotDimensions);
return (canvas &&
canvas.toDataURL(props.screenshotFormat, props.screenshotQuality));
};
Webcam.prototype.getCanvas = function (screenshotDimensions) {
var _a = this, state = _a.state, props = _a.props;
if (!this.video) {
return null;
}
if (!state.hasUserMedia || !this.video.videoHeight)
return null;
if (!this.ctx) {
var canvasWidth = this.video.videoWidth;
var canvasHeight = this.video.videoHeight;
if (!this.props.forceScreenshotSourceSize) {
var aspectRatio = canvasWidth / canvasHeight;
canvasWidth = props.minScreenshotWidth || this.video.clientWidth;
canvasHeight = canvasWidth / aspectRatio;
if (props.minScreenshotHeight &&
canvasHeight < props.minScreenshotHeight) {
canvasHeight = props.minScreenshotHeight;
canvasWidth = canvasHeight * aspectRatio;
}
}
this.canvas = document.createElement("canvas");
this.canvas.width = (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.width) || canvasWidth;
this.canvas.height = (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.height) || canvasHeight;
this.ctx = this.canvas.getContext("2d");
}
var _b = this, ctx = _b.ctx, canvas = _b.canvas;
if (ctx && canvas) {
// adjust the height and width of the canvas to the given dimensions
canvas.width = (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.width) || canvas.width;
canvas.height = (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.height) || canvas.height;
// mirror the screenshot
if (props.mirrored) {
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
}
ctx.imageSmoothingEnabled = props.imageSmoothing;
ctx.drawImage(this.video, 0, 0, (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.width) || canvas.width, (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.height) || canvas.height);
// invert mirroring
if (props.mirrored) {
ctx.scale(-1, 1);
ctx.translate(-canvas.width, 0);
}
}
return canvas;
};
Webcam.prototype.requestUserMedia = function () {
var _this = this;
var props = this.props;
var sourceSelected = function (audioConstraints, videoConstraints) {
var constraints = {
video: typeof videoConstraints !== "undefined" ? videoConstraints : true
};
if (props.audio) {
constraints.audio =
typeof audioConstraints !== "undefined" ? audioConstraints : true;
}
_this.requestUserMediaId++;
var myRequestUserMediaId = _this.requestUserMediaId;
navigator.mediaDevices
.getUserMedia(constraints)
.then(function (stream) {
if (_this.unmounted || myRequestUserMediaId !== _this.requestUserMediaId) {
Webcam.stopMediaStream(stream);
}
else {
_this.handleUserMedia(null, stream);
}
})
.catch(function (e) {
_this.handleUserMedia(e);
});
};
if ("mediaDevices" in navigator) {
sourceSelected(props.audioConstraints, props.videoConstraints);
}
else {
var optionalSource_1 = function (id) { return ({ optional: [{ sourceId: id }] }); };
var constraintToSourceId_1 = function (constraint) {
var deviceId = constraint.deviceId;
if (typeof deviceId === "string") {
return deviceId;
}
if (Array.isArray(deviceId) && deviceId.length > 0) {
return deviceId[0];
}
if (typeof deviceId === "object" && deviceId.ideal) {
return deviceId.ideal;
}
return null;
};
// @ts-ignore: deprecated api
MediaStreamTrack.getSources(function (sources) {
var audioSource = null;
var videoSource = null;
sources.forEach(function (source) {
if (source.kind === "audio") {
audioSource = source.id;
}
else if (source.kind === "video") {
videoSource = source.id;
}
});
var audioSourceId = constraintToSourceId_1(props.audioConstraints);
if (audioSourceId) {
audioSource = audioSourceId;
}
var videoSourceId = constraintToSourceId_1(props.videoConstraints);
if (videoSourceId) {
videoSource = videoSourceId;
}
sourceSelected(optionalSource_1(audioSource), optionalSource_1(videoSource));
});
}
};
Webcam.prototype.handleUserMedia = function (err, stream) {
var props = this.props;
if (err || !stream) {
this.setState({ hasUserMedia: false });
props.onUserMediaError(err);
return;
}
this.stream = stream;
try {
if (this.video) {
this.video.srcObject = stream;
}
this.setState({ hasUserMedia: true });
}
catch (error) {
this.setState({
hasUserMedia: true,
src: window.URL.createObjectURL(stream)
});
}
props.onUserMedia(stream);
};
Webcam.prototype.render = function () {
var _this = this;
var _a = this, state = _a.state, props = _a.props;
var audio = props.audio, forceScreenshotSourceSize = props.forceScreenshotSourceSize, disablePictureInPicture = props.disablePictureInPicture, onUserMedia = props.onUserMedia, onUserMediaError = props.onUserMediaError, screenshotFormat = props.screenshotFormat, screenshotQuality = props.screenshotQuality, minScreenshotWidth = props.minScreenshotWidth, minScreenshotHeight = props.minScreenshotHeight, audioConstraints = props.audioConstraints, videoConstraints = props.videoConstraints, imageSmoothing = props.imageSmoothing, mirrored = props.mirrored, _b = props.style, style = _b === void 0 ? {} : _b, children = props.children, rest = __rest(props, ["audio", "forceScreenshotSourceSize", "disablePictureInPicture", "onUserMedia", "onUserMediaError", "screenshotFormat", "screenshotQuality", "minScreenshotWidth", "minScreenshotHeight", "audioConstraints", "videoConstraints", "imageSmoothing", "mirrored", "style", "children"]);
var videoStyle = mirrored ? __assign(__assign({}, style), { transform: "".concat(style.transform || "", " scaleX(-1)") }) : style;
var childrenProps = {
getScreenshot: this.getScreenshot.bind(this),
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", __assign({ autoPlay: true, disablePictureInPicture: disablePictureInPicture, src: state.src, muted: !audio, playsInline: true, ref: function (ref) {
_this.video = ref;
}, style: videoStyle }, rest)), children && children(childrenProps)] }));
};
Webcam.defaultProps = {
audio: false,
disablePictureInPicture: false,
forceScreenshotSourceSize: false,
imageSmoothing: true,
mirrored: false,
onUserMedia: function () { return undefined; },
onUserMediaError: function () { return undefined; },
screenshotFormat: "image/webp",
screenshotQuality: 0.92,
};
return Webcam;
}(React.Component));
exports.default = Webcam;
//# sourceMappingURL=webcan-component.js.map