### 启动推流 startPush

Source: https://www.volcengine.com/docs/6469/132328?lang=zh

调用 startPush 方法并传入通过控制台生成的推流地址，启动推流。地址中的 {{domain}}、{{appName}}、{{streamName}} 需要替换为实际值。

```js
livePusher.startPush('https://{{domain}}/{{appName}}/{{streamName}}.sdp')
```

--------------------------------

### 通过 CDN 引入 Web 推流 SDK

Source: https://www.volcengine.com/docs/6469/132328?lang=zh

通过 CDN 引入 SDK 时，在 HTML 文件中使用 <script> 标签加载 SDK 脚本。引入后，SDK 会自动将 LivePusher 类挂载到全局对象上。需要将 {version} 替换为具体的版本号，例如 "2.0.1"。

```html
<script src="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/vepusher/{version}/index.umd.js"></script>
<!-- 请将 {version} 替换为集成前准备阶段获取的具体版本号，例如 "2.0.1" -->
```

--------------------------------

### 通过 NPM 安装 VePlayer 依赖包

Source: https://www.volcengine.com/docs/6469/127528?lang=zh

执行命令安装播放器依赖包和播放器插件依赖包。

```Bash
npm install @volcengine/veplayer@next
npm install @volcengine/veplayer-plugin@next
```

--------------------------------

### 通过 import 引用 LivePusher

Source: https://www.volcengine.com/docs/6469/132328?lang=zh

通过 import 语句引用 SDK 中的 LivePusher 类。适用于通过 NPM 引入 SDK 的场景。

```js
import LivePusher from '@volcengine/vepusher';
```

--------------------------------

### 通过 CDN 引入 VePlayer 依赖

Source: https://www.volcengine.com/docs/6469/127528?lang=zh

在 index.html 中添加播放器的 CSS 样式文件和 JavaScript 脚本文件。适用于通过 CDN 方式引入依赖。

```HTML
<link rel="stylesheet" href="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/veplayer/2.12.0/umd/veplayer.production.css">

<script src="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/veplayer/2.12.0/umd/veplayer.production.js"></script>
```

--------------------------------

### Configure license via CDN (setLicenseConfig with license object)

Source: https://www.volcengine.com/docs/6469/127528?lang=zh

Configures the license using the CDN global object VePlayer.live. The license object requires sign and content fields, and optionally mainUrl for automatic updates.

```javascript
VePlayer.live.setLicenseConfig({
  license: {
     sign: "xxx",
     content: "xxx",
     mainUrl: "https://example.com/obj/license/license.lic", 
 }
})
```

--------------------------------

### Configure license URL via NPM (setLicenseConfig with license string)

Source: https://www.volcengine.com/docs/6469/127528?lang=zh

Configures the license by passing a license URL directly to the NPM package @volcengine/veplayer. The SDK automatically handles authentication and enables automatic license updates.

```javascript
import { live } from '@volcengine/veplayer';
live.setLicenseConfig({
    // License URL。License 升级或续签后，SDK 会自动更新至最新 License 版本，无需您手动更新。
    license: "https://example.com/obj/license/license.lic"
})
```

--------------------------------

### Configure license via NPM (setLicenseConfig with license object)

Source: https://www.volcengine.com/docs/6469/127528?lang=zh

Configures the license using the NPM package @volcengine/veplayer. The license object requires sign and content fields, and optionally mainUrl for automatic updates.

```javascript
import { live } from '@volcengine/veplayer';
live.setLicenseConfig({
  license: {
     sign: "xxx",
     content: "xxx",
     mainUrl: "https://example.com/obj/license/license.lic", 
 }
})
```

--------------------------------

### NPM 方式创建 VePlayer 实例并开启日志上报

Source: https://www.volcengine.com/docs/6469/127528?lang=zh

通过 NPM 引入方式创建 VePlayer 实例，配置播放器宽高、拉流地址和日志上报参数。开启日志上报后，SDK 会将播放相关信息发送至视频直播服务器，用于故障排查和分析。注意：从 2.12.0 版本开始，未配置 App ID 时控制台会报错提示。

