快訊!我的新書今天開始可以在天瓏網路書店預購啦!歡迎大家前往訂購!
>>>> AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題 <<<<

Live Streaming

  • MSE(Media Source Extensions)介紹

    MSE(Media Source Extensions)介紹

    什麼是MSE? 媒體源擴展(Media Source Extensions, MSE)是一項由W3C制定的網頁API標準,旨在通過JavaScript動態生成和控制媒體流,從而實現無插件且基於Web的流媒體播放功能。MSE允許開發者將媒體數據源附加到HTMLMediaElement(如<audio>和<video>標籤),並動態地為這些元素構建媒體源 MSE的主要功能 MSE的應用場景 MSE的優勢 如何使用MSE 1. 確認瀏覽器支援度,可以使用以下JavaScript進行檢查: 2. 創建MediaSource對象 創建一個MediaSource對象並將其附加到<video>元素上: 3. 處理sourceopen事件 4. 獲取和附加媒體片段 使用fetch API或其他方法來獲取媒體片段,並將其附加到SourceBuffer中: 5. 處理緩衝更新 MSE的瀏覽器支持度 請見此:https://caniuse.com/mediasource 一直以來有低延遲需求的高分發直播需求都會很困擾iPhone對MSE的不支援 但是好消息!!!…

  • WebRTC 點對點特性帶來的複雜性

    WebRTC 點對點特性帶來的複雜性

    什麼是WebRTC WebRTC(Web Real-Time Communication)是一種開源技術,允許瀏覽器和移動應用程序進行音頻、視頻和數據的實時通信。它能夠在瀏覽器內直接進行音頻和視頻通話,無需安裝任何插件或額外的軟件,這大大簡化了用戶的操作。支持多種平台,包括Web、Android、iOS、Windows、MacOS和Linux。其非常的低延遲,這對於需要即時反應的應用場景(如視頻會議、在線遊戲等)非常重要。 WebRTC的關鍵技術 參考資料:https://webrtc.github.io/webrtc-org/architecture/ WebRTC 的架構分為兩個主要層次,一層是針對瀏覽器開發者的 WebRTC C++ API,另一層是針對網絡應用開發者的 Web API。 WebRTC 支援的音訊與影像引擎具備多種功能,包括各種音訊編解碼器(如 iSAC、iLBC、Opus)、回音消除(AEC)、降噪(NR)、影像編解碼器(如 VP8)、影像抖動緩衝(Video Jitter Buffer)以及畫面增強等。除此之外,WebRTC 的傳輸與會話層包含 RTP 網路層、STUN/ICE 用於網路連線建立,以及抽象的會話管理層,讓應用開發者可自行選擇協議實作方式。 技術目標與限制 WebRTC…

  • 利用emscripten來編譯WebAssembly 

    利用emscripten來編譯WebAssembly 

    WebAssembly 是甚麼 WebAssembly(Wasm)是一種二進制格式的指令集,用於在網頁瀏覽器中高效地執行程式碼。它由 W3C 標準組織制定,目的是提供一種高性能、跨平台的執行環境,讓開發者可以在網頁上運行接近原生效能的應用程式,尤其是使用 C、C++、Rust 等語言編寫的程式碼。 以下是 WebAssembly 的主要特點: WebAssembly 是一種讓網頁能夠運行接近原生應用效能的技術,特別適合對性能要求較高的應用,同時保持了跨平台的便利性。 WebAssembly 的應用場景 使用Emscripten將C專案編譯為WebAssembly Emscripten 是一個開源編譯器工具,可以將用 C 和 C++ 編寫的程式碼編譯成 WebAssembly(.wasm)或 JavaScript,使這些程式能夠在瀏覽器中運行。它的主要目的是讓開發者能夠將桌面應用程式、遊戲或其他基於 C/C++ 的軟體移植到網頁環境中。 具體來說,Emscripten…

  • OBS開啟時可使用的相關指令

    官方介紹 官方啟動指令介紹頁面: https://obsproject.com/kb/launch-parameters 如何使用啟動指令 要使用自定義啟動參數創建 OBS Studio 的捷徑: 若要通過計劃任務或其他自動方式啟動 OBS Studio,請確保也設置了工作目錄(「開始於…」),該目錄必須指向 obs64.exe 所在的文件夾。 啟動參數介紹 OBS Studio 支援的啟動參數(Launch Parameters)。這些參數用於自動化和便攜式使用。每個參數都有特定的功能,可以在啟動 OBS Studio 時進行特定的操作或設定。 參數及其描述如下: 這些參數提供了更多的控制和靈活性,使使用者可以根據自己的需求和工作流程自定義 OBS Studio…

  • JavaScript H.264 解碼器介紹 – Broadway

    Broadway介紹 Broadway 是一個 JavaScript H.264 解碼器。H.264 是一個廣泛使用的視頻壓縮標準,Broadway 提供了一種在瀏覽器中,特別是不支持該格式的瀏覽器中,直接解碼 H.264 視頻的能力。 主要特點 Live Demo 當首次訪問上述示範頁面時,可能會感覺視頻播放器的速度有點慢,這是因為它需要首先下載整個視頻才能開始播放。但請有耐心,一旦視頻下載完畢,您可以點擊播放器來觀看視頻。 上面的左上角播放器在主線程上運行,而其餘的播放器在背景工作線程上運行。 本機端使用範例 把Player資料夾內的檔案下載下來,放進本地端的node.js專案的Player資料夾內 檔案連結: https://github.com/mbebenita/Broadway/tree/master/Player 接著撰寫node.js程式 接著開啟電腦的http://127.0.0.1:8080/treeDemo.html,就可以在本機運行可動的範例了

  • 幾個使用PYAV的簡單範例

    使用PYAV的前提 PyAV 是FFmpeg函式庫的 Pythonic 綁定。目標是提供底層庫的所有功能和控制,但盡可能管理細節。 PyAV 可透過容器、串流、封包、編解碼器和影格直接、精確地存取您的媒體。它公開了該資料的一些轉換,並幫助您將資料傳入/傳出其他套件(例如 Numpy 和 Pillow)。 這種權力確實伴隨著一些責任,因為與媒體合作非常複雜,PyAV 無法將其抽象化或為您做出所有最佳決策。如果該ffmpeg命令無需您竭盡全力即可完成工作,那麼 PyAV 可能會成為障礙而不是幫助。 所以如果我們想要在推流前處理串流、或者是拉流後處理串流內容,或者是更改串流編碼的相關資訊等【較難直接使用ffmpeg指令達到的事情時】,才較適合使用PYAV。 用RTMP的方式推流 範例程式碼如下: 輸出透明背景的影片 若要使用 pyav (Python 的 ffmpeg/avconv 綁定) 來輸出具有透明背景的影片,你通常會使用像…

  • ,

    pyav介紹

    甚麼是pyav PyAV是FFmpeg的Python封裝,旨在提供底層庫的全部功能和控制,同時盡可能管理繁瑣的細節。PyAV用於直接和精確地訪問媒體,包括容器、流、封包、編解碼器和幀。它還提供了一些數據轉換功能,並幫助您在其他程序之間傳送數據(例如Numpy和Pillow)。 然而,由於媒體處理非常複雜,PyAV無法完全抽像或為您做出所有最佳決策。 如果FFmpeg命令可以滿足您的需求,那麼PyAV可能會成為阻礙。 但在必要時,PyAV是一項關鍵工具。安裝PyAV可能有一些複雜的依賴關係,但現在可以在PyPI上找到針對Linux、Mac和Windows的二進位安裝套件。 官方網站: https://pyav.org/docs/stable/ GitHub位置: https://github.com/PyAV-Org/PyAV 建議使用場景 pyAV 和 ffmpeg 都是用來處理影音的工具,但它們的使用場景和方法有所不同。以下是對兩者的比較,以及根據不同情境的建議: 結論: 安裝方法 使用以下方式安裝(如果下面的指令失敗的話,請參考此頁面安裝: https://pyav.org/docs/stable/overview/installation.html) 後來我是使用下面這方法安裝成功的(windows) 簡單的拉取RTMP源流的範例 以下的範例會拉取rtmp://127.0.0.1/live/testStream並使用OpenCV的函數顯示影像在視窗裡

  • 使用ffmpeg濾鏡功能做影片合成

    下載ffmpeg https://ffmpeg.org/download.html 推一個時鐘文字的影片 ffmpeg的指令如下 使用虛擬鏡頭來推流 極低延遲播放串流 把虛擬鏡頭和某個線上串流做綠幕合成 更多詳細設置串流的方式 `-r` 轉成多少 fps `-y` (global) Overwrite output files without asking. `-i` 輸入檔案 `-c:v` video codec `-profile:v` video…

  • 限制ffmpeg初始連接的時間

    ffmpeg中的analyzeduration和probesize 在FFmpeg中,-analyzeduration和-probesize是用於設置媒體分析的參數。 -analyzeduration參數用於指定分析媒體文件的持續時間。當你在FFmpeg中打開一個媒體文件時,它需要一些時間來分析文件的內容,以確定其格式、編解碼器和其他相關的信息。這個參數設置了分析的時間長度。較長的-analyzeduration值可能會導致更準確的分析結果,但同時也會增加打開文件的時間。預設值為5,000,000微秒(5秒)。 -probesize參數用於指定分析媒體文件時讀取的數據大小。當FFmpeg分析媒體文件時,它會從文件中讀取一些數據並進行分析。這個參數設置了從媒體文件中讀取的數據大小。較大的-probesize值可能會導致更準確的分析結果,但同時也會增加分析的時間和記憶體使用量。預設值為50,000字節。 前置metadata 播放器在網絡點播場景下去請求MP4 視頻數據,需要先獲取到文件的metadata,解析出該文件的編碼、幀率等信息後才能開始邊下邊播。如果MP4 的metadata 數據塊被編碼在文件尾部,這種情況會導致播放器只有下載完整個文件後才能成功解析並播放這個視頻。對於這種視頻,我們最好能夠在服務端將其重新編碼,將metadata 數據塊轉移到靠近文件頭部的位置,保證播放器在線請求時能較快播放。比如FFmpeg 的下列命令就可以支持這個操作: 控制讀取的數據量大小 在外部可以通過設置 probesize 和 analyzeduration 兩個參數來控制該函數讀取的數據量大小和分析時長為比較小的值來降低 avformat_find_stream_info 的耗時,從而優化播放器首屏秒開。但是,需要注意的是這兩個參數設置過小時,可能會造成預讀數據不足,無法解析出碼流信息,從而導致播放失敗、無音頻或無視頻的情況。所以,在服務端對視頻格式進行標準化轉碼,從而確定視頻格式,進而再去推算 avformat_find_stream_info 分析碼流信息所兼容的最小的 probesize 和analyzeduration,就能在保證播放成功率的情況下最大限度地區優化首屏秒開。 probesize 和 analyzeduration太短的可能影響 如果將-probesize和-analyzeduration設置得太短,可能會導致以下問題:

  • Chunked Encoding介紹

    甚麼是Chunked Encoding Chunked encoding(分塊編碼)是一種HTTP/1.1協議中的傳輸編碼方式,用於將HTTP消息主體分成多個塊(chunks),以便在網絡上進行有效傳輸。分塊編碼主要用於動態生成的內容,以及在事先不知道內容大小的情況下傳輸數據。 分塊編碼的工作原理如下: 要使用分塊編碼,服務器需要在HTTP響應頭中設置Transfer-Encoding字段為chunked。這告訴客戶端,接收到的數據將使用分塊編碼格式。 分塊編碼的主要優點是允許服務器在不知道最終內容大小的情況下開始傳輸數據。這對於動態生成的內容、實時數據流和大文件傳輸非常有用。此外,分塊編碼還可以實現數據的即時壓縮和傳輸,從而提高傳輸效率。 設定nginx以支持Chunked Encoding 以下是一個簡單的nginx.conf範例,用於支持在http://127.0.0.1/live下的文件開啟chunked encoding。此配置檔案會將請求代理到後端應用伺服器(例如:Node.js、Python或其他後端應用)進行處理。請注意,這裡假設後端應用伺服器已經正確配置並支持分塊編碼。 這個配置檔案將Nginx設置為代理位於http://127.0.0.1/live的請求,並將請求轉發到後端應用伺服器。在location /live部分,使用chunked_transfer_encoding on;指令開啟分塊編碼。 觀察你的檔案是否有啟用Chunked Encoding 我們可以從伺服器的回應看到這個伺服器的檔案傳輸是否有支持Chunked Encoding,如下圖


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!