If you want to read the instructions, click here .
',startRecording:"Start recording"};async function S(){return await navigator.mediaDevices.getDisplayMedia({video:{frameRate:{ideal:60},echoCancellation:!1,noiseSuppression:!1,autoGainControl:!1},audio:{echoCancellation:!1,noiseSuppression:!1,autoGainControl:!1}})}async function E(){return await navigator.mediaDevices.getUserMedia({audio:{echoCancellation:!1,noiseSuppression:!1,autoGainControl:!1}}).catch(()=>null)}function R(e,a){const t=new MediaStream,[n]=e.getVideoTracks(),[o]=e.getAudioTracks();let i=null;if(a&&(i=a),o&&i){const u=new AudioContext,m=u.createMediaStreamDestination(),T=u.createMediaStreamSource(e),b=u.createMediaStreamSource(i);T.connect(m),b.connect(m),t.addTrack(m.stream.getAudioTracks()[0])}else o?t.addTrack(o):i&&t.addTrack(i.getAudioTracks()[0]);return t.addTrack(n),{stream:t,desktopVideoTrack:n}}const c=document.getElementById("start-recording"),v=document.getElementById("stop-recording"),s=document.getElementById("download-button"),d=document.getElementById("video-preview"),l=document.getElementById("video-container");let L,g,h,p,r;c.addEventListener("click",M);v.addEventListener("click",y);s.addEventListener("click",A);async function M(){const e=await S();h=e;const a=await E();p=a;const{stream:t,desktopVideoTrack:n}=R(e,a);r=new MediaRecorder(t,{mimeType:f}),r.start(),C(n),n.addEventListener("ended",k),r.addEventListener("dataavailable",B)}function y(){h.getTracks().forEach(e=>e.stop()),p?.getTracks().forEach(e=>e.stop()),k()}function B(e){const{data:a}=e;d.classList.add("hidden"),g=a,l.src=URL.createObjectURL(g),l.classList.remove("hidden")}function C(e){const a=new MediaStream;a.addTrack(e),d.classList.remove("hidden"),l.classList.add("hidden"),s.classList.add("hidden"),s.classList.remove("flex"),c.disabled=!0,c.innerHTML=w.recording,v.disabled=!1;const t=document.createElement("video");t.classList.add("aspect-video"),t.classList.add("w-full"),t.autoplay=!0,t.srcObject=a,d.width=1280,d.height=720;const n=d.getContext("2d");function o(){L=window.requestAnimationFrame(o),n?.drawImage(t,0,0,1280,720)}t.addEventListener("loadeddata",()=>{o()})}function k(){r.stop(),window.cancelAnimationFrame(L),d.classList.add("hidden"),l.classList.remove("hidden"),c.disabled=!1,v.disabled=!0,s.classList.remove("hidden"),s.classList.add("flex"),c.innerHTML=w.startRecording}function A(){const e=new Blob([g],{type:f}),a=URL.createObjectURL(e),t=document.createElement("a");t.href=a,t.download="screen-snap.webm",t.click(),URL.revokeObjectURL(a)}
If you want to read the instructions, click here .