記錄一次直播間開發的業務拆解以及埋坑經歷

需求：

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