如何用即构sdk开发实现小程序直播

小程序开放的实时音视频能力,封装了音视频采集、前处理、编码、推流、拉流、解码和渲染等功能,大大降低了音视频的开发门槛。在小程序直播的开发中,微信对外提供<live-pusher>和<live-player> ,其中<live-pusher>是视频推流的主要功能组件,<live-player>的主要功能则是播放,所有接口都是以集成封装的形式提供,开发者可以依据需求在一定范围内灵活设置使用。

 

小程序直播的类型:

业内直播产品目前的分类主要是基于观众的可参与功能进行划分,大致可以归为单向直播、连麦直播、视频互动直播三类,以下做一个简单的描述:

  • 单向直播

主播开启视频直播场景,观众端观看视频,但仅可通过文字形式与主播互动,该场景下对延迟的容忍度较高,例如:活动直播、安防监控等场景使用的就是单向直播模式;

  • 连麦互动直播

主播开启直播服务后,观众可以在观看主播视频直播服务的同时通过文字形式与主播进行交流互动,在特定时刻观众不满足于仅能通过文字与主播进行互动时,可以申请与主播进行音视频互动,例如:映客、花椒、虎牙等平台多使用的都是连麦互动直播模式;

  • 视频互动直播

主播开启视频互动直播服务后,观众加入房间后直接参与互动,该场景下对音视频的流畅性要求较高,例如:语聊房、视频相亲等场景使用的即是视频互动直播模式;

小程序目前支持的推流协议为flv或Rtmp协议,仅可以支持单向直播的视频需求,若需要实现连麦直播或视频互动类产品,就必须采取网关形式接入。小程序网关的主要作用是将rtmp或flv协议转换为对应厂商的实时协议。

即构基于自研的强大音视频引擎,实现了Android、IOS、PC/Mac、微信小程序、H5等全终端设备互连互通的音视频云服务体系,即构音视频云服务包含了小程序网关的协议转换、流媒体接收分发、混流、录制等等多种功能。功能实现参见即构-小程序功能集成说明:https://doc.zego.im/CN/387.html

基于即构SDK实现小程序直播的方法:

1、初始化 SDK

 
  1. ZegoLive/pages/liveroom/room/room.js

  2. // 声明变量var ZegoSDK = require("../../../js/jZego-wx-1.0.2.js");var zg;

  3. // 初始化实例

  4. zg = new ZegoSDK.ZegoClient();

  5. // 配置必要参数

  6. zg.config({

  7. appid: appid, // 必填,应用id,请从 即构管理控制台-https://console.zego.im/acount/register 获取

  8. idName: idName, // 必填,用户自定义id,全局唯一

  9. nickName: nickName, // 必填,用户自定义昵称

  10. remoteLogLevel: 1, // 上传日志最低级别,建议跟 logLevel 一致

  11. logLevel: 1, // 日志级别,debug:0,info:1,warn:2,error:3,report:99,disable:100(数字越大,日志越少),建议选择 1

  12. server: server // 必填,接入服务器地址,请从 即构管理控制台-https://console.zego.im/acount/register 获取

  13. logUrl: logUrl // 必填,logServer 地址,请从 即构管理控制台-https://console.zego.im/acount/register 获取

  14. });

2、登录房间
登录房间成功是后续所有操作的前提。即构音视频云小程序中演示源码片段如下,仅供参考:

 
  1. ZegoLive/pages/liveroom/room/room.js

  2.  
  3. zg.login(self.data.roomID, self.data.loginType == "anchor" ? 1 : 2, token, function (streamList) {

  4. // 登录成功处理

  5. console.log('>>>[liveroom-room] login succeeded');

  6. }, function (err) {

  7. // 登录失败处理

  8. console.log('>>>[liveroom-room] login failed, error is: ', err);

  9. });

3、开始推流
主播登录房间成功后,根据业务逻辑准备推流。使用 SDK 推流播放需要遵循如下步骤:触发推流,调用 SDK的 startPublishingStream 获取 streamID 对应的推流地址,在 SDK 的回调 onStreamUrlUpdate 中获推流地址,调用微信小程序的 wx.createLivePusherContext 创建 live-pusher ,将步骤获取的推流地址设置为 live-pusher 的 url,然后调用 live-pusher 的 start() 录制视频。
演示源码片段如下,仅供参考:

 
  1. ZegoLive/pages/liveroom/room/room.js

  2. // 1/2. 主播登录房间成功后触发推流,调用 SDK 的 startPublishingStream 获取 streamID 对应的推流地址

  3. zg.login(self.data.roomID, self.data.loginType == "anchor" ? 1 : 2, token, function (streamList) {

  4. // 主播登录成功即推流

  5. if (self.data.loginType == 'anchor') {

  6. console.log('>>>[liveroom-room] anchor startPublishingStream, publishStreamID: ' + self.data.publishStreamID);

  7.  
  8. zg.setPreferPublishSourceType(1); // 0:推流到 CDN,观众拉流延迟在 2 秒左右;1:推流到 ZEGO 服务器,延迟在 400ms 左右

  9. zg.startPublishingStream(self.data.publishStreamID, '');

  10. }

  11. }, function (err) {

  12. console.log('>>>[liveroom-room] login failed, error is: ', err);

  13. });

  14. c// 3. 在 SDK 的回调 onStreamUrlUpdate 中获取推流地址// type: {play: 0, publish: 1};

  15. zg.onStreamUrlUpdate = function (streamid, url, type) {

  16. console.log(">>>[liveroom-room] zg onStreamUrlUpdate, streamId: " + streamid + ', type: ' + (type == 0 ? 'play' : 'publish') + ', url: ' + url);

  17.  
  18. ...

  19. };y

  20. // 4. 调用微信小程序的 wx.createLivePusherContext 创建 live-pusher ,将步骤 3 中获取的推流流地址设置为 live-player 的 url,然后调用 live-pusher 的 start 录制视频

  21. setPushUrl: function (url) {

  22. console.log('>>>[liveroom-room] setPushUrl: ', url);

  23. var self = this;

  24. ...

  25. self.setData({

  26. pushUrl: url,

  27. pusherVideoContext : wx.createLivePusherContext("video-livePusher", self),

  28. }, function () {

  29. self.data.pusherVideoContext.stop();

  30. self.data.pusherVideoContext.start();

  31. });

  32. },

