随着小程序生态的蓬勃发展，小程序承载着多元的业务类型与丰富的功能，延伸出更多商业机会。为了赋能业务，微信团队提供 小程序直播组件，实现在小程序端的直播互动与营销宣传的闭环经营。

直播场景时效性强、互动性高，如何高效应用小程序直播组件，实现流畅的直播推拉流呢？下面分享实现小程序直播开发的具体方法：

• 申请小程序接口实时音视频流权限
• 启动本地 RTMP 服务
• 应用推拉流组件
• 测试视频流

申请权限

在启动开发前，申请小程序直播相关权限是必要前提。

1. 通过 微信公众平台 注册小程序账号并且申请小程序接口实时音视频流权限
2. 申请成功后，在微信公众平台【开发管理】->【接口设置】-> 打开【实时播放音视频流】与【实时录制音视频流】

启动本地 RTMP 服务

小程序直播推流需要启动本地 RTMP 服务，而启动该项服务离不开 Node-Media-Server。通过 Node-Media-Server，开发者能够成功启动流媒体服务器，转换流格式、操作视频流并且向外推送流地址。通过命令行进入文件夹 Node-Media-Server，执行以下程序即可启动服务：

~ npm install
~ node index.js

启动服务器后，程序默认将在 1935 端口提供 RTMP 服务，8000 端口提供 HTTP 流服务。

const { NodeMediaServer } = require("node-media-server");


const config = {
  rtmp: {
    port: 1935, // 1935端口提供RTMP服务
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30,
  },
  http: {
    port: 8000, // 8000端口提供HTTP流服务
    allow_origin: "*",
  },
};


var nms = new NodeMediaServer(config);
nms.run();

启用推拉流组件

使用微信开发者工具导入项目，选择 client 文件夹，使用真机调试进行 1935 端口 RTMP 视频流调试（注意：启动 RTMP 服务后，手机与电脑建议处于同一局域网）。

index.wxml 代码侧，按照如下代码示例合理应用推流组件 live-pusher 与拉流组件 live-player。

<!--index.wxml-->
<view class="container">
    <view style='height:20px;'></view>
    <input id="ipinput" class='input' placeholder='电脑ip地址' bindinput="onIpInput"></input>
    <button bindtap="start">开始</button>
    <view class='block'>
        <input class='input' placeholder='推流名称' value='{{pushStreamName}}' bindinput='updatePushStreamName'></input>
        <text class='text'>live-pusher:</text>
        <text class='text'>url: {{pushUrl || "无"}}</text>
        <live-pusher  mode="RTC" autopush url="{{pushUrl}}"></live-pusher>
    </view>
    <view class='block'>
        <input class='input' placeholder='播放流名称' value='{{pullStreamName}}' bindinput='updatePullStreamName'></input>
        <text class='text'>live-player </text>
        <text class='text'>url: {{pullUrl || "无"}}</text>
        <live-player mode="RTC" autoplay="{{true}}" src="{{pullUrl}}"></live-player>
    </view>
</view>

js代码侧，通过 IP 地址拼接推拉流地址，形成 live-player 和 live-pusher 组件的 src 值。代码编写完毕后，输入正确的 IP 地址，即可出现正常的推拉流页面。

Page({
  data: {
    pushUrl: "",
    pullUrl: "",
    ip: "",
    pullStreamName: "stream1",
    pushStreamName: "stream1",
  },
  onIpInput(e) {
    this.setData({
      ip: e.detail.value,
    });
  },
  start: function () {
    this.setData({
      pushUrl: `rtmp://${this.data.ip}:1935/live/${this.data.pushStreamName}`,
      pullUrl: `rtmp://${this.data.ip}:1935/live/${this.data.pullStreamName}`,
    });
  },
  updatePushStreamName(e) {
    this.setData({
      pushStreamName: e.detail.value,
    });
  },
  updatePullStreamName(e) {
    this.setData({
      pullStreamName: e.detail.value,
    });
  },
});

网页端测试视频流

完成以上步骤后，开发者可以通过在网页端使用 Flv.js 拉取小程序推的视频流进行测试。

为什么需要 Flv.js？原因在于 Flv.js 在 JavaScript 中流式解析 FLV 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 提供给浏览器，实现 FLV 格式视频的播放。Flv.js 代码示例如下：

function start() {
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById("videoElement");
    let pullStreamName = document.getElementById("pullStreamName").value;
    let streamUrl = `http://127.0.0.1:8000/live/${pullStreamName}.flv`;
    document.getElementById("pullStreamNameShow").innerHTML = streamUrl;
    (() => {
      var flvPlayer = flvjs.createPlayer({
        type: "flv", // flv格式播放
        url: streamUrl, // 拉流地址
      });
      flvPlayer.attachMediaElement(videoElement); // 挂载vedio节点
      flvPlayer.load(); // 加载
      flvPlayer.play(); // 播放
    })();
  }
}

执行 Flv.js 操作后，开发者可以使用 http-server 启动本地 Web 服务命令行进入 web-client 文件夹，执行如下命令：

// 如果你的npm已经全局安装了http-server
http-server -p 8082


// 否则
npm install
npx http-server -p 8082

执行命令后，开发者将本地 Web 网页服务启动在 8082 端口，然后浏览器打开 http://localhost:8082，根据网页提示填写推拉流名称，点击开始按钮，即可看到小程序视频流。 

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

实际开发过程中，开发者需要关注推拉流组件的正确应用以及网络环境的统一性，最终实现小程序直播功能，赋能小程序端业务闭环发展。

如有其他小程序直播相关的问题，可在 小程序直播交流专区 发帖互动，技术专员将为大家解答及进行深度交流。