前端使用 fetch() 流式下載.mp4視頻文件,跟蹤進度

来源:https://www.cnblogs.com/xiyouchen/archive/2023/01/28/17070200.html
-Advertisement-
Play Games

參考:https://www.cnblogs.com/lxlx1798/articles/16969244.html 要麼使用流讀取器,要麼使用 Reponse 的方法來獲取結果,不能同時使用兩種方法來讀取相同的響應。 直接獲取: Response.blob() 方法返回一個 resolve 返回值 ...


參考:https://www.cnblogs.com/lxlx1798/articles/16969244.html

要麼使用流讀取器,要麼使用 Reponse 的方法來獲取結果,不能同時使用兩種方法來讀取相同的響應。

直接獲取:

Response.blob() 方法返回一個 resolve 返回值為 Blob 對象的 Promise

fetch(videoUrl).then(res => {
                const p = res.blob()
                return res.blob()
            }).then(blob => {
                const a = document.createElement("a");
                a.style.display = 'none'
                document.body.append(a)
                const url = window.URL.createObjectURL(blob)
                a.href = url
                a.download = item.name
                a.click()
                document.body.removeChild(a)
                window.URL.revokeObjectURL(url)
            })

流讀取:

Response.body 是一個 ReadableStream 對象

ReadableStream.getReader() 創建流讀取器,並且會把流鎖定,預設返回的是 ReadableStreamDefaultReader 類型

The getReader() method of the ReadableStream interface creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.

response.headers.get('Content-Length') 得到響應的總長度

ReadableStreamDefaultReader.read() 方法得到一個 Promise 對象,可以獲取到流內部序列中的下一個分塊,迴圈調用直到完成,同時收集數據得到一個 Uint8Array 數組

最後轉換成 Blob 就可以完成下載了

const videoUrl = 'video url'
const response = await fetch(videoUrl) const reader = response.body.getReader() const contentLength = +response.headers.get('Content-Length') let receivedLength = 0 let chunks = [] while (true) { const { done, value } = await reader.read(); if (done) { break } chunks.push(value) receivedLength += value.length // 下載進度 console.log(`Reveived ${receivedLength} of ${contentLength}`) } const a = document.createElement("a"); a.style.display = 'none' document.body.append(a) const url = window.URL.createObjectURL(new Blob(chunks, { type: 'video/mp4'} )) a.href = url a.download = item.name a.click() document.body.removeChild(a) window.URL.revokeObjectURL(url)

用到的一些方法:

fetch()

The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.

The promise resolves to the Response object representing the response to your request.

fetch() promise only rejects when a network error is encountered (which is usually when there's a permissions issue or similar). A fetch() promise does not reject on HTTP errors (404, etc.). Instead, a then() handler must check the Response.ok and/or Response.status properties.

WindowOrWorkerGlobalScope is implemented by both Window and WorkerGlobalScope, which means that the fetch() method is available in pretty much any context in which you might want to fetch resources.

The fetch() method is controlled by the connect-src directive of Content Security Policy rather than the directive of the resources it's retrieving.

 

ReadableStream.getReader()

The getReader() method of the ReadableStream interface creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.

ReadableStreamDefaultReader.read()

The read() method of the ReadableStreamDefaultReader interface returns a Promise providing access to the next chunk in the stream's internal queue.

URL.createObjectURL()

The URL.createObjectURL() static method creates a string containing a URL representing the object given in the parameter.

The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.

To release an object URL, call revokeObjectURL().

URL.revokeObjectURL()

The URL.revokeObjectURL() static method releases an existing object URL which was previously created by calling URL.createObjectURL().

Call this method when you've finished using an object URL to let the browser know not to keep the reference to the file any longer.

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Win11安裝VMware Workstation Pro,Centos,Xshell,Xftp(Linux學習需要) 註意:1.win11不能安裝太低版本的VMware Workstation Pro,否則啟動linux會出現藍屏 ​ 2.win11是預設沒有開虛擬機平臺支持的,所以同時也要開啟, ...
  • 前言 本篇我將介紹 Keil C51 和 MDK-ARM 兩大集成開發環境的安裝包下載方法,幫助大家安全快速的從官網下載安裝包。 博主編寫了軟體安裝教程,可以在安裝包下載完成後,跳轉觀看圖文教程進行軟體的安裝與註冊。 待更新 Keil 官網 Keil 官網 >> 點擊跳轉 Keil C51 官網下載 ...
  • 痞子衡單片機排行榜(2022Q4) 繼2020年開辦的《痞子衡嵌入式半月刊》之後,從2023年1月份開始痞子衡將為大家帶來新項目《痞子衡單片機排行榜》(一年分四季,每個季度發佈一期),以MCU主頻和Coremark跑分為基礎(後期會加入更多指標),搜羅國內外8051/ARM/RISC-V等不同賽道的 ...
  • 固件更新 需將小米AX9000路由支持安裝Docker,但正式版並沒有該功能需更新為開發板Rom,直接在小米路由官網下載固件更新即可,當前正式版最新固件為1.0.165,開發板固件為:1.0.140; 固件更新為140開發版本後即可在小米路由管理頁面的高級設置項中看到DOCKER的選項; 安裝Doc ...
  • 一:背景 1. 講故事 大家都知道資料庫應用程式 它天生需要圍繞著數據文件打轉,諸如包含數據的 .mdf,事務日誌的 .ldf,很多時候深入瞭解這兩類文件的合成原理,差不多對資料庫就能理解一半了,關於 .mdf 的合成前面的文章已經有所介紹,這篇我們來聊一下 .ldf 的一些內部知識,比如 LSN。 ...
  • 本文基於此: Flutter中文網 一、安裝和運行Flutter的系統環境要求 想要安裝並運行 Flutter,你的開發環境需要最低滿足以下要求: 操作系統:macOS 磁碟空間:2.8 GB(不包括IDE/tools的磁碟空間)。 工具:Flutter使用git進行安裝和升級。我們建議安裝Xcod ...
  • 主題說明 打開博客園的隨筆詳細頁、標簽頁等,都是整頁重新載入,比較影響體驗。SPA 應用可以減少整頁載入,實現局部刷新,本皮膚通過 Vue3 + TS + Vite 開發的。有些細節待日後逐步完善,隨筆的閱讀和使用基本上沒有問題,文章、日記、部分側邊欄內容還沒有實現。 倉庫地址:GitHub,請點個 ...
  • 值和類型 八種數據類型 undefined、null、boolean、number、string、symbol、bigint、object 原始值和引用值 原始值:按值訪問。值存儲在棧中。變數賦值傳遞時會創建該值的副本,兩個變數(複製與被覆制)完全獨立。 常見原始值類型:undefined、null ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...