```JavaScript
createLivePlayer({
  width: 640,
  height: 360,
  url: 'https://livepull.example.com/appname/streamname.flv',
  logger:{
    // 开启日志上报。开启后，SDK 会将播放相关信息发送至视频直播服务器，用于故障排查和分析，帮助提升应用的稳定性和用户体验。
    appId: 'APP_ID', // 必选。将 APP_ID 替换为您创建 Web 类型应用后获得的 App ID。
    userId: 'USER_ID', // 可选。将 USER_ID 替换为应用中的用户 ID。 
    deviceId: 'DEVICE_ID', // 可选。将 DEVICE_ID 替换为用户设备的 ID。 
  }
}).then(function(veplayer){
  console.log('创建播放器成功，播放器实例为', veplayer)
}).catch(function(err){
  console.log('创建播放器失败，失败报错为', err)
});
```

--------------------------------

### 初始化 LivePusher 实例

Source: https://www.volcengine.com/docs/6469/132328?lang=zh

初始化推流 SDK 实例，创建 LivePusher 对象。

```js
const livePusher = new LivePusher();
```

--------------------------------

### Configure license URL via CDN (setLicenseConfig with license string)

Source: https://www.volcengine.com/docs/6469/127528?lang=zh

Configures the license by passing a license URL directly to the CDN global object VePlayer. The SDK automatically handles authentication and enables automatic license updates.

```javascript
VePlayer.setLicenseConfig({
    // License URL。License 升级或续签后，SDK 会自动更新至最新 License 版本，无需您手动更新。
    license: "https://example.com/obj/license/license.lic"
})
```

--------------------------------

### 设置视频和音频采集质量

Source: https://www.volcengine.com/docs/6469/132328?lang=zh

设置采集质量。视频默认值为 '720p-1'，音频默认值为 'STANDARD'。建议在采集音视频之前根据实际需求设置。

```js
livePusher.setVideoQuality('720p-1')
livePusher.setAudioQuality('STANDARD')
```

--------------------------------

### 通过 NPM 安装 @volcengine/vepusher

Source: https://www.volcengine.com/docs/6469/132328?lang=zh

通过 NPM 安装 Web 推流 SDK 包。适用于使用 Webpack、Vite 等构建工具的现代化开发流程。

```bash
npm install @volcengine/vepusher --save
```

--------------------------------

### 在 index.html 中引入 VePlayer 依赖包及样式

Source: https://www.volcengine.com/docs/6469/127528?lang=zh

在本地工程的 index.html 文件中添加代码，引入播放器依赖包及依赖包样式。

```JavaScript
import { createLivePlayer, register } from '@volcengine/veplayer';
import '@volcengine/veplayer/style';
```

--------------------------------

### CDN 方式创建 VePlayer 实例并开启日志上报

Source: https://www.volcengine.com/docs/6469/127528?lang=zh

通过 CDN 引入方式创建 VePlayer 实例，配置播放器宽高、拉流地址和日志上报参数。开启日志上报后，SDK 会将播放相关信息发送至视频直播服务器，用于故障排查和分析。注意：从 2.12.0 版本开始，未配置 App ID 时控制台会报错提示。

```JavaScript
VePlayer.createLivePlayer({
  width: 640,
  height: 360,
  url: 'https://livepull.example.com/appname/streamname.flv',
  logger:{
    // 开启日志上报。开启后，SDK 会将播放相关信息发送至视频直播服务器，用于故障排查和分析，帮助提升应用的稳定性和用户体验。
    appId: 'APP_ID', // 必选。将 APP_ID 替换为您创建 Web 类型应用后获得的 App ID。 
    userId: 'USER_ID', // 可选。将 USER_ID 替换为应用中的用户 ID。
    deviceId: 'DEVICE_ID', // 可选。将 DEVICE_ID 替换为用户设备的 ID。
  }
}).then(function(veplayer){
  console.log('创建播放器成功，播放器实例为', veplayer)
}).catch(function(err){
  console.log('创建播放器失败，失败报错为', err)
});
```

--------------------------------

### 绑定预览容器并启动预览

Source: https://www.volcengine.com/docs/6469/132328?lang=zh

绑定本地预览容器并开始预览。setRenderView 传入预览容器的 id，startPreview 启动预览。

```js
livePusher.setRenderView('preview')
livePusher.startPreview()
```