直播开发入门学习笔记

Coding Alan 3年前 (2018-05-13) 6230次浏览 0个评论 扫描二维码

直播开发入门学习笔记

本文所包含内容:

  • 直播的主流协议
  • Video属性和方法详解
  • 直播源的制作
  • H5直播演示
  • 微信小程序直播演示
  • 常见问题

直播的主流协议

HLS协议, RTMP协议, HTTP-FLV协议

HLS协议

<video>获取M3U8索引文件,文件中包含包含其它M3U8文件和视频分段

直播开发入门学习笔记
此类文件包含三种类型:动态列表、静态列表和全量列表,后两者较前者会多一到两个字段,文件示例

TS文件解析流程

直播开发入门学习笔记

使用方便,但缺点是在同一个M3U8中分片文件过多时会带来高延时

RTMP协议

RTMP(Real Time Messaging Protocol)

直播开发入门学习笔记

传输文件格式是FLV,基于TCP协议,需要处理3次握手,因此使用更为复杂

HTTP-FLV协议

HTTP-FLV协议结合了HLS使用方便和RTMP低延时的特性

直播开发入门学习笔记

相比较RTMP协议的优点:

1、可以在一定程度上避免防火墙的干扰(例如,有的机房只允许80端口通过)
2、可以很好的兼容HTTP 302跳转,做到灵活调度
3、可以使用HTTPS做加密通道
4、很好地支持移动端(Android, iOS)

 

Video属性和方法详解

相关工具:Web Server for Chrome(在Chrome上模拟服务器请求)

下载、全屏隐藏:controlslist: nodownload, nofullscreen

贴图:poster属性

自动播放: autoplay

静音:muted (移动端非静音视频不允许自动播放)

循环播放:loop

预加载:preload (不同浏览器和客户端表现会存在差异)

音量控制:默认音量是1,添加volume属性通常无法生效,需通过JS代码来实现,如:

备用地址切换

事件

加载开始:loadstart

时长变化:durationchange

视频元数据下载完成:loadedmetadata

没有足够的数据播放下一帧:loadeddata

正在下载数据:progress

视频有帧可以播放:canplay

可以流畅地播放:canplaythrough

播放:play

暂停:pause

点击进度条视频查找:seeking

视频查找结束:seeked

正在准备数据:waiting

准备好数据播放:playing

播放时间变化:timeupdate

播放结束:ended

播放出错:error

直播源的制作

Nginx安装

Mac:

Windows:
http://nginx.org/en/docs/windows.html (按步骤操作需先安装Git Bash)

FFmpeg安装

Mac:

Windows:

http://ffmpeg.org/download.html
https://ffmpeg.zeranoe.com/builds/

配置Nginx

工具准备:VLC播放器和Safari浏览器

RTMP测试:

通过本地视频模拟推流

VLC播放器中点击File > Open Network…,然后在URL部分输入前面定义的地址:

rtmp://localhost:1935/rtmplive/rtmp

HLS测试

模拟HLS推流

打开Safari浏览器中打开http://localhost:8080/hls/stream.m3u8进行访问

TODO:HTTP-FLV的推流方式相对复杂,后续进行补充

封装包推流

如果您对Nginx不了解也不想要了解相关细节,还可以通过已封装的包进行测试

链接: https://pan.baidu.com/s/1jV51FmC0TodGODKiJM4BUg 密码: qbu9

下载该文件直接运行即可

H5直播演练

播放器:video.jshls.jsflv.js

HLS视频直播

Video.js

hls.js

HTTP-FLV视频直播

flv.js

微信小程序直播演示

需通过小程序开发工具的远程调试功能在手机上进行调试,手机与电脑在同一局域网,并且在直播源中使用内网地址192.168.*.*

直播开发入门学习笔记

常见问题

1.Error: homebrew/nginx was deprecated. This tap is now empty as all its formulae were migrated.

 

喜欢 (2)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址