# Solution

## 快速开启一场直播

![img](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-3fe83eee8ca05acbe3d4f31299f5c24a12605f0d%2FWbgfj7eeWzEbJ8MEUsyWfA.png?alt=media)

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的连麦能力及旁路推流直播能力实现无延迟直播、嘉宾连麦、举手上麦应用场景； 注意：在直播过程中，直播播放界面是直播系统的，其他的都属于聊天室系统。

![直播产品架构](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-b2c6aba2d8d304d6b49913ebf9fdb983db68d918%2F%E7%9B%B4%E6%92%AD%E4%BA%A7%E5%93%81%E6%9E%B6%E6%9E%84.png?alt=media)

## 三分屏 & 纯视频

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

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

|                      | 三分屏                                                                                                                                                                                                                                                                                            | 纯视频                                                                                                                                                                                                                                                                                            |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 开播端                  | ![开播-三分屏](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-336b04ffb185adb7e2f80749be4f008e2cb43527%2F%E7%BD%91%E9%A1%B5%E5%BC%80%E6%92%AD-%E4%B8%89%E5%88%86%E5%B1%8F.png?alt=media)                             | ![开播-纯视频](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-f975fa907b57a2885f5e9a18c684bdc6395424f3%2F%E7%BD%91%E9%A1%B5%E5%BC%80%E6%92%AD-%E7%BA%AF%E8%A7%86%E9%A2%91.png?alt=media)                             |
| 观看页（PC）              | ![pc观看页-三分屏](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-23001ba090ae169e769bc299369afcd2313d5fba%2Fpc%E8%A7%82%E7%9C%8B%E9%A1%B5-%E4%B8%89%E5%88%86%E5%B1%8F.png?alt=media)                                 | ![pc观看页-纯视频](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-9878d92088f0c7db3c82f08a7d4acff5272bc245%2Fpc%E8%A7%82%E7%9C%8B%E9%A1%B5-%E7%BA%AF%E8%A7%86%E9%A2%91.png?alt=media)                                 |
| 横屏观看页(H5)            | ![移动H5-横屏观看-三分屏](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-84bb7cac5143b1190603a7eb5da69c9b11cc8c69%2F%E7%A7%BB%E5%8A%A8H5-%E6%A8%AA%E5%B1%8F%E8%A7%82%E7%9C%8B-%E4%B8%89%E5%88%86%E5%B1%8F.png?alt=media) | ![移动H5-横屏-纯视频](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-8911dbc54efef4e884a7d4ae9227cb24780b470d%2F%E7%A7%BB%E5%8A%A8H5-%E6%A8%AA%E5%B1%8F-%E7%BA%AF%E8%A7%86%E9%A2%91.png?alt=media)                     |
| 竖屏观看页(H5)            | ![移动H5-竖屏观看-三分屏](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-5f93d14b6294e4e2cfd1e65318e02c4366a210ea%2F%E7%A7%BB%E5%8A%A8H5-%E7%AB%96%E5%B1%8F%E8%A7%82%E7%9C%8B-%E4%B8%89%E5%88%86%E5%B1%8F.jpg?alt=media) | ![移动H5-竖屏观看-纯视频](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-4fce42839ced4d078d9df99ab964aeb085f3a189%2F%E7%A7%BB%E5%8A%A8H5-%E7%AB%96%E5%B1%8F%E8%A7%82%E7%9C%8B-%E7%BA%AF%E8%A7%86%E9%A2%91.png?alt=media) |
| 横屏观看页(Android & iOS) | ![三分屏观看](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-b13d1575895a766dad7302cbb230942808cdf178%2F%E4%B8%89%E5%88%86%E5%B1%8F%E8%A7%82%E7%9C%8B.png?alt=media)                                                 | ![移动H5-横屏-纯视频](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-8911dbc54efef4e884a7d4ae9227cb24780b470d%2F%E7%A7%BB%E5%8A%A8H5-%E6%A8%AA%E5%B1%8F-%E7%BA%AF%E8%A7%86%E9%A2%91.png?alt=media)                     |
| 竖屏观看页(Android & iOS) | `无`                                                                                                                                                                                                                                                                                            | ![竖屏观看](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-b87fa69043a771a572f322ad6d2846533ee57711%2F%E7%AB%96%E5%B1%8F%E8%A7%82%E7%9C%8B.png?alt=media)                                                           |
