Intercepting Social Media Video Streams: A 40-Line Console Script

#javascript #webscraping

Ever wanted to grab a video from a social media platform, but didn't want to use shady browser extensions? Inspecting the <video src> only showed some weird blob or couldn't even find where the video element is?

Here's a small script you can paste into your browser console and it will intercept and log videos that get streamed. Of course, it won't work for all platforms (e.g. DRM-protected content, some platforms use different streams), but may give you an idea on how to start on your own solution. The example is currently valid for Instagram. With one tiny issue, Instagram separates video and audio streams so if you need both you will need to merge them using any of the various video editing tools out there.

A note before continuing: I do not encourage downloading content you do not own, this is for research purposes only.

How it works:

It overrides fetch() and XMLHttpRequest.open() to intercept outgoing network requests. When it spots an .mp4 URL, it strips the byte-range params and logs the clean URL. The getVideoUrls() helper lets you retrieve everything collected, useful if your console got noisy.

// Instagram Story Video URL Extractor
(() => {
    const videoUrls = new Set();

    // Strip start and end time params
    const cleanUrl = (url) => {
        const u = new URL(url);
        u.searchParams.delete('bytestart');
        u.searchParams.delete('byteend');
        return u.toString();
    };

    // Intercept fetch
    const origFetch = window.fetch;
    window.fetch = async function(url, ...args) {
        const urlStr = url?.toString?.() || url;

        // Domain and extension matcher, you can drop the domain to use this elsewhere
        if (urlStr.includes('fbcdn.net') && urlStr.includes('.mp4')) {
            const clean = cleanUrl(urlStr);
            if (!videoUrls.has(clean)) {
                videoUrls.add(clean);
                console.log('> Video found:', clean);
            }
        }
        return origFetch.apply(this, [url, ...args]);
    };

    // Intercept XHR
    const origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url) {

        // Domain and extension matcher, you can drop the domain to use this elsewhere
        if (url?.includes?.('fbcdn.net') && url?.includes?.('.mp4')) {
            const clean = cleanUrl(url);
            if (!videoUrls.has(clean)) {
                videoUrls.add(clean);
                console.log('> Video found:', clean);
            }
        }
        return origOpen.apply(this, arguments);
    };

    // Helper to get all collected URLs
    window.getVideoUrls = () => {
        const urls = [...videoUrls];
        console.log(`\nFound ${urls.length} video(s):\n`);
        urls.forEach((url, i) => console.log(`${i + 1}. ${url}\n`));
        return urls;
    };

    console.log('Extractor active - play stories/reels, then run getVideoUrls()');
})();