mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-05 13:57:10 -04:00
1 line
7.8 KiB
JavaScript
1 line
7.8 KiB
JavaScript
import{j as e,D as s,E as o,c as D,r as w,am as ie,d as se,an as re,ao as ae,w as ce,a1 as le,q as t,k as _,l as a,z as m,m as c,S as j,L as R,F as de,U as ue,K as _e,M as me}from"./chunk-449c23a2.js";import{_ as pe}from"./chunk-606d31d4.js";import{_ as ve}from"./chunk-d8b8b4f8.js";import{a as A,b as he}from"./chunk-a740628f.js";import"./chunk-a3974c29.js";import"./chunk-27eb844d.js";const fe={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},ge=o("path",{fill:"currentColor",d:"M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6v12M8 9h8v10H8V9m7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5Z"},null,-1),ke=[ge];function we(u,i){return e(),s("svg",fe,ke)}const ye={name:"mdi-delete-outline",render:we},be={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},xe=o("path",{fill:"currentColor",d:"M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7l7-7Z"},null,-1),$e=[xe];function Ce(u,i){return e(),s("svg",be,$e)}const Re={name:"mdi-download",render:Ce},Me={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},Se=o("path",{fill:"currentColor",d:"M19 12c0 3.86-3.14 7-7 7s-7-3.14-7-7s3.14-7 7-7s7 3.14 7 7Z"},null,-1),Ve=[Se];function Be(u,i){return e(),s("svg",Me,Ve)}const He={name:"mdi-record",render:Be},Ie={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},Ue=o("path",{fill:"currentColor",d:"M8 5.14v14l11-7l-11-7Z"},null,-1),je=[Ue];function Ae(u,i){return e(),s("svg",Ie,je)}const De={name:"mdi-play",render:Ae},Ze={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},Ee=o("path",{fill:"currentColor",d:"M14 19h4V5h-4M6 19h4V5H6v14Z"},null,-1),Le=[Ee];function Ne(u,i){return e(),s("svg",Ze,Le)}const Pe={name:"mdi-pause",render:Ne},Te={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},qe=o("path",{fill:"currentColor",d:"M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4Z"},null,-1),Ye=[qe];function ze(u,i){return e(),s("svg",Te,Ye)}const Fe={name:"mdi-video",render:ze},Ge={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},Oe=o("path",{fill:"currentColor",d:"M4 4h3l2-2h6l2 2h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m8 3a5 5 0 0 0-5 5a5 5 0 0 0 5 5a5 5 0 0 0 5-5a5 5 0 0 0-5-5m0 2a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3Z"},null,-1),Ke=[Oe];function We(u,i){return e(),s("svg",Ge,Ke)}const Je={name:"mdi-camera",render:We};function Qe({stream:u}){const i=D(()=>MediaRecorder.isTypeSupported("video/webm")),n=w(null),$=w([]),M=ie(),l=w("stopped"),p=()=>{const g=new Blob($.value,{type:"video/webm"}),B=URL.createObjectURL(g);return $.value=[],B};return{isRecordingSupported:i,startRecording:()=>{i.value&&u.value&&l.value==="stopped"&&(n.value=new MediaRecorder(u.value,{mimeType:"video/webm"}),n.value.ondataavailable=g=>{g.data.size>0&&$.value.push(g.data)},n.value.onstop=()=>{M.trigger(p())},n.value.state==="inactive"&&(n.value.start(),l.value="recording"))},stopRecording:()=>{i.value&&n.value&&l.value!=="stopped"&&(n.value.stop(),l.value="stopped")},pauseRecording:()=>{i.value&&n.value&&l.value==="recording"&&(n.value.pause(),l.value="paused")},resumeRecording:()=>{i.value&&n.value&&l.value==="paused"&&(n.value.resume(),l.value="recording")},recordingState:l,onRecordAvailable:M.on}}const Xe={key:1,"mt-4":"",flex:"","justify-center":""},et={flex:"","flex-col":"","gap-2":""},tt={key:0,"mt-3":"",flex:"","justify-center":""},ot={key:1},nt={"my-2":""},it={flex:"","items-center":"","justify-between":"","gap-2":""},st={"mr-2":""},rt={key:0,flex:"","justify-center":"","gap-2":""},at={"mr-2":""},ct={"mr-2":""},lt={"mr-2":""},dt={"mr-2":""},ut={key:1,italic:"","op-60":""},_t={grid:"","grid-cols-2":"","mt-5":"","gap-2":""},mt=["src"],pt=["src"],vt={flex:"","items-center":"","justify-between":""},ht={"font-bold":""},ft={flex:"","gap-2":""},Ct=se({__name:"camera-recorder",setup(u){const{videoInputs:i,audioInputs:n,permissionGranted:$,isSupported:M,ensurePermissions:l}=re({requestPermissions:!0,constraints:{video:!0,audio:!0},onUpdated(){Y()}}),p=w(),b=w([]),f=w(i.value[0]?.deviceId),v=w(n.value[0]?.deviceId),V=w(!1),{stream:g,start:B,stop:Z,enabled:H}=ae({constraints:D(()=>({video:{deviceId:f.value},...v.value?{audio:{deviceId:v.value}}:{}})),autoSwitch:!0}),{isRecordingSupported:E,onRecordAvailable:L,startRecording:N,stopRecording:P,pauseRecording:T,recordingState:S,resumeRecording:q}=Qe({stream:g});L(r=>{b.value.unshift({type:"video",value:r,createdAt:new Date})});function Y(){(A.isNil(f)||!i.value.find(r=>r.deviceId===f.value))&&(f.value=i.value[0]?.deviceId),(A.isNil(n)||!n.value.find(r=>r.deviceId===v.value))&&(v.value=n.value[0]?.deviceId)}function z(){if(!p.value)return;const r=document.createElement("canvas");r.width=p.value.videoWidth,r.height=p.value.videoHeight,r.getContext("2d")?.drawImage(p.value,0,0);const k=r.toDataURL("image/png");b.value.unshift({type:"image",value:k,createdAt:new Date})}ce(()=>{p.value&&g.value&&(p.value.srcObject=g.value)}),le(()=>Z());async function F(){try{await l()}catch{V.value=!0}}function G({type:r,value:k,createdAt:x}){const C=document.createElement("a");C.href=k,C.download=`${r}-${x.getTime()}.${r==="image"?"png":"webm"}`,C.click()}return(r,k)=>{const x=he,C=ve,h=_e,I=pe,O=Je,K=Fe,W=Pe,J=De,Q=He,X=Re,ee=ye;return e(),s("div",null,[t(M)?t($)?(e(),_(x,{key:2},{default:a(()=>[o("div",et,[c(I,{value:t(f),"onUpdate:value":k[0]||(k[0]=d=>j(f)?f.value=d:null),"label-position":"left","label-width":"60px",label:"Video:",options:t(i).map(({deviceId:d,label:y})=>({value:d,label:y})),placeholder:"Select camera"},null,8,["value","options"]),t(v)&&t(n).length>0?(e(),_(I,{key:0,value:t(v),"onUpdate:value":k[1]||(k[1]=d=>j(v)?v.value=d:null),label:"Audio:","label-position":"left","label-width":"60px",options:t(n).map(({deviceId:d,label:y})=>({value:d,label:y})),placeholder:"Select microphone"},null,8,["value","options"])):R("",!0)]),t(H)?(e(),s("div",ot,[o("div",nt,[o("video",{ref_key:"video",ref:p,autoplay:"",controls:"",playsinline:"","max-h-full":"","w-full":""},null,512)]),o("div",it,[c(h,{disabled:!t(H),onClick:z},{default:a(()=>[o("span",st,[c(O)]),m(" Take screenshot ")]),_:1},8,["disabled"]),t(E)?(e(),s("div",rt,[t(S)==="stopped"?(e(),_(h,{key:0,onClick:t(N)},{default:a(()=>[o("span",at,[c(K)]),m(" Start recording ")]),_:1},8,["onClick"])):R("",!0),t(S)==="recording"?(e(),_(h,{key:1,onClick:t(T)},{default:a(()=>[o("span",ct,[c(W)]),m(" Pause ")]),_:1},8,["onClick"])):R("",!0),t(S)==="paused"?(e(),_(h,{key:2,onClick:t(q)},{default:a(()=>[o("span",lt,[c(J)]),m(" Resume ")]),_:1},8,["onClick"])):R("",!0),t(S)!=="stopped"?(e(),_(h,{key:3,type:"error",onClick:t(P)},{default:a(()=>[o("span",dt,[c(Q)]),m(" Stop ")]),_:1},8,["onClick"])):R("",!0)])):(e(),s("div",ut," Video recording is not supported in your browser "))])])):(e(),s("div",tt,[c(h,{type:"primary",onClick:t(B)},{default:a(()=>[m(" Start webcam ")]),_:1},8,["onClick"])]))]),_:1})):(e(),_(x,{key:1,"text-center":""},{default:a(()=>[m(" You need to grant permission to use your camera and microphone "),t(V)?(e(),_(C,{key:0,"mt-4":"","text-left":""},{default:a(()=>[m(" Your browser has blocked permission request or does not support it. You need to grant permission manually in your browser settings (usually the lock icon in the address bar). ")]),_:1})):(e(),s("div",Xe,[c(h,{onClick:F},{default:a(()=>[m(" Grant permission ")]),_:1})]))]),_:1})):(e(),_(x,{key:0},{default:a(()=>[m(" Your browser does not support recording video from camera ")]),_:1})),o("div",_t,[(e(!0),s(de,null,ue(t(b),({type:d,value:y,createdAt:te},U)=>(e(),_(x,{key:U},{default:a(()=>[d==="image"?(e(),s("img",{key:0,src:y,"max-h-full":"","w-full":"",alt:"screenshot"},null,8,mt)):(e(),s("video",{key:1,src:y,controls:"","max-h-full":"","w-full":""},null,8,pt)),o("div",vt,[o("div",ht,me(d==="image"?"Screenshot":"Video"),1),o("div",ft,[c(h,{onClick:oe=>G({type:d,value:y,createdAt:te})},{default:a(()=>[c(X)]),_:2},1032,["onClick"]),c(h,{onClick:oe=>b.value=t(b).filter((gt,ne)=>ne!==U)},{default:a(()=>[c(ee)]),_:2},1032,["onClick"])])])]),_:2},1024))),128))])])}}});export{Ct as default};
|