react-screen-recorder-lite
Version:
A lightweight React screen recorder library with customizable components and hooks.
359 lines (358 loc) • 11.4 kB
JavaScript
import oe, { useState as C, useRef as M, useCallback as W } from "react";
const ae = () => {
const [u, m] = C(!1), [d, f] = C(!1), [a, s] = C(null), c = M(null), i = M([]), v = W(async () => {
try {
f(!0), s(null);
const l = await navigator.mediaDevices.getDisplayMedia({
video: !0,
audio: !0
});
l.getVideoTracks()[0].onended = () => {
var R;
m(!1), f(!1), (R = c.current) == null || R.stop();
};
const S = await navigator.mediaDevices.getUserMedia({
audio: !0
}), g = new MediaStream([
...l.getVideoTracks(),
...S.getAudioTracks()
]);
c.current = new MediaRecorder(g, {
mimeType: "video/webm"
}), c.current.ondataavailable = (R) => {
R.data.size > 0 && i.current.push(R.data);
}, c.current.onstop = () => {
const R = new Blob(i.current, { type: "video/webm" });
i.current = [];
const O = URL.createObjectURL(R), p = document.createElement("a");
p.href = O, p.download = `${window.prompt("File name", "video")}.webm`, p.click(), URL.revokeObjectURL(O), m(!1);
}, c.current.start(250), m(!0);
} catch (l) {
s(l instanceof Error ? l.message : "Failed to start recording"), console.error("Error:", l);
} finally {
f(!1);
}
}, []), _ = W(() => {
var l;
(l = c.current) == null || l.stop();
}, []);
return {
startRecording: v,
stopRecording: _,
isRecording: u,
isLoading: d,
error: a
};
};
var h = { exports: {} }, k = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var z;
function se() {
if (z) return k;
z = 1;
var u = Symbol.for("react.transitional.element"), m = Symbol.for("react.fragment");
function d(f, a, s) {
var c = null;
if (s !== void 0 && (c = "" + s), a.key !== void 0 && (c = "" + a.key), "key" in a) {
s = {};
for (var i in a)
i !== "key" && (s[i] = a[i]);
} else s = a;
return a = s.ref, {
$$typeof: u,
type: f,
key: c,
ref: a !== void 0 ? a : null,
props: s
};
}
return k.Fragment = m, k.jsx = d, k.jsxs = d, k;
}
var w = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var V;
function ce() {
return V || (V = 1, process.env.NODE_ENV !== "production" && function() {
function u(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === re ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case p:
return "Fragment";
case G:
return "Profiler";
case J:
return "StrictMode";
case Z:
return "Suspense";
case Q:
return "SuspenseList";
case ee:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case O:
return "Portal";
case B:
return (e.displayName || "Context") + ".Provider";
case X:
return (e._context.displayName || "Context") + ".Consumer";
case H:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case K:
return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
case Y:
r = e._payload, e = e._init;
try {
return u(e(r));
} catch {
}
}
return null;
}
function m(e) {
return "" + e;
}
function d(e) {
try {
m(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
n
), m(e);
}
}
function f(e) {
if (e === p) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === Y)
return "<...>";
try {
var r = u(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function a() {
var e = A.A;
return e === null ? null : e.getOwner();
}
function s() {
return Error("react-stack-top-frame");
}
function c(e) {
if (I.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function i(e, r) {
function t() {
L || (L = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function v() {
var e = u(this.type);
return $[e] || ($[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function _(e, r, t, n, b, E, x, y) {
return t = E.ref, e = {
$$typeof: R,
type: e,
key: r,
props: E,
_owner: b
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: v
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: x
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: y
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function l(e, r, t, n, b, E, x, y) {
var o = r.children;
if (o !== void 0)
if (n)
if (te(o)) {
for (n = 0; n < o.length; n++)
S(o[n]);
Object.freeze && Object.freeze(o);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else S(o);
if (I.call(r, "key")) {
o = u(e);
var T = Object.keys(r).filter(function(ne) {
return ne !== "key";
});
n = 0 < T.length ? "{key: someKey, " + T.join(": ..., ") + ": ...}" : "{key: someKey}", U[o + n] || (T = 0 < T.length ? "{" + T.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
n,
o,
T,
o
), U[o + n] = !0);
}
if (o = null, t !== void 0 && (d(t), o = "" + t), c(r) && (d(r.key), o = "" + r.key), "key" in r) {
t = {};
for (var N in r)
N !== "key" && (t[N] = r[N]);
} else t = r;
return o && i(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), _(
e,
o,
E,
b,
a(),
t,
x,
y
);
}
function S(e) {
typeof e == "object" && e !== null && e.$$typeof === R && e._store && (e._store.validated = 1);
}
var g = oe, R = Symbol.for("react.transitional.element"), O = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), B = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), Q = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), Y = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), A = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, te = Array.isArray, P = console.createTask ? console.createTask : function() {
return null;
};
g = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var L, $ = {}, D = g["react-stack-bottom-frame"].bind(
g,
s
)(), F = P(f(s)), U = {};
w.Fragment = p, w.jsx = function(e, r, t, n, b) {
var E = 1e4 > A.recentlyCreatedOwnerStacks++;
return l(
e,
r,
t,
!1,
n,
b,
E ? Error("react-stack-top-frame") : D,
E ? P(f(e)) : F
);
}, w.jsxs = function(e, r, t, n, b) {
var E = 1e4 > A.recentlyCreatedOwnerStacks++;
return l(
e,
r,
t,
!0,
n,
b,
E ? Error("react-stack-top-frame") : D,
E ? P(f(e)) : F
);
};
}()), w;
}
var q;
function ie() {
return q || (q = 1, process.env.NODE_ENV === "production" ? h.exports = se() : h.exports = ce()), h.exports;
}
var j = ie();
const ue = ({
className: u = "",
buttonClassName: m = "",
buttonText: d = {
start: "Start Recording",
stop: "Stop Recording",
loading: "Initializing..."
},
errorClassName: f = "",
statusClassName: a = ""
}) => {
const { startRecording: s, stopRecording: c, isRecording: i, isLoading: v, error: _ } = ae(), l = async () => {
i ? c() : await s();
};
return /* @__PURE__ */ j.jsxs("div", { className: u, children: [
_ && /* @__PURE__ */ j.jsx("div", { className: f, children: _ }),
/* @__PURE__ */ j.jsx(
"button",
{
onClick: l,
disabled: v,
className: `${m} ${v ? "loading" : i ? "recording" : "idle"}`,
children: v ? d.loading : i ? d.stop : d.start
}
),
i && /* @__PURE__ */ j.jsx("div", { className: a, children: "Recording in progress... Click to stop." })
] });
};
export {
ue as ScreenRecorder,
ae as useScreenRecorder
};