@mastashake08/vue-4k-camera-recorder/dist/vue-4k-camera-recorder.cjs.js

A Vue 3 component using MediaRecorder and MediaCapabilities API to record 4K video from the user's camera.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),T=(g,v)=>{const r=g.__vccOpts||g;for(const[k,t]of v)r[k]=t;return r},B={class:"camera-recorder"},M={key:0,class:"error"},D={key:1},I={class:"status"},O={key:0},P={class:"controls"},U=["disabled"],$=["disabled"],K=["disabled"],F={class:"video-container"},x={key:0,class:"download-section"},A=["href","download"],b=3840,h=2160,w=30,_=50*1e3*1e3,L={__name:"CameraRecorder",setup(g){const v=["video/webm;codecs=vp9","video/webm;codecs=av01","video/mp4;codecs=h264","video/webm;codecs=vp8"],r=e.ref(null),k=e.ref(null),t=e.ref(null),s=e.ref(null),E=e.ref([]),m=e.ref(null),n=e.ref(!1),c=e.ref(!1),l=e.ref("Idle. Check support first."),u=e.ref(null),d=e.ref(""),y=e.computed(()=>"mediaDevices"in navigator&&"getUserMedia"in navigator.mediaDevices&&"MediaRecorder"in window&&"mediaCapabilities"in navigator),f=e.computed(()=>{var a;return((a=u.value)==null?void 0:a.supported)??!1}),R=e.computed(()=>{var i;const a=new Date().toISOString().replace(/[:.]/g,"-"),o=((i=d.value)==null?void 0:i.split(";")[0].split("/")[1])||"webm";return`recording-4k-${a}.${o}`});async function N(){if(!y.value){l.value="Browser lacks necessary API support.";return}c.value=!0,l.value="Checking 4K recording capabilities...",u.value=null,d.value="";let a=!1;for(const o of v){const i={contentType:o,width:b,height:h,bitrate:_,framerate:w};try{const p=await navigator.mediaCapabilities.encodingInfo({type:"record",video:i});if(console.log(`Checking ${o}:`,p),p.supported){u.value={supported:!0,config:i,powerEfficient:p.powerEfficient,smooth:p.smooth},d.value=o,l.value=`4K recording check complete. Supported (${o}).`,a=!0;break}}catch(p){console.error(`Error checking capabilities for ${o}:`,p),a||(u.value={supported:!1,reason:`${o}: ${p.message}`})}}a||(l.value="4K recording check complete. No suitable configuration found.",u.value||(u.value={supported:!1,reason:"Failed to check any configuration."})),c.value=!1}async function V(){if(!f.value||!d.value){l.value="Cannot start: 4K recording not supported or not checked.";return}if(!n.value){m.value=null,E.value=[],c.value=!0,l.value="Requesting camera access...";try{t.value=await navigator.mediaDevices.getUserMedia({audio:!0,video:{width:{ideal:b},height:{ideal:h},frameRate:{ideal:w}}}),l.value="Camera access granted. Starting recorder...",r.value&&(r.value.srcObject=t.value,r.value.captureStream=r.value.captureStream||r.value.mozCaptureStream,await r.value.play());const a={mimeType:d.value,videoBitsPerSecond:_};if(!MediaRecorder.isTypeSupported(a.mimeType))throw console.warn(`MediaRecorder does not support ${a.mimeType}, falling back or failing.`),new Error(`MediaRecorder reported unsupported mimeType: ${a.mimeType}`);s.value=new MediaRecorder(t.value,a),s.value.ondataavailable=o=>{o.data&&o.data.size>0&&E.value.push(o.data)},s.value.onstop=()=>{l.value="Recording stopped. Processing video...";const o=new Blob(E.value,{type:d.value});m.value=URL.createObjectURL(o),n.value=!1,c.value=!1,l.value="Processing complete. Download ready.",t.value&&(t.value.getTracks().forEach(i=>i.stop()),t.value=null),r.value&&(r.value.srcObject=null)},s.value.onerror=o=>{console.error("MediaRecorder Error:",o.error),l.value=`Recording Error: ${o.error.name||"Unknown error"}`,n.value=!1,c.value=!1,t.value&&(t.value.getTracks().forEach(i=>i.stop()),t.value=null),r.value&&(r.value.srcObject=null)},s.value.start(),n.value=!0,c.value=!1,l.value="Recording 4K video..."}catch(a){console.error("Error starting recording:",a);let o="Failed to start recording.";a.name==="NotAllowedError"?o="Permission denied. Please allow camera/microphone access.":a.name==="NotFoundError"?o="No camera/microphone found.":a.name==="NotReadableError"?o="Camera/microphone is already in use or hardware error.":a.name==="OverconstrainedError"?o=`Could not satisfy constraints (e.g., 4K resolution not supported by device): ${a.constraint}`:a.message.includes("MediaRecorder reported unsupported mimeType")&&(o=a.message),l.value=o,c.value=!1,n.value=!1,t.value&&(t.value.getTracks().forEach(i=>i.stop()),t.value=null)}}}function S(){!n.value||!s.value||(l.value="Stopping recording...",s.value.stop())}return e.onMounted(()=>{}),e.onUnmounted(()=>{n.value&&s.value&&s.value.stop(),t.value&&t.value.getTracks().forEach(a=>a.stop()),m.value&&URL.revokeObjectURL(m.value)}),(a,o)=>(e.openBlock(),e.createElementBlock("div",B,[o[5]||(o[5]=e.createElementVNode("h2",null,"4K Camera Recorder",-1)),y.value?(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("div",I,[e.createElementVNode("p",null,"Status: "+e.toDisplayString(l.value),1),u.value!==null?(e.openBlock(),e.createElementBlock("p",O,[o[0]||(o[0]=e.createTextVNode(" 4K High-Bitrate Recording Supported: ")),e.createElementVNode("span",{class:e.normalizeClass(f.value?"supported":"not-supported")},[e.createTextVNode(e.toDisplayString(f.value?"Yes":"No")+" ",1),f.value&&d.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(" (Using: "+e.toDisplayString(d.value)+")",1)],64)):e.createCommentVNode("",!0),!f.value&&u.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(" (Reason: "+e.toDisplayString(u.value.reason||"Unsupported configuration")+")",1)],64)):e.createCommentVNode("",!0)],2)])):e.createCommentVNode("",!0)]),e.createElementVNode("div",P,[e.createElementVNode("button",{onClick:N,disabled:c.value||n.value}," Check 4K Support ",8,U),n.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,onClick:V,disabled:c.value||n.value||!f.value}," Start 4K Recording ",8,$)),n.value?(e.openBlock(),e.createElementBlock("button",{key:1,onClick:S,disabled:!n.value}," Stop Recording ",8,K)):e.createCommentVNode("",!0)]),e.createElementVNode("div",F,[o[1]||(o[1]=e.createElementVNode("h3",null,"Preview",-1)),e.createElementVNode("video",{ref_key:"videoPreviewRef",ref:r,autoplay:"",muted:"",playsinline:""},null,512)]),m.value?(e.openBlock(),e.createElementBlock("div",x,[o[2]||(o[2]=e.createElementVNode("h3",null,"Recording Complete",-1)),o[3]||(o[3]=e.createElementVNode("p",null,"Download your recording:",-1)),e.createElementVNode("a",{href:m.value,download:R.value,ref_key:"downloadLinkRef",ref:k},e.toDisplayString(R.value),9,A),o[4]||(o[4]=e.createElementVNode("p",null,"(File size might be very large)",-1))])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",M," Required APIs (getUserMedia, MediaRecorder, MediaCapabilities) are not fully supported by your browser. "))]))}},C=T(L,[["__scopeId","data-v-40afb732"]]),j={install:(g,v)=>{const r=(v==null?void 0:v.componentName)||"CameraRecorder";g.component(r,C)}};exports.CameraRecorder=C;exports.default=j;
//# sourceMappingURL=vue-4k-camera-recorder.cjs.js.map