TransformStream 現在跨瀏覽器支援

閱讀時間約 2 分鐘
現在串流轉換在 Chrome, Safari 和 Firefox 都已支援, 他們終於準備好迎接黃金時代!
Streams API 讓你分解資源, 特別是你想要收發或轉換成小小的片段, 然後每 bit 去處理這些片段. Firefox 102 最近 開始支援TransformStream, 代表 TransformStream 現在終於可以跨瀏覽器使用. 串流轉換讓你從一個 ReadableStream 通到一個 WritableStream, 在片段上執行轉換, 或是直接消耗轉換後的結果, 如以下範例所示:
class UpperCaseTransformStream {
constructor() {
return new TransformStream({
transform(chunk, controller) {
controller.enqueue(chunk.toUpperCase());
},
});
}
}

button.addEventListener('click', async () => {
const response = await fetch('/script.js');
const readableStream = response.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(new UpperCaseTransformStream());

const reader = readableStream.getReader();
pre.textContent = '';
while (true) {
const { done, value } = await reader.read();
if (done) {
break;
}
pre.textContent += value;
}
});
avatar-img
0會員
5內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Chaol Liu的沙龍 的其他內容
Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
當你買一輛車或腳踏車, 你第一件事會先調整座位的位置和手把的高度到適合你的身體大小. 這就跟 git 配置是一樣的. 在這篇文章, 我會分享一些 git 的設定, 而且是我一直都在使用的.
今天我們引入了 Build Output API, 一個檔案系統為基底的規格, 允許任何框架都可以讓 Vercel 建置, 並且取用了 Vercel 的優勢, 也就是 Vercel 的 infrastructure building blocks, 像是 Edge Functions, Edge M
`npm query` 是從 npm v8.16.0 開始最新的指令, 他接收一個 Dependency Selector(如同在 Dependency Selector Syntax Specification 所定義的) 然後回傳一個從你的專案的 dependencies 篩選過後的 JSON
Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
當你買一輛車或腳踏車, 你第一件事會先調整座位的位置和手把的高度到適合你的身體大小. 這就跟 git 配置是一樣的. 在這篇文章, 我會分享一些 git 的設定, 而且是我一直都在使用的.
今天我們引入了 Build Output API, 一個檔案系統為基底的規格, 允許任何框架都可以讓 Vercel 建置, 並且取用了 Vercel 的優勢, 也就是 Vercel 的 infrastructure building blocks, 像是 Edge Functions, Edge M
`npm query` 是從 npm v8.16.0 開始最新的指令, 他接收一個 Dependency Selector(如同在 Dependency Selector Syntax Specification 所定義的) 然後回傳一個從你的專案的 dependencies 篩選過後的 JSON
你可能也想看
Google News 追蹤
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
訊息的即時傳遞已然成為現代社會的趨勢了, 影音也是如此, 即時! 即時! 即時! 已經是目前使用者體驗的必要元素了, 在這邊我們要分享的主題是如何在python程式語言的情境下使用ffmpeg來將音檔串流的轉換格式, 為什麼會有這樣的需求呢? 因為我們處理音檔時可能會需要統一輸出的格式, 當然背後也
Thumbnail
Android 版 Chrome 瀏覽器中新增了朗讀功能,可以將網頁文字轉換為語音並播放,方便用戶聆聽網頁內容,支援多國語言,包括繁/簡體中文、英文、日語、法文、德文等,還可調整播放速度和選擇語音。
Thumbnail
我們在「【🎓 Python的深度問答集】torchaudio 對部分段落進行音訊解碼」有分享到如何對一包包的封包進行音訊解碼, 但隨著音檔越大, 最終解碼的速度會越來越慢, 而這並非串流的本意, 串流應該就像水管一樣, 收到多少資料就運算多少量, 並不會隨著累積的容量越大而導致效能下降。 但實際
Thumbnail
Cloud Run 允許您指定哪些修訂版應該接收流量,並指定不同版本接收的流量比例。Revisions 也能使您能夠回滾到先前的版本、逐步增加新版本的流量比例,或在多個修訂版之間拆分流量。
Thumbnail
訊息的即時傳遞已然成為現代社會的趨勢了, 而扮演中樞平台的系統架構功能也漸趨複雜完整, Kafka是一個事件流平台, 正好滿足串流時代之下的即時訊息傳遞架構, 因此我們有必要深入來學習這套事件流平台, 不論是自動化、金融交易、IOT、物流…皆離不開即時的需求, 所以就讓我們蹲好馬步來好好的學習一
Thumbnail
Goingbus是一個集結了許多串流平臺的網站,提供的服務是這些串流平臺的共享,讓個人也可以輕鬆用超優惠的價格,訂閱串流平臺。他們提供的平臺都是經由正規管道途徑取得的,並且提供24小時客服服務。價格優惠非常多,可以讓使用者訂閱多種不同串流平臺,並且提供了退款服務。歡迎點擊連結加入串流共享的旅程!
Webの進化は止まることを知りません。Web1.0からWeb2.0へと移行した後、現在注目を集めているのがWeb3.0です。この記事では、Web3.0の時代について詳しく探求してみましょう。 Web3.0の定義 Web3.0は、インターネットの分散型化を推進する新しい時代を指します。中央集権的な
還在用過時的方法處理業務嗎?知道企業數位轉型能給你帶來怎樣的革命性變化嗎?跨越數位鴻溝不是選擇,而是生存的必要條件。來看看數位轉型的三大階段是如何重新定義成功企業的,以及那些成功案例背後的啟示。你準備好引領企業進入數位時代了嗎?點擊這篇文章,和我們一起探究怎麼讓你的企業蛻變升級!
Thumbnail
Webflow是一個強大的網站建設平台,它提供了一個直觀且無需編碼的方式來創建精美的網站。無論您是一個新手還是一個有經驗的網站開發者,Webflow都可以滿足您的需求。 Webflow的主要特點之一是它的可視化編輯器。您可以通過拖放元素、設計佈局和編輯內容來建立網站,而無需編寫任何代碼。
Thumbnail
Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
訊息的即時傳遞已然成為現代社會的趨勢了, 影音也是如此, 即時! 即時! 即時! 已經是目前使用者體驗的必要元素了, 在這邊我們要分享的主題是如何在python程式語言的情境下使用ffmpeg來將音檔串流的轉換格式, 為什麼會有這樣的需求呢? 因為我們處理音檔時可能會需要統一輸出的格式, 當然背後也
Thumbnail
Android 版 Chrome 瀏覽器中新增了朗讀功能,可以將網頁文字轉換為語音並播放,方便用戶聆聽網頁內容,支援多國語言,包括繁/簡體中文、英文、日語、法文、德文等,還可調整播放速度和選擇語音。
Thumbnail
我們在「【🎓 Python的深度問答集】torchaudio 對部分段落進行音訊解碼」有分享到如何對一包包的封包進行音訊解碼, 但隨著音檔越大, 最終解碼的速度會越來越慢, 而這並非串流的本意, 串流應該就像水管一樣, 收到多少資料就運算多少量, 並不會隨著累積的容量越大而導致效能下降。 但實際
Thumbnail
Cloud Run 允許您指定哪些修訂版應該接收流量,並指定不同版本接收的流量比例。Revisions 也能使您能夠回滾到先前的版本、逐步增加新版本的流量比例,或在多個修訂版之間拆分流量。
Thumbnail
訊息的即時傳遞已然成為現代社會的趨勢了, 而扮演中樞平台的系統架構功能也漸趨複雜完整, Kafka是一個事件流平台, 正好滿足串流時代之下的即時訊息傳遞架構, 因此我們有必要深入來學習這套事件流平台, 不論是自動化、金融交易、IOT、物流…皆離不開即時的需求, 所以就讓我們蹲好馬步來好好的學習一
Thumbnail
Goingbus是一個集結了許多串流平臺的網站,提供的服務是這些串流平臺的共享,讓個人也可以輕鬆用超優惠的價格,訂閱串流平臺。他們提供的平臺都是經由正規管道途徑取得的,並且提供24小時客服服務。價格優惠非常多,可以讓使用者訂閱多種不同串流平臺,並且提供了退款服務。歡迎點擊連結加入串流共享的旅程!
Webの進化は止まることを知りません。Web1.0からWeb2.0へと移行した後、現在注目を集めているのがWeb3.0です。この記事では、Web3.0の時代について詳しく探求してみましょう。 Web3.0の定義 Web3.0は、インターネットの分散型化を推進する新しい時代を指します。中央集権的な
還在用過時的方法處理業務嗎?知道企業數位轉型能給你帶來怎樣的革命性變化嗎?跨越數位鴻溝不是選擇,而是生存的必要條件。來看看數位轉型的三大階段是如何重新定義成功企業的,以及那些成功案例背後的啟示。你準備好引領企業進入數位時代了嗎?點擊這篇文章,和我們一起探究怎麼讓你的企業蛻變升級!
Thumbnail
Webflow是一個強大的網站建設平台,它提供了一個直觀且無需編碼的方式來創建精美的網站。無論您是一個新手還是一個有經驗的網站開發者,Webflow都可以滿足您的需求。 Webflow的主要特點之一是它的可視化編輯器。您可以通過拖放元素、設計佈局和編輯內容來建立網站,而無需編寫任何代碼。
Thumbnail
Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