1. 程式人生 > >HTML5 視訊直播(一)

HTML5 視訊直播(一)

提醒:本文最後更新於 776 天前,文中所描述的資訊可能已發生改變,請謹慎使用。

前不久工作中遇到了在移動 WEB 端直播視訊的需求,研究了一下相關技術,記錄一下。

目前 WEB 上主流的視訊直播方案有 HLS 和 RTMP,移動 WEB 端目前就只有 HLS 能用,我們重點介紹它。

update @ 2016.11.25,本文寫於一年半前,如今有一個可以用於移動端的 FLV 方案,非常不錯,推薦大家關注。詳見:https://github.com/Bilibili/flv.js

HTTP Live Streaming

HTTP Live Streaming(簡稱 HLS)是一個基於 HTTP 的視訊流協議,由 Apple 公司實現,Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支援 HLS,高版本 Android 也增加了對 HLS 的支援。一些常見的客戶端如:MPlayerX、VLC 也都支援 HLS 協議。

HLS 協議基於 HTTP,非常簡單。一個提供 HLS 的伺服器需要做兩件事:

  • 編碼:以 H.263 格式對影象進行編碼,以 MP3 或者 HE-AAC 對聲音進行編碼,最終打包到 MPEG-2 TS(Transport Stream)容器之中;
  • 分割:把編碼好的 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="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"
height="300" width="400"></video>

對於不支援 m3u8 的瀏覽器,比如 PC / Mac 上的 Chrome,需要藉助 Flash 來實現了。網上有一些較為成熟的方案可以直接用,如:Sewise Player(免費)、JW Player(收費)。

Real Time Messaging Protocol

Real Time Messaging Protocol(簡稱 RTMP)是 Macromedia 開發的一套視訊直播協議,現在屬於 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server,並且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好,延遲很小,但無法支援移動端 WEB 播放是它的硬傷。

前面提到的 JW Player 能很好的播放採用 RTMP 協議的直播服務。

這次先寫這麼多,下一篇寫一個另類的直播方案。

--EOF--

提醒:本文最後更新於 776 天前,文中所描述的資訊可能已發生改變,請謹慎使用。

相關推薦

HTML5 視訊直播

提醒:本文最後更新於 776 天前,文中所描述的資訊可能已發生改變,請謹慎使用。 前不久工作中遇到了在移動 WEB 端直播視訊的需求,研究了一下相關技術,記錄一下。 目前 WEB 上主流的視訊直播方案有 HLS 和 RTMP,移動 WEB 端目前就只有 HLS 能用,我們重點介紹它。 upda

HTML5 視訊直播

提醒:本文最後更新於 1349 天前,文中所描述的資訊可能已發生改變,請謹慎使用。 連續寫了兩篇有關視訊直播的文章之後,有同學問我為什麼沒有 WebRTC 相關內容。實際上一開始我就說過,我的需求是在移動 WEB 端上直播視訊,而移動端瀏覽器現階段對「WebRTC 的支援度」非常不樂觀,所以我就

HTML5 視訊直播

提醒:本文最後更新於 1355 天前,文中所描述的資訊可能已發生改變,請謹慎使用。 上篇部落格中,我介紹了目前移動端唯一可行的 HTML5 直播方案:HLS。實際上,HLS 除了上回提到過的延遲很大這個缺點之外,在 iOS 的 Safari 瀏覽器中還只能全屏播放,也無法做到自動播放,這個是 i

iOS直播技術分享-音視訊採集

1、iOS直播技術的流程        直播技術的流程大致可以分為幾個步驟:資料採集、影象處理(實時濾鏡)、視訊編碼、封包、上傳、雲端(轉碼、錄製、分發)、直播播放器。 資料採集:通過攝像頭和麥克風獲得實時的音視訊資料;影象處理:將資料採集的輸入流進行實時濾鏡,得到我們美化之後的視訊幀;視訊編碼:編碼分

HTML5的學習HTML5標籤

    HTML5是WHATWG與W3C合作,建立的一個新版本的HTML。2014年10月29日,全球資訊網聯盟宣佈,經過接近8年的艱苦努力,該標準規範終於制定完成。HTML5相比於之前的HTML的其他版本增加了一些新的特性。 1.HTML5的新特性: 用

HTML5學習筆記HTML5新標籤新屬性

一、HTML5簡介 2014年10月29日,HTML5標準規範制定完成,並公開發布。 二、HTML5頁面結構 HTML5提供了新的語義元素來明確一個Web頁面的不同部分。 <header>:定義文件的頭部區域。 <nav>:定義導航連結的部分。 <

即時通訊音視訊開發視訊編解碼之理論概述

