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

需求:

  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...

需求拆分:
我们的直播业务其实很简单,就两个页面,其中一个页面是直播课堂介绍页面,另外一个页面是直播房间页面。直播房间如下图所示:
记录一次直播间开发的业务拆解以及埋坑经历_第1张图片

分成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

你可能感兴趣的:(前端,直播,html2canvas)