Welcome to the first lesson in this course! In this unit, you'll build a system that allows users to preview, download, and transcribe videos directly from Google Drive URLs.
Heads-up:
Support for LinkedIn video downloads is also present in the codebase via a separate service. You’re welcome to try it now — but we’ll explore it in depth in Unit 2.
Here’s what you’ll accomplish in this unit:
- Extract Google Drive File ID from URLs
- Preview videos in-browser before downloading
- Download the video using curl
- Load and display the downloaded video for playback
- Transcribe the first 30 seconds of audio using Whisper
Google Drive URLs typically follow one of two structures:
-
Direct file path
https://drive.google.com/file/d/{fileid}/view -
Open ID parameter
https://drive.google.com/open?id={fileid}
Both of these formats are supported by the application.
The getDriveFileId() function checks for both patterns:
This approach ensures maximum compatibility with typical Google Drive sharing links.
public/index.html
public/app.js
The embedded iframe provides users a preview of the Drive-hosted video before they download it.
public/app.js
When the user clicks "Load", the video URL is posted to /process-url, which in turn invokes the backend downloader service.
The /process-url endpoint acts as a gateway to downloading supported video types.
src/routes/processUrl.ts
This route handles the logic to detect the video platform and invokes the corresponding Google Drive download service. If the platform is unsupported, a 400 error is returned. It validates the input, determines the platform, and calls the appropriate service. In this lesson, only Drive links are supported — LinkedIn is covered later in Unit 2.
Note: The video download is not a separate manual step—the
/process-urlroute immediately downloads the video as part of its internal flow. ThedownloadGoogleDriveVideo()function handles this behind the scenes and also extracts the video's duration so it’s ready for transcription later.
src/services/googleDriveService.ts
The service below handles the entire process of downloading a video from Google Drive and probing it for metadata (like duration). Let’s walk through the logic step by step.
We first try to extract the file ID from the input URL. Google Drive URLs can have two formats:
/file/d/FILEID/viewopen?id=FILEID
This code matches both formats and selects the one that exists. If no valid ID is found, the function rejects with an error.
Once we have the Drive file ID, we:
- Build a direct download URL (using the undocumented
/uc?export=download&id=...format) - Ensure a local
downloads/directory exists - Generate a unique
.mp4filename using a UUID (to avoid collisions) - Create the full path to where we’ll save the downloaded video
We use curl to download the file from Google Drive and save it to filePath. The -L flag follows redirects, and -o writes to the specified output file.
If the download fails, we immediately reject with an error. Otherwise, we move on to the next step.
After downloading, we run ffprobe (a tool from the FFmpeg suite) to get the video’s duration in seconds.
-v error: hides warnings-select_streams v:0: selects the first video stream-show_entries format=duration: extracts only the duration value
The result is parsed and returned along with the filename, so the frontend can know how long the video is and prepare for playback or transcription.
public/app.js
Once a video is loaded, the frontend sends the file path to /transcribe, which performs the following steps:
- Checks if the video file exists
- Uses FFmpeg to clip the first 30 seconds of audio
- Converts the audio to mono 16kHz format
- Sends it to Whisper for transcription
- Deletes the temporary audio file
src/routes/transcribe.ts
This endpoint clips the first 30 seconds of the downloaded video, prepares the audio in the correct format, and sends it to Whisper for transcription. Once done, it cleans up the temporary .mp3 file and returns the transcription to the frontend.
In this lesson you:
- Learned about both Drive URL formats and how to extract file IDs
- Previewed videos using iframe embedding
- Downloaded videos via
/process-urlusing a backend service - Measured video duration using
ffprobe - Implemented transcription logic via
/transcribeusing FFmpeg and Whisper
Next, we'll bring in LinkedIn support using yt-dlp to download social video posts.
