H5视频直播原理

相关文章:MacOS安装Nginx+ffmpeg(rtmp直播服务器搭建)

直播原理

clipboard.png

目前各主流浏览器支持的视频格式:

clipboard.png

直播协议:
  1. HLS协议

clipboard.png

clipboard.png

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

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环境下)

命令行操作

  • 安装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 [email protected]:hughiesong/h5live-demo.git
  • 进入仓库文件夹
cd h5live-demo
  • 创建index.html
touch index.html
  • 用atom打开
open index.html -a atom

属性和方法

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

clipboard.png

事件

clipboard.png

直播源的制作

方法一:

clipboard.png

Mac安装MacOS安装Nginx+ffmpeg(rtmp直播服务器搭建)
Windows安装http://nginx.org/en/docs/wind...
安装后验证:浏览器中输入http://localhost:8080

方法二

clipboard.png

第一步下载服务、第二步安装服务参考MacOS安装Nginx+ffmpeg(rtmp直播服务器搭建)

clipboard.png

猜你喜欢

转载自www.cnblogs.com/qianduanwriter/p/11819524.html