בנה אפליקציית הקלטת וידאו בסגנון Loom עם Claude Code

מה אתה בונה

חלופה מקומית ללום. הקלט את המסך, חלון או כרטיסית דפדפן. הוסף את המצלמה שלך כעיגול. מזג אודיו של מיקרופון ומערכת. עצור וחזור להקלטה. הצג וצור הורדה כ־WebM. הכל רץ בדפדפן — ללא שרת, ללא העלאה, ללא תלויות. רק קובץ HTML אחד שנבנה ב־7 הנחיות.

Milestone 1: הקלט את המסך שלך ב־20 שורות

מקליט המסך הפשוט ביותר. כפתור אחד. לחץ, בחר מסך, עצור, הורד.

הנחיה:

Create a single index.html file that records the user's screen. When they click "Start Recording", use getDisplayMedia to capture the screen, record it with MediaRecorder as WebM, and when they click "Stop", download the recording. Dark background, minimal UI. No frameworks.

מה Claude Code עושה: היא חיווטת את צינור ההקלטה הבסיסי — getDisplayMedia() משדרת את המסך כ־MediaStream, MediaRecorder קודדת אותו ל־WebM chunks, וכשאתה לוחץ על "עצור", Blob מרכיבה את החתיכות לקובץ שניתן להוריד.

נסה את זה: פתח index.html ב־Chrome. לחץ Start, בחר את המסך שלך, הקלט לכמה שניות, לחץ Stop. קובץ .webm מורד. נגן אותו.

Milestone 2: הפוך את זה לאפליקציה

אב־טיפוס עובד, אבל הוא נראה כעבודת בית. זמן להגדרה אמיתית של מסך.

הנחיה:

