记录一次直播间开发的业务拆解以及埋坑经历

需求：

1. 实现obs推流，h5页面播放视频。
2. 在视频播放的同时页面，页面以外的区域实现一个聊天室的功能。
3. 支持生成H5海报,支持对外分享。
4. 支持在pc环境下运行，同时须要在pc端获取到用户微信受权。

插件:

1. laravel-echo 官方文档https://learnku.com/docs/lara...
2. socket.io laravel-echo须要用到这个插件
3. html2canvas 官方文档
   http://html2canvas.hertzen.com/
4. DPlayer 官方文档 http://dplayer.js.org/
5. vant 官方文档 https://youzan.github.io/vant...

需求拆分：
咱们的直播业务其实很简单，就两个页面，其中一个页面是直播课堂介绍页面，另一个页面是直播房间页面。直播房间以下图所示：

分红3个区域 视频直播区，聊天区，输入区
视频区域的细节拆解
直播时，视频是经过obs向腾讯云推流，而后前端向后段拿到腾讯云返回的视频连接，进行播放，后端返回的视频格式
https://t1.pulllive.qingxiao....
https://t1.pulllive.qingxiao....
rtmp://t1.pullive.qingxiao.online/live/course_5_1c95d80ec5ed6f7540a49a08b8b5ac5c?txSecret=b993f807738bddab7a6da24ef29beada&txTime=5E6382C0
是这3种类型的视频流连接
一开始我使用的是原生的浏览器video标签，可是通过实践发现
rmpt格式的流安卓手机能够播放 pc播放不了
m3u8格式ios和安卓手机播放不了 pc播放不了
flv格式的ios,安卓,pc都不行最终放弃了使用原生video标签

后来改用了video.js,均可以播放了，可是发现他在ios和安卓上面都只是一个系统原生video标签，在ios上是好的，可是在安卓手机上会发现他的层级很高，而且点击播放的时候会全屏。安卓手机播放以后层级太高的问题能够经过设置video标签的x5-video-player-type：h5-page能够解决，设置的以后能够在视频上面悬浮元素，而且不会被遮挡。虽然知足需求了，可是后来发现了比他更好用的视频播放器dplayer