# Solution

## 快速开启一场直播

![img](/files/2dYL0r2vbWIyfiwaShoE)

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

![直播产品架构](/files/H3TXKw08qpUL2oYhr59r)

## 三分屏 & 纯视频

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

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

|                      | 三分屏                                           | 纯视频                                           |
| -------------------- | --------------------------------------------- | --------------------------------------------- |
| 开播端                  | ![开播-三分屏](/files/ia8zzy25iflAbaUfoHIq)        | ![开播-纯视频](/files/LtJ91OXHIemKXrUsyL2Z)        |
| 观看页（PC）              | ![pc观看页-三分屏](/files/nfCVfBIysxsMQeBRMIOf)     | ![pc观看页-纯视频](/files/JMUXIjMuLaaVkat7VUaE)     |
| 横屏观看页(H5)            | ![移动H5-横屏观看-三分屏](/files/4jgPdk4rIomFF6wkUEXg) | ![移动H5-横屏-纯视频](/files/LJ9t8Jy7lh6XhCNxKILc)   |
| 竖屏观看页(H5)            | ![移动H5-竖屏观看-三分屏](/files/XPPflIWWnnuzNsbEOX9V) | ![移动H5-竖屏观看-纯视频](/files/F9fgVPiyf8ZzWLLvJELQ) |
| 横屏观看页(Android & iOS) | ![三分屏观看](/files/Gn3xPSAnxuhDS5HcmXe5)         | ![移动H5-横屏-纯视频](/files/LJ9t8Jy7lh6XhCNxKILc)   |
| 竖屏观看页(Android & iOS) | `无`                                           | ![竖屏观看](/files/Pcy3Z1CrMAXOqOQccki6)          |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://polyv.gitbook.io/document/docs/live/solution.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.