前端開發：H5直播起航

来源:http://www.cnblogs.com/qianduantuanzhang/archive/2017/10/28/7746174.html
-Advertisement-
Play Games

前言 前不久抽空對目前比較火的視頻直播，做了下研究與探索，瞭解其整體實現流程，以及探討移動端HTML5直播可行性方案。 發現目前 WEB 上主流的視頻直播方案有 HLS 和 RTMP，移動 WEB 端目前以 HLS 為主（HLS存在延遲性問題，也可以藉助 video.js 採用RTMP），PC端則以 ...


前言

前不久抽空對目前比較火的視頻直播，做了下研究與探索，瞭解其整體實現流程，以及探討移動端HTML5直播可行性方案。

發現目前 WEB 上主流的視頻直播方案有 HLS 和 RTMP，移動 WEB 端目前以 HLS 為主（HLS存在延遲性問題，也可以藉助 video.js 採用RTMP），PC端則以 RTMP 為主實時性較好，接下來將圍繞這兩種視頻流協議來展開H5直播主題分享。

一、視頻流協議HLS與RTMP

1. HTTP Live Streaming

HTTP Live Streaming（簡稱 HLS）是一個基於 HTTP 的視頻流協議，由 Apple 公司實現，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了對 HLS 的支持。一些常見的客戶端如：MPlayerX、VLC 也都支持 HLS 協議。
HLS 協議基於 HTTP，而一個提供 HLS 的伺服器需要做兩件事：

  1. 編碼：以 H.263 格式對圖像進行編碼，以 MP3 或者 HE-AAC 對聲音進行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；
  2. 分割：把編碼好的 TS 文件等長切分成尾碼為 ts 的小文件，並生成一個 .m3u8 的純文本索引文件；

瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，可以簡單的認為 m3u8 就是包含多個 ts 文件的播放列表。播放器按順序逐個播放，全部放完再請求一下 m3u8 文件，獲得包含最新 ts 文件的播放列表繼續播，周而複始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動態更新，ts 可以走 CDN。一個典型的 m3u8 文件格式如下：

#EXTM3U

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
gear1/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
gear2/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
gear3/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
gear4/prog_index.m3u8

可以看到 HLS 協議本質還是一個個的 HTTP 請求 / 響應，所以適應性很好，不會受到防火牆影響。但它也有一個致命的弱點：延遲現象非常明顯。如果每個 ts 按照 5 秒來切分，一個 m3u8 放 6 個 ts 索引，那麼至少就會帶來 30 秒的延遲。如果減少每個 ts 的長度，減少 m3u8 中的索引數，延時確實會減少，但會帶來更頻繁的緩衝，對服務端的請求壓力也會成倍增加。所以只能根據實際情況找到一個折中的點。

對於支持 HLS 的瀏覽器來說，直接這樣寫就能播放了：

<video src=”./bipbopall.m3u8″ height=”300″ width=”400″  preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>

註意：HLS 在 PC 端僅支持safari瀏覽器，類似chrome瀏覽器使用HTML5 video
標簽無法播放 m3u8 格式，可直接採用網上一些比較成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

2. Real Time Messaging Protocol

Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發的一套視頻直播協議，現在屬於 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server，並且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好，延遲很小，但無法支持移動端 WEB 播放是它的硬傷。
雖然無法在iOS的H5頁面播放，但是對於iOS原生應用是可以自己寫解碼去解析的, RTMP 延遲低、實時性較好。
瀏覽器端，HTML5 video
標簽無法播放 RTMP 協議的視頻，可以通過 video.js 來實現。

<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>
<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline>
<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>
</video>
<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>
<script>
videojs.options.flash.swf = ‘video.swf’;
videojs(‘example_video_1′).ready(function() {
this.play();
});
</script>

3. 視頻流協議HLS與RTMP對比

二、直播形式

 

目前直播展示形式，通常以YY直播、映客直播這種頁面居多，可以看到其結構可以分成三層：
① 背景視頻層
② 關註、評論模塊
③ 點贊動畫

而現行H5類似直播頁面，實現技術難點不大，其可以通過實現方式分為：
① 底部視頻背景使用video視頻標簽實現播放
② 關註、評論模塊利用 WebScoket 來實時發送和接收新的消息通過DOM 和 CSS3 實現
③ 點贊利用 CSS3 動畫

