Implementing a Google Drive Video Downloader in TypeScript

Implementing Google Drive Downloader

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.

Overview

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

Understanding Google Drive URL Formats

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: TypeScriptfunction 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; }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.

Previewing the Video (before Download)

public/index.html HTML <div id="previewFrame" class="flex-grow w-full relative overflow-hidden"> <!-- iframe or video will be injected here --> </div> <div id="previewFrame" class="flex-grow w-full relative overflow-hidden"> <!-- iframe or video will be injected here --> </div> public/app.js TypeScriptfunction 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> \`; }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.

Handling the Load Button (Client Side)

public/app.js TypeScript const response = await fetch('/process-url', {method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url })}); 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.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

TypeScript

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;
}

HTML

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

TypeScript

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>
  \`;
}

TypeScript

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

TypeScript

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' });
  }
});

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' });
  }
});

TypeScript

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'));
}

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'));
}

TypeScript

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);

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);

TypeScript

const curlCmd = `curl -L -o "${filePath}" "${downloadTarget}"`;

exec(curlCmd, (downloadErr) => {
  if (downloadErr) {
    return reject(downloadErr);
  }

  // (Probing step goes here)
});

TypeScript

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 });
});

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 });
});

TypeScript

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

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

TypeScript

router.post('/', (req, res) => {
  const { file_path } = req.body;

  // Validate input
  if (!file_path) {
    return res.status(400).json({ error: 'Missing file_path' });
  }

  // Build the absolute path to the downloaded video
  const fullPath = path.join(process.cwd(), 'downloads', file_path);
  if (!fs.existsSync(fullPath)) {
    return res.status(404).json({ error: 'Video file not found' });
  }

  // Construct output path for clipped audio (mp3 format)
  const clipPath = fullPath.replace(/\.[^.]+$/, '.clip.mp3');
  const ffmpegCmd = `ffmpeg -y -ss 0 -t 30 -i "${fullPath}" -ac 1 -ar 16000 "${clipPath}"`;

  // Use ffmpeg to clip the first 30 seconds of audio
  exec(ffmpegCmd, async (err) => {
    if (err) {
      return res.status(500).json({ error: 'Audio clipping failed' });
    }

    try {
      // Transcribe the audio file using Whisper
      const transcription = await transcribe(clipPath);

      // Delete the temporary audio file
      fs.unlink(clipPath, () => {});
      res.json({ transcription });
    } catch (e) {
      res.status(500).json({ error: 'Transcription failed' });
    }
  });
});

TypeScript

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' });
  }
});

TypeScript

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'));
}

TypeScript

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);

TypeScript

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 });
});

TypeScript

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

TypeScript

const curlCmd = `curl -L -o "${filePath}" "${downloadTarget}"`;

exec(curlCmd, (downloadErr) => {
  if (downloadErr) {
    return reject(downloadErr);
  }

  // (Probing step goes here)
});

TypeScript

router.post('/', (req, res) => {
  const { file_path } = req.body;

  // Validate input
  if (!file_path) {
    return res.status(400).json({ error: 'Missing file_path' });
  }

  // Build the absolute path to the downloaded video
  const fullPath = path.join(process.cwd(), 'downloads', file_path);
  if (!fs.existsSync(fullPath)) {
    return res.status(404).json({ error: 'Video file not found' });
  }

  // Construct output path for clipped audio (mp3 format)
  const clipPath = fullPath.replace(/\.[^.]+$/, '.clip.mp3');
  const ffmpegCmd = `ffmpeg -y -ss 0 -t 30 -i "${fullPath}" -ac 1 -ar 16000 "${clipPath}"`;

  // Use ffmpeg to clip the first 30 seconds of audio
  exec(ffmpegCmd, async (err) => {
    if (err) {
      return res.status(500).json({ error: 'Audio clipping failed' });
    }

    try {
      // Transcribe the audio file using Whisper
      const transcription = await transcribe(clipPath);

      // Delete the temporary audio file
      fs.unlink(clipPath, () => {});
      res.json({ transcription });
    } catch (e) {
      res.status(500).json({ error: 'Transcription failed' });
    }
  });
});

Implementing Google Drive Downloader

Overview

Understanding Google Drive URL Formats

Previewing the Video (before Download)

Handling the Load Button (Client Side)

Join the 1M+ learners on CodeSignal

Backend Route: /process-url

The Google Drive Video Download Service

Step 1: Extract the File ID from the URL

Step 2: Create a Download Folder and Generate File Paths

Step 3: Download the Video with curl

Step 4: Probe the Video to Get Duration

Playback in Native Player

Backend Route: /transcribe

Summary