https://github.com/polyv/live-js-sdk-demo-portrait
直播 JavaScript SDK Demo（竖屏版）
https://github.com/polyv/live-js-sdk-demo-portrait
Last synced: 6 months ago
JSON representation
直播 JavaScript SDK Demo（竖屏版）
- Host: GitHub
- URL: https://github.com/polyv/live-js-sdk-demo-portrait
- Owner: polyv
- License: mit
- Created: 2020-10-20T07:05:15.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-11-09T01:51:21.000Z (over 2 years ago)
- Last Synced: 2024-05-29T19:13:31.889Z (about 2 years ago)
- Language: Vue
- Size: 1.71 MB
- Stars: 4
- Watchers: 3
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 直播 JS-SDK 竖屏 DEMO
## 介绍
为了帮助客户更好地通过「POLYV 直播 JavaScript SDK」实现直播带货等竖屏播放场景，本项目提供了一个 demo 以供参考。
### 浏览器兼容性
支持主流移动端浏览器或 WebView，包括 UC 浏览器、QQ 浏览器、微信浏览器、各厂商自带浏览器等。
## 运行 demo
1. 克隆项目到本地后，在命令行界面中执行 `npm ci` 安装依赖包。
2. 修改项目目录下 example/index.js 中的 appId 和 appSecret 为您账号的对应设置。
3. 在命令行界面中执行 `npm run dev`。
4. 使用浏览器打开 `http://localhost:15018/` 即可打开 demo 页。
## 接入到您的项目
### 直接接入
如果您无需修改 demo 的样式和功能，可以直接把 demo 当做组件放置到页面上。
#### 第一步，引入相关依赖文件
#### 需要重新执行 npm run build，生成dist文件
``` html
```
#### 第二步，创建组件实例
``` html
new PolyvPortraitWatch({
el: '#portrait-watch',
appId: 'APP_ID',
appSecret: 'APP_SECRET',
channelId: 'CHANNEI_ID',
vid: 'PLAYBACK_VID',
user: {
userId: 'USER_ID',
userName: 'USER_NAME',
avatar: 'AVATAR'
}
});
```
### 使用源码接入
将本项目的 src 目录复制到待接入项目中，引入 src 下的 main.js。
参考实例：
``` javascript
import Vue from 'vue';
import PortraitView from 'src/main.js';
Vue.use(PortraitView, {
appId: 'APP_ID',
appSecret: 'APP_SECRET',
channelId: 'CHANNEI_ID',
vid: 'PLAYBACK_VID',
user: {
userId: 'USER_ID',
userName: 'USER_NAME',
avatar: 'AVATAR'
}
});
```
``` html
```
开发过程中，您可以根据自身需求适当修改 demo 源代码。
### PolyvPortraitWatch（PortraitView） 的参数说明
| 参数 | 说明 | 类型 | 是否必填 |
| --- | --- | --- | --- |
| el | 挂载组件的元素，可以为选择器或元素 | string、HTMLElement | 是 |
| appId | 保利威后台的 appId | string | 是 |
| appSecret | 保利威后台的 appSecret | string | 是 |
| channelId | 频道号 | string | 是 |
| vid | 回放id | string | 否 |
| vodType | 回放类型 | string | 否 |
| user | 用户信息 | Object | 是 |
| user.userId | 用户id | string | 是 |
| user.userName | 用户昵称 | string | 是 |
| user.avatar | 用户头像 | string | 否 |
## 补充说明
### 安全性说明（重要）
- 实际使用时，请不要将 appSecret 暴露在前端，本 demo 仅为演示。
## 其他文档
您还可以结合 POLYV 官方文档查阅 demo 源码：
- [直播 JavaScript SDK 使用文档](https://help.polyv.net/index.html#/live/js/live_js_sdk/live_js_sdk)
- [直播API签名规则](https://help.polyv.net/index.html#/live/api/buildSign)
### DEMO 使用到的第三方库
- 参考项目中的 package.json 的 dependencies。