瞭解完直播形式之後，接下來整體瞭解直播流程。
三、直播整體流程
直播整體流程大致可分為：

  • 視頻採集端：可以是電腦上的音視頻輸入設備、或手機端的攝像頭、或麥克風，目前以移動端手機視頻為主。
  • 直播流視頻服務端：一臺Nginx伺服器，採集視頻錄製端傳輸的視頻流(H264/ACC編碼)，由伺服器端進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。
  • 視頻播放端：可以是電腦上的播放器（QuickTime Player、VLC），手機端的native播放器，還有就是 H5 的video標簽等，目前還是以手機端的native播放器為主。

 

（web前端學習交流群：328058344 禁止閑聊，非喜勿進！）

四、H5 錄製視頻

對於H5視頻錄製，可以使用強大的 webRTC （Web Real-Time Communication）是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術，缺點是只在 PC 的 Chrome 上支持較好，移動端支持不太理想。

  1. 使用 webRTC 錄製視頻基本流程
    ① 調用 window.navigator.webkitGetUserMedia()
    獲取用戶的PC攝像頭視頻數據。
    ② 將獲取到視頻流數據轉換成 window.webkitRTCPeerConnection
    (一種視頻流數據格式)。
    ③ 利用 WebScoket
    將視頻流數據傳輸到服務端。

註意：

 

 

雖然Google一直在推WebRTC，目前已有不少成型的產品出現，但是大部分移動端的瀏覽器還不支持 webRTC（最新iOS 10.0也不支持），所以真正的視頻錄製還是要靠客戶端（iOS,Android）來實現,效果會好一些。

WebRTC支持度
WebRTC支持度
  1. iOS原生應用調用攝像頭錄製視頻流程
    ① 音視頻的採集，利用AVCaptureSession和AVCaptureDevice可以採集到原始的音視頻數據流。
    ② 對視頻進行H264編碼，對音頻進行AAC編碼，在iOS中分別有已經封裝好的編碼庫（x264編碼、faac編碼、ffmpeg編碼）來實現對音視頻的編碼。
    ③ 對編碼後的音、視頻數據進行組裝封包。
    ④ 建立RTMP連接並上推到服務端。

五、搭建Nginx+Rtmp直播流服務

  1. 安裝nginx、nginx-rtmp-module
    ① 先clone nginx項目到本地：
brew tap homebrew/nginx

② 執行安裝nginx-rtmp-module

brew install nginx-full –with-rtmp-module

2. nginx.conf配置文件，配置RTMP、HLS

查找到nginx.conf配置文件（路徑/usr/local/etc/nginx/nginx.conf），配置RTMP、HLS。

① 在http節點之前添加 rtmp 的配置內容：

② 在http中添加 hls 的配置

3. 重啟nginx服務

重啟nginx服務，瀏覽器中輸入 http://localhost:8080，是否出現歡迎界面確定nginx重啟成功。

nginx -s reload

六、直播流轉換格式、編碼推流

當伺服器端接收到採集視頻錄製端傳輸過來的視頻流時，需要對其進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。通常使用的常見編碼庫方案，如x264編碼、faac編碼、ffmpeg編碼等。
鑒於 FFmpeg 工具集合了多種音頻、視頻格式編碼，我們可以優先選用FFmpeg進行轉換格式、編碼推流。

1.安裝 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

視頻文件地址：/Users/gao/Desktop/video/test.mp4
推流拉流地址：rtmp://localhost:1935/rtmplive/home，rtmp://localhost:1935/rtmplive/home

//RTMP 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
//HLS 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

註意：
當我們進行推流之後，可以安裝VLC、ffplay（支持rtmp協議的視頻播放器）本地拉流進行演示
3.FFmpeg推流命令
① 視頻文件進行直播

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/test
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② 推流攝像頭＋桌面+麥克風錄製進行直播

ffmpeg -f avfoundation -framerate 30 -i “1:0″ \-f avfoundation -framerate 30 -video_size 640x480 -i “0” \-c:v libx264 -preset ultrafast \-filter_complex ‘overlay=main_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

