接入微信小程序直播

简介: 小程序直播组件是微信给开发者提供的实时视频直播工具,可以帮助开发者快速通过小程序向用户提供优质的直播内容,在小程序内流畅完成购买交易闭环,提升转化率;小程序直播组件包括观众端、主播端及后台管理端,其中观众端提供拉流、实时互动、订阅提醒、商品购买等能力,主播端提供开播、推流、音视频效果优化等能力,后台管理端则负责直播房间、商品货架以及营销活动配置等。

1、前言

image.png

一说看点直播,大家应该都知道,隶属腾讯。但是在微信小程序里面直播目前应该是不常见,今天要聊的就是它。

2、功能介绍

小程序直播组件是微信给开发者提供的实时视频直播工具,可以帮助开发者快速通过小程序向用户提供优质的直播内容,在小程序内流畅完成购买交易闭环,提升转化率;小程序直播组件包括观众端、主播端及后台管理端,其中观众端提供拉流、实时互动、订阅提醒、商品购买等能力,主播端提供开播、推流、音视频效果优化等能力,后台管理端则负责直播房间、商品货架以及营销活动配置等。

3、运营工作

登录小程序后台,找到功能-直播,录入直播间和绑定该直播间的商品信息,录完商品会有一个审核的时间,耐心等待即可。商品地址填写小程序页面,记得带上id,如pages/productDetail/productDetail.html?id=142

image.png

4、功能开发

小程序端:小程序端接入简单,支持在主包或分包内引入【直播组件】 live-player-plugin 代码包(注:直播组件不计入代码包体积),项目根目录的 app.json 引用,示例代码如下:

主包引入

        "live-player-plugin": {
            "version": "1.0.9", // 注意填写该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)
            "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
        }
    }

分包引入

        {
            "plugins": {
                "live-player-plugin": {
                    "version": "1.0.9", // 注意该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)
                    "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
                }
            }
        }
    ]

使用 navigator 组件跳转进入直播间
index.js

let roomId = [直播房间id] // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
    let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
    this.setData({
        roomId,
        customParams
    })

index.wxml

    // 其中wx2b03c6e691cd7370是直播组件appid不能修改

使用 navigateTo 方法跳转进入直播间
index.js

let roomId = [直播房间id] // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
    let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
    wx.navigateTo({
        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
    })
    // 其中wx2b03c6e691cd7370是直播组件appid不能修改
通过该链接可跳转到直播组件页面(当前页面入口仅开放‘live-player-plugin’)。

image.png

订阅组件

{
        "usingComponents": {
            "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
        }
    }

然后便可在 home.wxml 里使用订阅组件,其中直播房间 id 可通过;房间 id 可通过下面【获取直播房间列表】 API 获取

获取直播状态

let livePlayer = requirePlugin('live-player-plugin')
    
    // 首次获取立马返回直播状态,往后间隔1分钟或更慢的频率去轮询获取直播状态
    const roomId = xxx // 房间 id
    livePlayer.getLiveStatus({ room_id: roomId })
        .then(res => {
        // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常,107:已过期 
            const liveStatus = res.liveStatus
            console.log('get live status', liveStatus)
        })
        .catch(err => {
            console.log('get live status', err)
        })

获取用户openid参数接口

    
    App({
        onShow(options) {
            livePlayer.getOpenid({ room_id: [直播房间id] }) // 该接口传入参数为房间号
                .then(res => {
                    console.log('get openid', res.openid) // 用户openid
                }).catch(err => {
                    console.log('get openid', err)
                })
        }
    })

获取分享卡片链接参数

    
    App({
        onShow(options) {
            // 分享卡片入口场景才调用getShareParams接口获取以下参数
            if (options.scene == 1007 || options.scene == 1008 || options.scene == 1044) {
                livePlayer.getShareParams()
                    .then(res => {
                        console.log('get room id', res.room_id) // 房间号
                        console.log('get openid', res.openid) // 用户openid
                        console.log('get share openid', res.share_openid) // 分享者openid,分享卡片进入场景才有
                        console.log('get custom params', res.custom_params) // 开发者在跳转进入直播间页面时,页面路径上携带的自定义参数,这里传回给开发者
                    }).catch(err => {
                        console.log('get share params', err)
                    })
            }
        }
    })

服务端:为了能把直播数据嵌入到商户系统,可以通过接口拉取直播间数据和直播回放视频数据。

* 获取微信直播数据
* @param accessToken
* @param start 起始拉取房间,start=0表示从第1个房间开始拉取
* @param limit 每次拉取的个数上限,不要设置过大,建议100以内
* @return
*/
public static JSONObject getLiveInfo(String accessToken,Integer start,Integer limit) {

Map<String,Object> map = new HashMap<>();
// 起始拉取房间,start=0表示从第1个房间开始拉取
map.put("start",start);
// 每次拉取的个数上限,不要设置过大,建议100以内
map.put("limit",limit);

String requestParam = JSON.toJSONString(map);

logger.info("requestParam:{}",requestParam);

JSONObject jsonObject = CommonUtil.httpsRequestJson(String.format("http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=%s",accessToken),
"POST", requestParam);

logger.info("jsonObject:{}",jsonObject);

return jsonObject;
}

