微信小程序和H5直播开发从初学者到大师
小程序开发
浏览：1026 次
直播基本流程
本文件内容：
直播主流协议
视频属性和方法
直播源制作
H5现场演示
微信小程序现场演示
共同问题
直播主流协议
HLS协议、RTMP协议、HTTP-FLV协议
HLS协议
HLS协议
这种类型的文件包括三种类型：动态列表、静态列表和完整列表。后两个字段比前两个多一到两个字段。文件示例
#外部m3u
#EXT-X-VERSION:6#版本号，默认为3
#EXT-X-目标持续时间：6#持续时间
#EXT-X-MEDIA-SEQUENCE:0#S/N
#EXT-X-PLAYLIST-TYPE:EVENT#静态列表包含
#EXT-X-PLAYLIST-TYPE:VOD#完整列表包含
#灭绝：4.797000，
索引0.ts
#分机号码：4.396000，
索引1.ts
#灭绝：5.297000，
索引2.ts
#EXT-X-ENDLIST#完整列表包含
TS文件解析过程
TS文件解析过程
使用方便，但缺点是当同一M3U8中有太多分区文件时，会出现高延迟
RTMP协议
RTMP协议
传输文件格式为FLV。基于TCP协议，它需要处理三次握手，因为使用更复杂
HTTP-FLV协议
HTTP-FLV协议结合了HLS的便利性和RTMP的低延迟
HTTP-FLV协议
与RTMP协议相比的优势：
1.可以在一定程度上避免防火墙的干扰（例如，一些机房只允许80端口通过）
2.与HTTP 302跳转和灵活的调度非常兼容
3.HTTPS可用作加密通道
4.对移动终端（Android、iOS）的良好支持
视频属性和方法
相关工具：（在Chrome上模拟服务器请求）
下载并全屏隐藏：controllist:nodownload，nofullscreen
贴图：海报属性
自动播放：自动播放
静音：静音（移动终端上的非静音视频无法自动播放）
循环：循环
预加载：预加载（不同的浏览器和客户端具有不同的性能）
音量控制：默认音量为1。添加音量属性通常不会生效，需要通过JS代码实现，例如：
备用地址开关
#当第一个地址错误时，访问第二个视频地址
#此时，通过上述v.src获得的地址为空，您需要使用v.currentSrc
事件
加载开始：加载开始
持续时间更改
视频元数据下载已完成：loadedmetadata
数据不足，无法播放下一帧：loadeddata
下载数据：进度
视频可以用帧播放：canplay
可以流畅地玩：可以通过
播放：播放
暂停：暂停
单击进度条视频查找：搜索
视频搜索结束：已搜索
正在准备数据：正在等待
准备播放数据：播放
播放时间更改：时间更新
播放结束：结束
播放错误：错误
#加载开始加载开始
v、 addEventListener（'loadstart'，函数（e）{
console.log（'loadstart'）；
})
直播源制作
Nginx安装
雨衣：
酿造龙头denji/nginx
brew安装nginx完整版--使用rtmp模块
#输入nginx启动服务，然后使用https://localhost:8080验证
#ngnix-s停止；nginx-s重新加载
窗户：
（需要根据步骤首先安装Git Bash）
FFmpeg安装
雨衣：
brew安装ffmpeg
#输入ffmpeg进行验证
窗户：
配置Nginx
#Mac配置
cd/usr/local/etc/nginx/
#-a添加原子或其他编辑器名称以打开文件
打开nginx。conf-a“Visual Studio代码”
#在Windows下查找相应的文件
#添加rtmp模块
rtmp公司{
服务器{
听1935；
#块大小
chunk_大小4000；
#RTMP实时流配置
apprtplive{
靠...过活
最大连接数1024；
}
#HLS实时流配置
apphls{
靠...过活
hls打开；
#碎片路径
hls路径/usr/local/var/www/hls；
hls_片段5s；
}
}
}
#配置http节
网址：http{
...
服务器{
...
位置/hls{
类型{
app/vnd.apple。mpegurl m3u8；
视频/mp2t ts；
}
根/usr/local/var/www；
add_header缓存控制无缓存；
#解决跨域请求
add_ header访问控制允许来源*；
}
}
}
工具准备：和Safari浏览器
RTMP试验
