H5視頻直播原理

相關文章:MacOS安裝Nginx+ffmpeg(rtmp直播服務器搭建)html

直播原理

clipboard.png

目前各主流瀏覽器支持的視頻格式:

clipboard.png

直播協議:
  1. HLS協議

clipboard.png

clipboard.png

http://live.streamingfast.net...
http://live.streamingfast.net...
http://live.streamingfast.net...nginx

clipboard.png

clipboard.png

靜態列表

clipboard.png

全量列表

clipboard.png

VOD表示點播,ENDLIST表示結束

clipboard.png

  1. RTMP協議

clipboard.png

clipboard.png

  1. HTTP-FLV協議

clipboard.png

clipboard.png

直播原理總結

clipboard.png

video基礎認識

clipboard.png

準備工做(MAC環境下)

命令行操做git

  • 安裝Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent...)"
  • 依賴Homebrew安裝Nginx
brew install nginx
  • 啓動Nginx
brew services start nginx
  • 進入nginx目錄下
cd /usr/local/Cellar/nginx/1.15.5/html
  • 從遠程倉庫克隆
git clone git@gitee.com:hughiesong/h5live-demo.git
  • 進入倉庫文件夾
cd h5live-demo
  • 建立index.html
touch index.html
  • 用atom打開
open index.html -a atom

屬性和方法

demo地址:https://github.com/HughieSong...github

clipboard.png

事件

clipboard.png

直播源的製做

方法一:

clipboard.png

Mac安裝MacOS安裝Nginx+ffmpeg(rtmp直播服務器搭建)
Windows安裝http://nginx.org/en/docs/wind...
安裝後驗證:瀏覽器中輸入http://localhost:8080segmentfault

方法二

clipboard.png

第一步下載服務、第二步安裝服務參考MacOS安裝Nginx+ffmpeg(rtmp直播服務器搭建)windows

clipboard.png

相關文章
相關標籤/搜索