react-screen-recorder-lite
Version:
A lightweight React screen recorder library with customizable components and hooks.
23 lines (22 loc) • 8.02 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),z=()=>{const[u,m]=v.useState(!1),[d,f]=v.useState(!1),[a,s]=v.useState(null),c=v.useRef(null),i=v.useRef([]),p=v.useCallback(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 O=await navigator.mediaDevices.getUserMedia({audio:!0}),T=new MediaStream([...l.getVideoTracks(),...O.getAudioTracks()]);c.current=new MediaRecorder(T,{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 j=URL.createObjectURL(R),g=document.createElement("a");g.href=j,g.download=`${window.prompt("File name","video")}.webm`,g.click(),URL.revokeObjectURL(j),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)}},[]),_=v.useCallback(()=>{var l;(l=c.current)==null||l.stop()},[]);return{startRecording:p,stopRecording:_,isRecording:u,isLoading:d,error:a}};var h={exports:{}},S={};/**
* @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 U;function ne(){if(U)return S;U=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 S.Fragment=m,S.jsx=d,S.jsxs=d,S}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 W;function oe(){return W||(W=1,process.env.NODE_ENV!=="production"&&function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ee?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case g:return"Fragment";case J:return"Profiler";case V:return"StrictMode";case H:return"Suspense";case Z:return"SuspenseList";case K: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 j:return"Portal";case X:return(e.displayName||"Context")+".Provider";case G:return(e._context.displayName||"Context")+".Consumer";case B:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Q: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===g)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=y.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 p(){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,E,b,x,N){return t=b.ref,e={$$typeof:R,type:e,key:r,props:b,_owner:E},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:p}):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:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function l(e,r,t,n,E,b,x,N){var o=r.children;if(o!==void 0)if(n)if(re(o)){for(n=0;n<o.length;n++)O(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 O(o);if(I.call(r,"key")){o=u(e);var k=Object.keys(r).filter(function(te){return te!=="key"});n=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",M[o+n]||(k=0<k.length?"{"+k.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,k,o),M[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 C in r)C!=="key"&&(t[C]=r[C])}else t=r;return o&&i(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,o,b,E,a(),t,x,N)}function O(e){typeof e=="object"&&e!==null&&e.$$typeof===R&&e._store&&(e._store.validated=1)}var T=v,R=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),V=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),G=Symbol.for("react.consumer"),X=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),H=Symbol.for("react.suspense"),Z=Symbol.for("react.suspense_list"),Q=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),K=Symbol.for("react.activity"),ee=Symbol.for("react.client.reference"),y=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,re=Array.isArray,P=console.createTask?console.createTask:function(){return null};T={"react-stack-bottom-frame":function(e){return e()}};var L,$={},D=T["react-stack-bottom-frame"].bind(T,s)(),F=P(f(s)),M={};w.Fragment=g,w.jsx=function(e,r,t,n,E){var b=1e4>y.recentlyCreatedOwnerStacks++;return l(e,r,t,!1,n,E,b?Error("react-stack-top-frame"):D,b?P(f(e)):F)},w.jsxs=function(e,r,t,n,E){var b=1e4>y.recentlyCreatedOwnerStacks++;return l(e,r,t,!0,n,E,b?Error("react-stack-top-frame"):D,b?P(f(e)):F)}}()),w}var q;function ae(){return q||(q=1,process.env.NODE_ENV==="production"?h.exports=ne():h.exports=oe()),h.exports}var A=ae();const se=({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:p,error:_}=z(),l=async()=>{i?c():await s()};return A.jsxs("div",{className:u,children:[_&&A.jsx("div",{className:f,children:_}),A.jsx("button",{onClick:l,disabled:p,className:`${m} ${p?"loading":i?"recording":"idle"}`,children:p?d.loading:i?d.stop:d.start}),i&&A.jsx("div",{className:a,children:"Recording in progress... Click to stop."})]})};exports.ScreenRecorder=se;exports.useScreenRecorder=z;