火山引擎视频直播

https://www.volcengine.com/docs/6469
Admin
火山引擎视频直播基于先进的音视频处理与全球大规模内容分发网络，为企业及开发者提供安全、稳定、低延时、高画质的端到端云端直播与流媒体分发服务。
Tokens:21,672
Snippets:109
Trust Score:10
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### 启动推流 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()
```
Tokens:
Raw
火山引擎 视频直播

火山引擎视频直播