4、开始拉流

观众登录房间成功后,根据业务逻辑准备拉流。使用 SDK 拉流播放需要遵循如下步骤:触发拉流,调用SDK的 startPlayingStream 获取streamID 对应的播放地址,在SDK的回调 onStreamUrlUpdate 中获取拉流地址,调用微信小程序的 wx.createLivePlayerContext 创建 live-player ,将获取的推流地址设置为 live-player 的 src,然后调用 live-player 的 play() 播放视频。此步骤也可以设置 live-player 为 autoplay,此时播放器会自动播放,无需再手动调用 play()。

演示源码片段如下,仅供参考:

 
  1. ZegoLive/pages/liveroom/room/room.js

  2. // 1. 登录后拉流

  3. zg.login(self.data.roomID, self.data.loginType == "anchor" ? 1 : 2, token, function (streamList) {

  4. // 房间内已经有流,拉流

  5. self.startPlayingStreamList(streamList);

  6. }, function (err) {

  7. console.log('>>>[liveroom-room] login failed, error is: ', err);

  8. });

  9. // 2. 通过 SDK 获取 streamID 对应的播放地址

  10. startPlayingStreamList: function (streamList) {

  11. var self = this;

  12.  
  13. ...

  14.  
  15. // 设置拉流目标地址,可选,0:auto;1:从 bgp 拉流

  16. zg.setPreferPlaySourceType(1);

  17.  
  18. // 获取每个 streamID 对应的拉流 url

  19. var playStreamList = self.data.playStreamList;

  20. for (var i = 0; i < streamList.length; i++) {

  21. var streamID = streamList[i].stream_id;

  22. // 调用 SDK 的 startPlayingStream 获取 streamID 对应的播放地址

  23. zg.startPlayingStream(streamID);

  24. }

  25. },

  26. // 3. 在 SDK 的回调 onStreamUrlUpdate 中获取拉流地址// type: {play: 0, publish: 1};

  27. zg.onStreamUrlUpdate = function (streamid, url, type) {

  28. console.log(">>>[liveroom-room] zg onStreamUrlUpdate, streamId: " + streamid + ', type: ' + (type == 0 ? 'play' : 'publish') + ', url: ' + url);

  29. ...

  30. };

  31. // 4. 调用微信小程序的 wx.createLivePlayerContext 创建 live-player ,将步骤 3 中获取的拉流地址设置为 live-player 的 src,然后调用 live-player 的 play() 播放视频。此步骤也可以设置 live-player 为 autoplay,此时播放器会自动播放,无需再手动调用 play()

  32. setPlayUrl: function (streamid, url, self) {

  33. ...

  34. // 相同 streamid 的源不存在,创建新 player

  35. if (!isStreamRepeated) {

  36. streamInfo['streamID'] = streamid;

  37. streamInfo['playUrl'] = url;

  38. streamInfo['playContext'] = wx.createLivePlayerContext(streamid, self);

  39. self.data.playStreamList.push(streamInfo);

  40. }

  41. ...

  42. self.setData({

  43. playStreamList: self.data.playStreamList,

  44. }, function(){});

  45. },

基于即构SDK,简单4步就能构建小程序直播产品,实现视频直播功能。小程序商家通过增加直播互动功能,可进一步增加用户粘性,促进销售转化。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序SDK架构是指在开发微信小程序时所使用的软件开发工具包,它包含了一系列的API和工具,能够帮助开发者更轻松地构建和发布微信小程序。 微信小程序SDK架构基本上可以分为两个核心部分:前端开发和后端开发。前端开发主要是用来实现小程序界面和功能的展示,后端开发则是负责处理与服务器之间的数据交互和业务逻辑。 在前端开发中,微信小程序SDK提供了一些基本的API,例如界面渲染、用户交互、网络请求和存储等功能的调用接口。开发者可以通过调用这些API来实现小程序的各种功能,例如页面跳转、数据展示和用户登录等。此外,微信小程序SDK还提供了一套丰富的组件库,开发者可以使用这些组件来快速构建小程序界面,提高开发效率。 在后端开发中,微信小程序SDK也提供了一些API和工具,用于实现与服务器之间的数据交互和业务逻辑的处理。开发者可以通过这些API来发送网络请求、存储数据、调用服务器接口等。同时,微信小程序SDK还提供了一些开发工具,如调试工具、性能监控和错误上报等,帮助开发者更好地进行项目管理和问题排查。 总的来说,微信小程序SDK架构是一个包含前端开发和后端开发两个部分的开发工具包,通过提供丰富的API和工具,帮助开发者更轻松地构建和发布微信小程序实现小程序的界面展示、功能实现和数据交互等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值