直播小程序Demo是在微信小程序内实现阿里云视频直播推流和播放的完整Demo。通过阅读本文,您可以了解搭建直播小程序及运行直播小程序Demo的方法。

前提条件

  • 开通阿里云视频直播服务,完成推流域名和播流域名的添加和配置,获取推流地址和播放地址,用于在微信小程序中推流和播流。具体操作,请参见快速入门
  • 您的微信小程序账号已经过企业认证。
    说明 在调试小程序Demo时,需要使用live-pusher和live-player组件,而只有经过企业认证的账号才可以使用这两个组件。更多信息,请参见小程序官方文档
  • 已安装最新版本的微信开发者工具。下载地址,请参见微信开发者工具

操作步骤

  1. 获取小程序组件权限。
    1. 登录微信公众平台
    2. 在左侧导航栏选择开发 > 开发管理,进入开发管理界面。
    3. 单击接口设置页签。
    4. 打开实时播放音视频流实时录制音视频流开关。
      001
  2. 下载并解压直播小程序Demo,下载地址,请参见直播小程序Demo
    说明 如果GitHub代码库下载缓慢,可安装加速插件等方式加速下载。
  3. 导入小程序Demo。
    1. 打开并登录微信开发者工具。
    2. 在左侧导航栏选择小程序项目 > 小程序
    3. 单击小程序界面的+,输入项目名称、小程序Demo的目录和小程序AppID。
      002
      说明 您可以登录微信公众平台,左侧导航栏选择开发 > 开发管理,在开发设置中查看AppID。
    4. 单击新建
  4. 单击右上角真机调试,此时工具界面会出现一个真机调试的二维码。
    001
    说明 推拉流相关实现,位于index目录下。
  5. 使用移动端微信扫描二维码,进入手机调试界面。
    1. 输入推流地址和播流地址。获取推流地址和播流地址,请参见生成推流地址和播放地址
      说明
      • 推流地址:只支持RTMP协议的推流地址。
      • 播流地址:只支持RTMP、FLV协议的播流地址。
    2. 单击Push进行推流。
    3. 单击Play进行播流。

      效果如下所示:

      测试