Solution

快速开启一场直播

img

new Vue({ el: '#player', data() { return { vodPlayerJs: 'https://player.polyv.net/script/player.js', vid: '88083abbf5253f46b0d8c7286fc07a0b_8', }; }, mounted(){ this.loadPlayerScript(this.loadPlayer); }, methods: { loadPlayerScript(callback) { if (!window.polyvPlayer) { const myScript = document.createElement('script'); myScript.setAttribute('src', this.vodPlayerJs); myScript.onload = callback; document.body.appendChild(myScript); } else { callback(); } }, loadPlayer() { const polyvPlayer = window.polyvPlayer; this.player = polyvPlayer({ wrap: '#player', vid: this.vid , autoplay:false }); } }, destroyed() { if (this.player) { this.player.destroy(); } } })

直播整体业务流程解析

整个直播系统接入包括 管理后台 、开播端、 观看端 SDK接入，管理后台负责对直播资源的整体管理和隔离，开播端和观看端之间的业务关系见下图：

蓝线：承载直播业务需要长链接通信的业务逻辑，包括打赏、商品库、签到、公告、问卷、答题卡、抽奖、红包等 互动营销功能；

黑线：承载直播业务的视频推送、观看业务逻辑，开播端推流到CDN，观看端从CDN拉流观看，仅使用CDN的直播

红线：连麦+直播，使用了RTC的连麦能力及旁路推流直播能力实现无延迟直播、嘉宾连麦、举手上麦应用场景； 注意：在直播过程中，直播播放界面是直播系统的，其他的都属于聊天室系统。

直播产品架构

三分屏 & 纯视频

三分屏：直播观看页面分为主屏、副屏、聊天室 三块区域，主屏用于显示文档、白板、电脑桌面等内容，副屏用于显示主播摄像头内容，适用于企业培训、大班课、小班课、职业教育 等教育培训业务场景；

纯视频：直播观看页面分为主屏、聊天室两块区域，主屏用于显示主播摄像头内容或者共享电脑桌面，适用于直播带货、年会直播、线上招聘等业务场景；

	三分屏	纯视频
开播端
观看页（PC）
横屏观看页(H5)
竖屏观看页(H5)
横屏观看页(Android & iOS)
竖屏观看页(Android & iOS)	无