Redesign the setup screen. Add three source options the user can click: Screen, Window, and Browser Tab (use getDisplayMedia's displaySurface option). Add toggle cards for Webcam and Microphone. Style it with a dark theme, purple accent color #625df5, rounded cards, and a prominent Start Recording button. Make the selected options visually highlighted.

מה Claude Code עושה: היא בונה ממשק בחירה וממפה כל אפשרות ל־getDisplayMedia() configuration. המאפיין displaySurface מציע לדפדפן האם להעדיף מסכים, חלונות או כרטיסיות בבוחר. ה־toggles עוקבים אחר מצב לעתיד.

נסה את זה: פתח את הקובץ. מסך setup אפל מעוצב עם כרטיסיות שניתן ללחוץ עליהן. לחץ בין Screen/Window/Tab — המצב הפעיל מודגש. Start Recording עדיין עובד.

Milestone 3: הוסף מיקרופון + מזג אודיו

ההקלטה משדרת אודיו של מערכת בלבד. הקול שלך חסר. אודיו מערכת והאודיו של המיקרופון הם שני זרמים נפרדים — הם צריכים להיות מוזגים.

הנחיה:

When the Microphone toggle is active, capture mic audio using getUserMedia. Mix the mic audio and system audio together using the Web Audio API (AudioContext + createMediaStreamDestination) so both play in the recording. If mic isn't available, gracefully fall back to system audio only.

מה Claude Code עושה: getUserMedia({ audio: true }) משדרת את המיקרופון. AudioContext פועלת כלוח ערבול קול — שני מקורות אודיו מתחברים ל־createMediaStreamDestination(), מתמזגים לזרם פלט אחד.

נסה את זה: הפעל את toggle ה־Microphone, התחל הקלטה, דבר כשמשהו משחק ברקע. עצור, נגן — אתה שומע גם את הקול שלך וגם את אודיו המערכת.

Milestone 4: קטע בקרת הקלטה

מקליט שלך עובד אבל מרגיש עיוור — ללא טיימר, ללא דרך לעצור.

הנחיה:

Add a recording control bar at the bottom center of the screen during recording. Include: a pulsing red dot that animates while recording, a live timer showing minutes:seconds, a pause/resume button (use MediaRecorder.pause/resume), and a red stop button. The bar should have a blurred dark background. When paused, the dot turns amber and stops pulsing.

מה Claude Code עושה: קטע בקרה צף מתחבר ל־API מצב של MediaRecorder — .pause() מעצורת קידוד ללא אובדן נתונים, .resume() ממשיך מהמקום שעצרנו. הטיימר מכבד מצב עצור.

נסה את זה: התחל הקלטה. קטע בקרה מופיע: נקודה אדומה דופקת, טיימר חי. עצור — הנקודה הופכת לצהובה, הטיימר קופא. המשך — ממשיך. עצור — בוצע.

Milestone 5: ספירה לאחור + מסך השלמה

הקלטות מתחילות בפתאומיות. ספירה לאחור נותנת לך זמן להכין. ואתה רוצה לצפות בתצוגה מקדימה לפני הורדה.

הנחיה:

Add a 3-second countdown overlay (3, 2, 1) with a large animated number before recording starts. After recording stops, show a completion screen with a video player to preview the recording and two buttons: Download and New Recording. The download should name the file with a timestamp. New Recording resets back to the setup screen.

מה Claude Code עושה: הספירה לאחור משתמשת ב־Promise-based timer — ההקלטה מחכה שהיא תסתיים. מסך ההשלמה יוצר Blob URL עם URL.createObjectURL() להשמעה מיידית בדפדפן. ללא צורך בהעלאה.

נסה את זה: התחל הקלטה — אנימציה ענקית 3, 2, 1. הקלט, עצור. מסך השלמה עם השמעת וידאו. Download נותן .webm עם טימסטמפ. New Recording מאפס הכל.

Milestone 6: שכבת עיגול המצלמה

ה־milestone הגדול ביותר — תכונת ה־Loom החתימה. הפנים שלך בעיגול, משולבות בהקלטה.

הנחיה:

When the Webcam toggle is active, capture the camera with getUserMedia and show a circular preview bubble in the bottom-left corner. Make the bubble draggable. For the actual recording, use canvas compositing: draw the screen and webcam onto a hidden canvas at 20fps, then record the canvas stream instead. When webcam is off, skip the canvas entirely for better performance. Cap resolution at 1080p.

מה Claude Code עושה: Canvas compositing — <canvas> נסתר שבו המסך והמצלמה צבועים כל פריים עם drawImage(). פלט ה־canvas נתפס עם canvas.captureStream() ונשלח ל־MediaRecorder. טריקים ביצוע: דלג על canvas כשאין מצלמה, חנק ל־20fps, מצב GPU desynchronized, cap של 1080p.

נסה את זה: הפעל את toggle ה־Webcam, התחל הקלטה. בועת עיגול פנים מופיעה. הקלט, עצור, נגן — הפנים שלך משולבות בוידאו. גרור את הבועה במהלך ההקלטה.

Milestone 7: בקרת Picture-in-Picture

כשמקליטים, כרטיסית המקליט מוסתרת. אתה צריך בקרות צפות מעל הכל.

הנחיה:

After recording starts, open a Picture-in-Picture floating mini-window using documentPictureInPicture.requestWindow(). The mini-window should show the timer, a pulsing recording dot, and pause/stop buttons. Keep it synced with the main controls. Fall back gracefully if PiP isn't supported.

מה Claude Code עושה: Document Picture-in-Picture API פותחת חלון זעיר שתמיד בחזית שבו אתה משדר HTML מותאם אישית. הוא מסתנכרן עם טיימר ובקרות של העמוד הראשי.

נסה את זה: התחל הקלטה. חלון צף מיני מופיע עם טיימר ובקרות. החלף אפליקציות — ה־PiP נשאר בחזית. עצור/עצור מחלון צף עובד. (Chrome 116+ בלבד. דפדפנים אחרים עדיין מקליטים בסדר ללא בקרה צפה.)

מה בנית

מקליט מסך מלא בסגנון Loom בקובץ HTML אחד:

• קצ"ח של מסך, חלון או כרטיסית
• שכבת עיגול מצלמה (שניתן לגרור)
• מזוג אודיו של מיקרופון ומערכת
• עצור ותחזור להקלטה
• ספירה לאחור של 3 שניות
• בקרה צפה של PiP
• הורדה מקומית כ־WebM

הכל מקורי בדפדפן. ללא שרת. ללא העלאה. ללא תלויות.

שלוש APIs עשו את העבודה הכבדה: getDisplayMedia() למסך, getUserMedia() למצלמה וריח, MediaRecorder לקודוד הכל. ה־Web Audio API מזג את האודיו. Canvas compositing מזג את הוידאו. שבע הנחיות ל־Claude Code.

קח את זה הלאה

• הוסף ייצוא MP4 — השתמש ב־FFmpeg.wasm להמרת WebM ל־MP4 בדפדפן
• הוסף סרגל ציור — הערך את המסך שלך במהלך הקלטה
• הוסף קיצורי מקלדת — התחל/עצור/עצור עם hotkeys