前言 即時通訊應用中的實時音視訊技術,幾乎是IM開發中的最後一道高牆。原因在於:實時音視訊技術 = 音視訊處理技術 + 網路傳輸技術 的橫向技術應用集合體,而公共網際網路不是為了實時通訊設計的。 系列文章 《即時通訊音視訊開發(二):視訊編解碼之數字視訊介紹》 《即時通訊音

數字視訊基礎

轉自https://blog.csdn.net/shanghaiqianlun/article/details/26477675   1.    基本概念 1.1視訊的表示 1.1.1影象的表示    

HTML5專案實戰——PC端固定佈局全頁面——day eight

程式碼及圖片 一、分離CSS 把css重複的部分移植到新的頁面而減少程式碼冗餘,單獨建立一個 CSS,以便後續的頁面重複呼叫。 多觀察頁面,總結出相同的樣式,注意取名,方便呼叫。 二、html頁面切換 不同的html頁面通過連結實現跳轉,常用class="active",設定當前

零基礎實現攝像頭的全平臺直播 內網直播的實現

背景需求 我是一個個體戶,沒有任何計算機基礎知識,但是我有個店面,有幾個攝像頭,我想在網站上看到我的攝像頭或者用手機微信也可以看到我的攝像頭視訊? 實現方式 相關的專業術語也不贅述,直接上實現步驟 前期準備 硬體:網路攝像機以及知道網路攝像機的rtsp地址、

web前端基礎教學視訊分享html+css+js基礎教學附淘寶網站開發教程

路漫漫其修遠兮 吾將上下而求索 路很長,未來是你們的!獻給每位正在奮鬥的孩紙們。 【寫在前面】15年剛接觸前端的時候,覺得很有魅力,就好像自己能夠控制整個世界似的。 那個時候也不知道怎麼學習怎麼入門,很是苦惱,所以就在淘網上花了20元買了些教程,既然自己踩過坑,就不希望還有人像我這樣繼續

【C++】 小甲魚視訊筆記 從C到C++過渡的幾個小程式

例1:陣列元素的求和 C示例 int main() { int data[]={0,1,2,3,5,6,7,8,9}; int size=sizeof(data)/sizeof(data[0]); printf(“data:%d\n”,sizeof

iOS下WebRTC音視訊通話

在iOS下做IM功能時,難免都會涉及到音訊通話和視訊通話。QQ中的QQ電話和視訊通話效果就非常好,但是如果你沒有非常深厚的技術,也沒有那麼大的團隊,很難做到QQ那麼快速和穩定的通話效果。 但是利用WebRTC技術,即使一個人也能夠實現效果不錯的音視訊通話。本篇

基於深度學習的視訊檢測

一、簡介 影象目標檢測任務在過去幾年深度學習的發展背景下取得了巨大的進展,檢測效能得到明顯提升。但在視訊監控、車輛輔助駕駛等領域,基於視訊的目標檢測有著更為廣泛的需求。由於視訊中存在運動模糊,遮擋,形態變化多樣性,光照變化多樣性等問題,僅利用影象目標檢測技術檢

Android實現錄屏直播ScreenRecorder的簡單分析

應專案需求瞄準了Bilibili的錄屏直播功能,基本就仿著做一個吧。研究後發現Bilibili是使用的MediaProjection 與 VirtualDisplay結合實現的,需要 Android 5.0 Lollipop API 21以上的系統才

Native和html5的互動h5傳資料or觸發一個Android的事件

實習的時候給了一個native 與htmlt5的互動的任務 那Android平臺來舉例 Activity.java裡面 WebView mWebView; @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnab

golang 流量統計系統視訊總結

總體流程 由於是模擬專案,所以先用golang生成一些假的使用者訪問日誌資料,以便後面作分析。 模擬使用者訪問日誌部分 程式碼實現(log.go): package main import ( "flag" "fmt" "math/rand" "net/u

Intel智慧工業相機功能視訊演示

 更多精彩內容,請微信搜尋“FPGAer俱樂部”關注我們。 Intel推出工業智慧相機方案 APOLLO ISLAND,該相機硬體系統如下圖所示,CPU採用Intel ATOM x5 E3930,FPGA採用CycloneV GT 5CGTFD7D5F27C7N,

Android 使用ExoPlayer視訊播放

一、前言 ExoPlayer是google開源的應用級媒體播放器專案,目前已有1W+的start,並一直在維護。該開源專案包含ExoPlayer庫和演示 demo,github地址:https://github.com/google/ExoPlayer。

html5學習筆記摘抄講義加部分理解

視訊地址:http://study.163.com/course/courseMain.htm?courseId=1003005 講義地址:https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html