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:

1. Direct file path
   https://drive.google.com/file/d/{fileid}/view

2. 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:

function getDriveFileId(url) {
  // Match format: https://drive.google.com/file/d/FILEID/view
  const fileIdMatch = url.match(/\/file\/d\/([^/]+)/);
  // Match format: https://drive.google.com/open?id=FILEID
  const openIdMatch = url.match(/open\?id=([^&]+)/);
  return fileIdMatch?.[1] || openIdMatch?.[1] || null;
}

This approach ensures maximum compatibility with typical Google Drive sharing links.

public/index.html

    <div id="previewFrame" class="flex-grow w-full relative overflow-hidden">
        <!-- iframe or video will be injected here -->
    </div>

public/app.js

function embedDriveVideo(fileId) {
  previewFrame.innerHTML = \`
    <div class="video-wrapper">
      <iframe
        src="https://drive.google.com/file/d/\${fileId}/preview"
        frameborder="0"
        allow="autoplay"
        allowfullscreen>
      </iframe>
    </div>
  \`;
}

The embedded iframe provides users a preview of the Drive-hosted video before they download it.

public/app.js

const response = await fetch('/process-url', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ url })
});

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

router.post('/', async (req, res) => {
  const { url } = req.body;
  // If no URL is provided, return a 400 Bad Request
  if (!url) {
    return res.status(400).json({ error: 'Please provide a URL' });
  }

  try {
    let result;
    // Check if the URL is a Google Drive link
    if (url.includes('drive.google.com')) {
      // Download the video and extract metadata
      result = await downloadGoogleDriveVideo(url);
    } else {
      // Reject unsupported platforms
      return res.status(400).json({ error: 'Unsupported URL. Only Google Drive URLs are supported.' });
    }
    // Respond with filename and video duration
    res.json(result);
  } catch (err) {
    console.error('Download error:', err);
    res.status(500).json({ error: err.message || 'Failed to download video' });
  }
});

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-url route immediately downloads the video as part of its internal flow. The downloadGoogleDriveVideo() 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.

const fileIdMatch = url.match(/\/file\/d\/([^/]+)/);
const openIdMatch = url.match(/open\?id=([^&]+)/);
const driveFileId = fileIdMatch?.[1] || openIdMatch?.[1];
if (!driveFileId) {
  return reject(new Error('Invalid Google Drive URL'));
}

We first try to extract the file ID from the input URL. Google Drive URLs can have two formats:

• /file/d/FILEID/view
• open?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.

const downloadTarget = `https://drive.google.com/uc?export=download&id=${driveFileId}`;
const downloadDir = path.join(process.cwd(), 'downloads');

if (!fs.existsSync(downloadDir)) {
  fs.mkdirSync(downloadDir, { recursive: true });
}

const fileId = randomUUID();
const fileName = `${fileId}.mp4`;
const filePath = path.join(downloadDir, fileName);

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 .mp4 filename using a UUID (to avoid collisions)
• Create the full path to where we’ll save the downloaded video

const probeCmd =
  `ffprobe -v error -select_streams v:0 -show_entries format=duration ` +
  `-of default=noprint_wrappers=1:nokey=1 "${filePath}"`;

exec(probeCmd, (probeErr, stdout) => {
  if (probeErr) {
    return reject(probeErr);
  }

  const duration = parseFloat(stdout) || 0;
  resolve({ filename: fileName, duration });
});

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

const encoded = encodeURIComponent(currentVideoPath);
videoPlayer.src = \`/temp_resources/\${encoded}\`;
videoPlayer.load();

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-url using a backend service
• Measured video duration using ffprobe
• Implemented transcription logic via /transcribe using FFmpeg and Whisper

Next, we'll bring in LinkedIn support using yt-dlp to download social video posts.