Instagram 网页版视频是如何限制在 devtools 中找到视频链接进行直接下载的?

今天想下载 IG 的一个视频, 于是打开了网页端, 找到视频标签, 查看是 blob, 于是去 Network 里找 m3u8, 但是没有找到.

测试链接: https://www.instagram.com/reel/CdYOo_QIB5L/

video 标签:

<video class="tWeCl" crossorigin="anonymous" playsinline="" poster="https://scontent-hkt1-2.cdninstagram.com/v/t51.2885-15/280525371_399280442062025_5345542004741217395_n.jpg" preload="none" type="video/mp4" src="blob:https://www.instagram.com/4feb10a9-7a9d-4d3c-b63a-6773a391bded" loop="" style="display: block;"></video>

于是就很好奇, 查看了一下, 它使用分段的 mp4 进行拼接成的视频, 视频链接如下:

links = [
    'https://scontent-hkt1-2.cdninstagram.com/v/t66.30100-16/48765482_566184564823119_7249730986057316274_n.mp4?_nc_ht=scontent-hkt1-2.cdninstagram.com&_nc_cat=1&_nc_ohc=4Ba61mlOYE4AX9Ym6rG&edm=APfKNqwBAAAA&ccb=7-4&oh=00_AT-ddAJEjKnOOOGslcGOVkxctcfcao29aLwNDjjWSC7d5g&oe=627D7BBA&_nc_sid=74f7ba&bytestart=0&byteend=782',
    'https://scontent-hkt1-2.cdninstagram.com/v/t66.30100-16/48765482_566184564823119_7249730986057316274_n.mp4?_nc_ht=scontent-hkt1-2.cdninstagram.com&_nc_cat=1&_nc_ohc=4Ba61mlOYE4AX9Ym6rG&edm=APfKNqwBAAAA&ccb=7-4&oh=00_AT-ddAJEjKnOOOGslcGOVkxctcfcao29aLwNDjjWSC7d5g&oe=627D7BBA&_nc_sid=74f7ba&bytestart=783&byteend=970',
    'https://scontent-hkt1-2.cdninstagram.com/v/t66.30100-16/48765482_566184564823119_7249730986057316274_n.mp4?_nc_ht=scontent-hkt1-2.cdninstagram.com&_nc_cat=1&_nc_ohc=4Ba61mlOYE4AX9Ym6rG&edm=APfKNqwBAAAA&ccb=7-4&oh=00_AT-ddAJEjKnOOOGslcGOVkxctcfcao29aLwNDjjWSC7d5g&oe=627D7BBA&_nc_sid=74f7ba&bytestart=971&byteend=22557',
    'https://scontent-hkt1-2.cdninstagram.com/v/t66.30100-16/48765482_566184564823119_7249730986057316274_n.mp4?_nc_ht=scontent-hkt1-2.cdninstagram.com&_nc_cat=1&_nc_ohc=4Ba61mlOYE4AX9Ym6rG&edm=APfKNqwBAAAA&ccb=7-4&oh=00_AT-ddAJEjKnOOOGslcGOVkxctcfcao29aLwNDjjWSC7d5g&oe=627D7BBA&_nc_sid=74f7ba&bytestart=22558&byteend=161856',
    'https://scontent-hkt1-2.cdninstagram.com/v/t66.30100-16/48765482_566184564823119_7249730986057316274_n.mp4?_nc_ht=scontent-hkt1-2.cdninstagram.com&_nc_cat=1&_nc_ohc=4Ba61mlOYE4AX9Ym6rG&edm=APfKNqwBAAAA&ccb=7-4&oh=00_AT-ddAJEjKnOOOGslcGOVkxctcfcao29aLwNDjjWSC7d5g&oe=627D7BBA&_nc_sid=74f7ba&bytestart=161857&byteend=304637',
  ];

于是自己写了下面这段代码, 手动拼接然后进行下载:

  var blobs = await Promise.all(links.map(async link=> {
    return await fetch(link).then(r=>r.blob())
  }));
  var combinedVideoBlob = blobs.reduce((a, b) => new Blob([a, b], { type: 'video/mp4' }));
  var downloadA = document.createElement("a");
  downloadA.download = "a.mp4";
  downloadA.href = window.webkitURL.createObjectURL(combinedVideoBlob);
  downloadA.click();

最终下载成功, 但是视频只有声音没有图像.

想知道代码哪里出了问题, 为什么视频没有图像?
有什么方便的浏览器插件, 检测到视频会悬浮一个下载按钮, 获取下载直链
有什么方式避免用户(开发者)打开 devtools 找到视频地址进行下载?