小程序<live-pusher>与<live-player>的常见问题

2019-09-05 20:20:45 浏览数 (1)

1、<live-pusher> 标签动态修改 enable-camera属性不生效如何解决?

目前 enable-camera属性不支持动态生效,需要提前设置,即不支持在推流的过程中动态开启/关闭摄像头,必须在推流之前设置好这个属性。

如果需要动态生效推荐的使用方式如下:

代码语言:javascript复制
 onEnableCamera: function () {
    var self = this;
    this.data.videoContext = wx.createLivePusherContext("video-livePusher");
    this.setData({
        enable-camera: "true"
    },function () {
        self.data.videoContext.stop();
        self.data.videoContext.start();
    });
  },

2、小程序推流<live-pusher>怎么设置分辨率?

通过设置码率达到设置分辨率的效果。小程序内部会自动处理好分辨率和码率的关系,比如 2Mbps 的码率,小程序会选择 720p 的分辨率进行匹配,而 300kbps 的码率下,小程序则会选择较低的分辨率来提高编码效率。

3、小程序推流<live-pusher>标签设置aspect属性没有效果?

<live-pusher>标签aspect属性默认9:16的比例,3:4的比例只有在多人连麦场景下设置才有效果。

4、小程序 <live-player> 标签偶现黑屏或者播放失败?

这里需要先了解微信小程序 Page 生命周期,参考 小程序页面生命周期。

小程序 Page 生命周期,onLoad 只做数据加载还未做页面渲染,此时 <live-pusher>、<live-player> 标签还未创建完成,获取或者调用 livepushercontextliveplayercontext 的方法行为不确定。onReady 表示页面已经加载,完成初次渲染,跟 <live-pusher>、<live-player> 标签相关的操作都需要放在 onReady 里面实现。

举例说明:

代码语言:javascript复制
onReady: function () {
    var self = this;
    this.data.videoContext = wx.createLivePlayerContext("video-livePlayer");
    this.setData({
      playUrl: "rtmp://live.hkstv.hk.lxdns.com/live/hks",
    }, function () {
      self.data.videoContext.stop();
      self.data.videoContext.play();
    })
  },

5、使用同一个 <live-player> 标签播放不同的 URL 不生效如何解决?

当模式为 autoplay 时,playUrl 变更目前不会自动播放;非 autoplay 模式时改变 playUrl 之后需要调用play函数。因此不论哪种模式当改变 playUrl 播放另外一个流地址时,推荐的做法为:

代码语言:javascript复制
 onPlay: function () {
    var self = this;
    this.data.videoContext = wx.createLivePlayerContext("video-livePlayer");
    this.setData({
      playUrl: "rtmp://live.hkstv.hk.lxdns.com/live/hks",
    }, function () {
      self.data.videoContext.stop();
      self.data.videoContext.play();
    })
  },

请注意这里一定要在setData 的回调里面调用videoContext的方法,同时要先调用stop再调用start

6、<live-player> 标签动态设置 mode 属性不生效如何解决?

目前动态设置 mode 属性没有做到动态生效,需要重新stopstart,具体请参考如下使用方式:

代码语言:javascript复制
  onChangeMode: function () {
    var self = this;
    this.data.videoContext = wx.createLivePlayerContext("video-livePlayer");
      if (this.data.mode == "live") {
      this.setData({ mode: "RTC"}, function () {
          self.data.videoContext.stop();
          self.data.videoContext.play();
        });
    }
    else {
      this.setData({ mode: "live"}, function () {
        self.data.videoContext.stop();
        self.data.videoContext.play();
      });
    }
  },

7、<live-pusher> 或 <live-player> 标签上面叠加 cover-view 时不推荐修改标签的大小

当前 <live-pusher> 或 <live-player> 大小变化时,iOS版本小程序对叠加在上面的cover-view不能追随变化,界面显示不可预期, 因此当在 <live-pusher> 或 <live-player> 标签上面叠加cover-view时,不要动态修改 <live-pusher> 或 <live-player> 标签的大小。

8、建议在页面 onUnload 里面对 <live-pusher> 与 <live-player> 标签做清理

具体请参考如下:

代码语言:javascript复制
  onUnload: function () {
    self.data.pusherContext && self.data.pusherContext.stop();
    self.data.playerContext && self.data.playerContext.stop();
  },

0 人点赞