Quiero escribir un botón donde el usuario haga clic para descargar automáticamente un video desde una URL.

He investigado de alguna manera, aquí está mi implementación.

 const startDownload = ( url: string | undefined, filename = 'Tiktok_livestream.mp4', ) => { if (!download?.visible || clickedDownloadRef.current || !url) { console.log('here', download, clickedDownloadRef.current, url); return; } clickedDownloadRef.current = true; fetch(url) .then(response => response.blob()) .then(blob => { console.log('finish downloading blob'); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename; link.click(); }) .catch(console.error); console.log('download'); };

Entonces, la idea es que usemos fetch para descargar los datos en blob. Luego guárdalo.

El problema de este método es que no tiene una buena UX para archivos grandes. Porque el usuario solo ve el widget de archivo descargado de Chrome después de que se realiza la búsqueda (lo que lleva mucho tiempo para archivos grandes). en comparación con una descarga de video nativo donde se mostrará cuando el usuario inicie la descarga, y el usuario también puede ver el progreso. Entonces, me pregunto si hay alguna otra forma que active el widget de Chrome justo después de que el usuario haga clic en el botón y muestre continuamente el progreso.

El widget del que estoy hablando es el nativo que generalmente se muestra automáticamente cuando Chrome está descargando algo.