/**
* 获取微信直播回放数据
* @param roomId 直播间id
* @param start 起始拉取视频,start=0表示从第1个视频片段开始拉取
* @param limit 每次拉取的个数上限,不要设置过大,建议100以内
* @return
*/
public static JSONObject getLiveReplay(String accessToken,Long roomId,Integer start,Integer limit) {

Map<String,Object> map = new HashMap<>();
// 获取回放
map.put("action","get_replay");
// 直播间id
map.put("room_id",roomId);
// 起始拉取视频,start=0表示从第1个视频片段开始拉取
map.put("start",start);
// 每次拉取的个数上限,不要设置过大,建议100以内
map.put("limit",limit);

String requestParam = JSON.toJSONString(map);

logger.info("requestParam:{}",requestParam);

JSONObject jsonObject = CommonUtil.httpsRequestJson(String.format("http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=%s",accessToken),
        "POST", requestParam);

logger.info("jsonObject:{}",jsonObject);

return jsonObject;
}

更新回来的数据

image.png

山水有相逢,来日皆可期,谢谢阅读,我们再会

我手中的金箍棒,上能通天,下能探海

上一篇:无需交300元认证费,快速创建已认证的小程序

相关文章
|
域名解析 网络协议 视频直播
视频直播推流拉流慢、卡顿解决方案
视频直播类App当前已经普遍采用CDN来实现访问加速,但还是经常遇到推拉流慢、卡顿的问题。这类问题一般是由于调度不精准、域名劫持、终端手机接入网络动态切换等因素导致,结合使用CDN和HTTPDNS可以比较完美解决此类问题。
2784 0
视频直播推流拉流慢、卡顿解决方案
|
6月前
|
弹性计算 人工智能 安全
Alibaba cloud linux镜像操作系统怎么样?基于ECS深度优化的Linux操作系统全解析
Alibaba Cloud Linux是阿里云自研的免费Linux操作系统,兼容CentOS/RHEL生态,专为云服务器ECS优化,支持Web、云原生、AI等多种场景。提供十年免费维护、内核热补丁、多架构支持及安全加固,性能卓越,开箱即用,助力用户高效稳定上云。
|
缓存 安全 算法
Spring Security OAuth 2.0 资源服务器— JWT
Spring Security OAuth 2.0 资源服务器— JWT
1507 1
|
Web App开发 JavaScript 前端开发
WebRTC 和 RTC 有什么区别?
【10月更文挑战第25天】WebRTC是RTC的一种具体实现方式,侧重于网页端的实时通信,具有便捷性和跨平台性等特点;而RTC则是一个更广泛的概念,包括了各种不同平台和技术实现的实时通信方式,应用场景更加丰富多样。在实际应用中,需要根据具体的需求和场景选择合适的实时通信技术。
|
存储 网络协议 文件存储
使用Serv-U FTP服务器共享文件,实现无公网IP环境下远程访问-1
使用Serv-U FTP服务器共享文件,实现无公网IP环境下远程访问
666 2
|
JSON 自然语言处理 JavaScript
(最简单,详细,直接上手)uniapp/vue中英文多语言切换
(最简单,详细,直接上手)uniapp/vue中英文多语言切换
1754 0
(最简单,详细,直接上手)uniapp/vue中英文多语言切换
|
存储 数据采集 监控
数据治理利器Dataphin:数据安全管理3步走,保障全链路数据安全(V3.11版本)
瓴羊Dataphin(智能数据建设与治理),一直在探索数据安全管理能力的产品化最佳实践,即如何帮助企业利用产品工具能力,基于法律法规、主管部门要求和自身行业和业务的需要,建立起规范的分级分类制度,并对敏感数据制定相应的保护策略。企业通过Dataphin构建起合规的数据安全体系,将数据安全风险降至最低,让数据资产在安全合规的基础上,得到最大的价值释放。
1186 4
|
存储 弹性计算 移动开发
阿里云无影云电脑快速上手教程(保姆级)
阿里云无影云电脑快速上手教程(保姆级)阿里云无影云桌面即无影云电脑,云电脑如何使用?云电脑购买后没有用户名和密码,先创建用户设置密码,才可以登录连接到云电脑。云电脑想要访问公网还需要开通互联网访问功能。阿里云百科来详细说下阿里云无影云电脑从购买、创建用户名密码和访问互联网全过程
1139 0
|
XML 负载均衡 小程序
阿里云(一)云服务器ESC——负载均衡
当然,我这里只是单纯的创建和配置演示,具体在实际使用过程中,还会遇到一些很实际的问题,比如,我们需要将同一IP段访问的请求转发至同一台服务器上,避免SESSION失效等问题。 这些问题具体的解决及配置方法后面会说到。
814 0
|
安全 算法 网络协议
一篇文章读懂HTTPS及其背后的加密原理
HTTPS(全称: Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。本文,就来深入介绍下其原理。