You need to enable JavaScript to run this app.
导航
跑通 Demo
最近更新时间:2025.07.08 11:51:09首次发布时间:2024.03.06 19:52:42
我的收藏
有用
有用
无用
无用

为了帮助您快速了解和验证微信小程序拉流 SDK 的使用效果,我们提供了基于 SDK 开发的功能 Demo。该 Demo 支持拉流播放能力,适用于快速体验 SDK 能力及集成效果。

环境要求

  • 微信小程序基础库 2.12.3 及以上版本,推荐使用最新稳定版本。
  • 微信开发者工具 1.06.2209040 及以上版本,推荐使用最新稳定版。

前提条件

在开始体验 Demo 前,请确保满足以下条件:

微信小程序配置

(可选)拉流地址准备

拉流 SDK Demo 项目中,默认内置了测试拉流地址。

  • 若您希望使用自定义地址,请确保已获得有效的 FLV 或 RTMP 协议拉流地址。
  • 若您还没有可用的拉流地址,可参考视频直播快速入门开通火山引擎视频直播服务,并获取 FLV 或 RTMP 协议拉流地址。

操作步骤

1. 初始化 Demo 项目

  1. 打开微信开发者工具。

  2. 单击微信小程序 Demo 代码片段链接,自动打开微信开发者工具的导入代码片段页面。
    alt

  3. 配置项目名称、项目目录、微信小程序的管理后台的 AppID,单击导入

    说明

    请使用正式的小程序 AppID 导入项目,以确保 Demo 中的插件拉流功能正常运行。使用测试 AppID 无法启用插件拉流能力,影响 Demo 效果。

2. 安装依赖

  1. 在微信开发者工具调试器的终端页面或使用本地终端,进入微信小程序项目根目录。
  2. 执行 npm install 命令安装依赖。
    alt
  3. 在微信开发者工具的菜单栏选择工具 > 构建 npm,完成依赖构建。
    alt

3. (可选)配置拉流地址

Demo 默认内置测试拉流地址。您也可以按需替换为自有拉流地址,修改方式如下。

  1. 打开 index.wxml 文件。

  2. 替换 src 属性为您自有的 FLV 或 RTMP 协议拉流地址。

    <!-- index.wxml -->
    <veplayer autoplay src="https://pull-demo.volcfcdnrd.com/live/st-4536521.flv" />
    

4. 开始调试

  1. 单击顶部工具栏的预览真机调试

  2. 使用微信扫描二维码,即可在真机环境中测试播放效果。

    说明

    模拟器模式不支持 live-player 播放,请使用真机调试。

后续操作