更多命令，請參考：
FFmpeg處理RTMP流媒體的命令大全
FFmpeg常用推流命令

七、H5 直播視頻播放

移動端iOS和 Android 都天然支持HLS協議，做好視頻採集端、視頻流推流服務之後，便可以直接在H5頁面配置 video 標簽播放直播視頻。

<video controls preload=“auto” autoplay=“autoplay” loop=“loop” webkit-playsinline>
<source src=“http://10.14.221.8/hls/test.m3u8″ type=“application/vnd.apple.mpegurl” />
<p class=“warning”>Your browser does not support HTML5 video.</p>
</video>

八、總結

本文從視頻採集上傳，伺服器處理視頻推流，以及H5頁面播放直播視頻一整套流程,具體闡述了直播實現原理，實現過程中會遇到很多性能優化問題。

① H5 HLS 限制必須是H264+AAC編碼。
② H5 HLS 播放卡頓問題，server 端可以做好分片策略，將 ts 文件放在 CDN 上，前端可儘量做到 DNS 緩存等。
③ H5 直播為了達到更好的實時互動，也可以採用RTMP協議，通過video.js
實現播放。


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

-Advertisement-
Play Games
更多相關文章
  • 深入理解line-height與vertical-align——前端佈局常用屬性
    line-height、font-size、vertical-align是設置行內元素佈局的關鍵屬性。這三個屬性是相互依賴的關係，改變行間距離、設置垂直對齊等都需要它們的通力合作。下麵將主要介紹line-height與vertical-align： 行高 【定義】 line-height行高是指文本 ...
  • 關於函數執行和定義
    函數執行的時候,記住"JavaScript中的函數運行在它們被定義的作用域中,而不是被執行的作用域中". 一個簡單的例子 other調用的時候,會調用其內部的now函數,now函數調用相當於調用了getInfo,getInfo調用的時候,會先找自己函數內的作用域是否有info這個變數,自己沒有,就沿 ...
  • 【WebGL】《WebGL編程指南》讀書筆記——第六章
    一、前言 最近重感冒發燒，媽蛋好難受，請假了3天，駕校也沒去，簡直僵硬！今天繼續WebGL的學習。 二、正文 A. GLSL支持兩種數據值類型： B. [] 運算符 []運算符通過數組下標來訪問矢量或矩陣的元素，例： float m23 = m4[1][2]; m4的第2列中的第3個元素 C. 變數 ...
  • jq簡單實現切換隱藏與顯示同時切換圖標
    HTML代碼： JS代碼: 以上的就是實現 隱藏/顯示 效果的大概流程，因為本人是新手有些不完美的地方還請多多包涵。 ...
  • HTML5新特性，語義化
    面試題之HTML5新特性，語義化 HTML5新特性 簡潔的DOCTYPE： HTML5 只有一個簡單的文檔類型： ，表示瀏覽器會按照標準模式解析。 簡單易記的編碼類型 你現在可以在meta 標簽中使用”charset”：`` 腳本和鏈接無需type 更加語義化的新增標簽 比如說： 等 視頻和音頻 表 ...
  • 通欄導航欄的製作，綜合使用CSS屬性，代碼不超過30行
    這篇文章，小編帶領大家一同做一個利用CSS技術實現的導航欄。通過這個導航欄的製作，希望大家能夠對前幾篇文章中學習到的CSS屬性能有一個整體的認識，並能夠達到靈活運用的程度。 承接文章：靈活控制塊級元素在一行內顯示，CSS浮動屬性，知道原理就很簡單 技術等級：初級 | 適合前端開發的初學者閱讀學習。 ...
  • javascript面向對象筆記（一）
    ECMAscript對象（以下簡稱對象）： ECMA-262把對象定義為：無序屬性的集合，其屬性可以包含基本值、對象或者函數。 對象的每個屬性或方法都有一個名字，而每個名字都映射到一個值。值可以是數據或函數。 每個對象都是基於一個引用類型創建的，這個引用類型可以是原生類型，也可以是開發人員定義的類型 ...
  • jquery easyui：tab自動載入第一個tab內容
    $('#resourceTabs').tabs('unselect', 0);$('#resourceTabs').tabs('select', 0); ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類