라이브 방송 컴포넌트를 통해 미니프로그램의 라이브 방송 기능 구현
- 王林앞으로
- 2021-01-01 12:35:425427검색
1. 소개
WeChat은 미니 프로그램 개발자를 위한 라이브 방송 구성 요소를 제공합니다. 이 구성 요소를 호출하면 판매자는 미니 프로그램에서 라이브 방송 기능을 구현할 수 있습니다.
(학습 영상 공유: 프로그래밍 영상)
이제 미니 프로그램에 라이브 방송 구성 요소를 도입하는 방법을 소개하겠습니다.
2. 사용 방법
1. [라이브 방송 구성 요소] 소개 방법
버전 제한:
WeChat 클라이언트 버전 7.0.7 이상(기본 라이브러리 버전 2.9.x 이상에서는 동일 레이어 렌더링 지원) 생방송 시청 그리고 생방송 방 기능을 사용하십시오. 하위 버전이 생방송 방에 처음 들어가면 사용자에게 WeChat 클라이언트 버전을 업그레이드하라는 메시지가 표시됩니다(하위 버전은 생방송을 볼 수만 있고 생방송을 사용할 수 없습니다). 룸 기능).
[라이브 스트리밍 구성 요소] live-player-plugin 코드 패키지를 하위 패키지에 도입하고, 프로젝트 루트 디렉터리의 app.json을 참조합니다. 샘플 코드는 다음과 같습니다.
{
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/home/home"
],
"plugins": {
"live-player-plugin": {
"version": "1.0.0", // 填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号
"provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid
}
}
}
]
}
2. 컴포넌트]
1단계 클릭 방법: 컴포넌트 코드 패키지 구성이 도입된 후 링크 주소를 통해 생방송 컴포넌트 페이지로 바로 이동할 수 있습니다(즉, 생방송 방 페이지로 들어가려면 링크 주소가 필요합니다). 생방송 방 ID 가져오기; 방 ID는 다음 [생방송 방 목록 가져오기] API를 통해 얻을 수 있습니다. 샘플 코드는 다음과 같습니다.
<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房间id]"> Go to Live Player page </navigator>
이 링크를 통해 생방송 구성 요소 페이지로 이동할 수 있습니다( 현재 페이지 입구는 'live-player-plugin'에만 열려 있습니다.)
예제 렌더링은 다음과 같습니다.
3. 기타 관련 구성 요소, 인터페이스 및 전달 매개변수
● 구독 구성 요소: subscribe
● 라이브 방송 상태 가져오기 API: getLiveStatus
● 라이브 방송에서 전달 room에서 업체 상세페이지로 이동 매개변수: room_id
● 그룹 공유 카드에서 생방송 방으로 돌아올 때 전달되는 매개변수: shareTicket
● 생방송 방 목록 API를 얻기 위한 배경
● 재생 소스 비디오 API를 얻기 위한 배경
참고: 위 2가지 백그라운드 통화 인터페이스의 총 상한은 하루 500회입니다.
1. 【구독】구성요소
기능 설명:
사용자는 라이브 방송 방에 입장하여 라이브를 단일 구독할 수 있습니다. 방송이 시작되면 라이브 방송 구성 요소가 자동으로 사용자에게 시작 알림을 보냅니다. 개발자에게는 추가 개발이 필요하지 않습니다.
구성 요소 사용:
동일한 방송 알림 기능이 필요한 경우 생방송 구성 요소 페이지가 아닌 미니 프로그램의 다른 페이지에서는 [구독] 구성 요소를 소개할 수 있습니다. 구독은 페이지의 홈 페이지(예: 홈 페이지)에 있어야 합니다. json은 구독 구성 요소를 참조합니다. 샘플 코드는 다음과 같습니다.
{
"usingComponents": {
"subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
}
}
그런 다음 home.wxml의 구독 구성 요소를 사용할 수 있습니다. 여기서 라이브 방 ID는 아래의 [라이브 방 목록 가져오기] API를 통해 얻을 수 있습니다.
<subscribe room-id="[直播房间id]"></subscribe>
2. [라이브 방송 상태 가져오기] 인터페이스
인터페이스 설명:
첫 번째 획득 후 즉시 라이브 방송 상태로 돌아가고 1분 이하마다 라이브 방송 상태를 가져오기 위해 폴링합니다.
라이브 방송 상태 설명:
l 101 라이브 방송: 앵커가 정상적으로 방송을 시작했으며 라이브 방송이 정상적인 상태임을 나타냅니다.
l 102 시작되지 않음: 앵커가 아직 방송을 시작하지 않았음을 나타냅니다. 생방송 종료 시 [종료] 버튼을 눌러 생방송이 정상적으로 종료되었거나, 생방송이 비정상적으로 종료된 지 15분 후 시스템에 의해 생방송이 강제 종료되었습니다. 위반으로 인한 운영 처벌로 인해 금지됨
l 105 Paused: MP 애플릿 배경 콘솔에서 작동하여 라이브 방송이 일시 중지되었음을 나타냅니다.
l 106 예외: 앵커가 떠나면 배경으로 전환됨을 나타냅니다. 또는 인터넷 연결이 끊긴 경우, 생방송이 비정상적인 상태로 판단되어 15분 이내에 복원되면 생방송이 재개되지 않습니다.
l 107 만료됨: 라이브 방송 방이 시작되지 않았으며 MP 애플릿 배경에서 라이브 방송 방을 생성할 때 입력한 라이브 방송 계획 종료 시간이 있음을 의미합니다.
호출 방법 ：
[라이브 방송 상태 가져오기] 인터페이스 getLiveStatus를 호출하려면 [라이브 스트리밍 구성 요소] 라이브 플레이어를 참조해야 합니다. - 미니 프로그램 페이지 상단의 플러그인 샘플 코드는 다음과 같습니다.
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
})
.catch(err =>
{
console.log(err)
})
3. 전달 매개변수
버전 제한 사항:
생방송 구성 요소 버전 1.0.1 이상은 다음 전달을 지원합니다. 매개변수
shareTicket: 생방송 방 카드를 WeChat 그룹에 공유하세요. 이 카드를 클릭하면 ApponShow
에서 매개변수를 얻을 수 있습니다. room_id: 선반 제품을 클릭하면 생방송 구성 요소 페이지로 이동합니다. 판매자 애플릿의 제품 세부 정보 페이지로 이동하면 방 번호 매개변수가 가져옵니다
4. [라이브 방 목록 가져오기] 인터페이스는 백그라운드 통화에만 사용됩니다.
인터페이스 규칙:
该接口仅供商家后台调用，调用限额500次/天，建议开发者自己做缓存（此接口与下面【获取回放视频】接口共用500次/天限制，请合理分配调用频次）。
请求URL：
http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=
请求方式：
POST
请求示例：
Request
{
"start": 0, // 起始拉取房间，start=0表示从第1个房间开始拉取
"limit": 10 // 每次拉取的个数上限，不要设置过大，建议100以内
}
Response
{
"errcode": 0, // errcode=0代表成功；errcode=1代表未创建直播房间
"errmsg": "ok",
"room_info": [{
"name": "直播房间名",
"roomid": 1,
"cover_img": "http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdl2et1tPAQ37bdicnxoVialDLCKKDcPBy8Iic0kCiaiaalXg3EbpNKoicrweQ\/0?wx_fmt=jpeg",
"live_satus": 101,
"start_time": 1568128900,
"end_time": 1568131200,
"anchor_name": "李四",
"anchor_img": "http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdlp0sf9YTorOzUbGF9Eib6ic54k9fX0xreAIt35HCeiakO04yCwymoKTjw\/0?wx_fmt=jpeg",
"goods":[
{ "cover_img":"http://mmbiz.qpic.cn/mmbiz_png/FVribAGdErI2PmyST9ZM0JLbNM48I7TH2FlrwYOlnYqGaej8qKubG1EvK0QIkkwqvicrYTzVtjKmSZSeY5ianc3mw/0?wx_fmt=png",
"url":"pages/index/index.html",
"price":1100,
"name":"fdgfgf"
}
],
"total":1
}
返回字段：
name 房间名
roomid 房间id
注：需先在小程序MP后台创建直播房间，否则会报错（错误码1）
cover_img 封面图片url
start_time 直播计划开始时间，列表按照 start_time 降序排列
end_time 直播计划结束时间
anchor_name 主播名
goods 商品列表
live_status 直播状态 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常,107:已过期（直播状态解释可参考【获取直播状态】接口）
5. 【获取回放源视频】接口，仅供后台调用
接口规则：
该接口仅供商家后台调用，调用限额500次/天，此接口与上面【获取房间列表】接口共用500次/天限制，请合理分配调用频次）。
接口说明：
该接口可在直播结束后拿到回放源视频（直播结束后大约10分钟会生成回放，源视频无评论等内容）
拿到源视频后需要开发者自行开发、使用回放视频
如果把源视频直接放在小程序上使用，需要小程序具备视频资质（具体资质要求请参考《小程序开发的类目服务》）
后续官方会直接提供无需开发的直播回放功能，敬请期待。
请求URL：
http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=
请求方式：
POST
请求示例：
Request
{
"action": "get_replay", // 获取回放
"room_id": 354, // 直播间id
"start": 0, // 起始拉取视频，start=0表示从第1个视频片段开始拉取
"limit": 10 // 每次拉取的个数上限，不要设置过大，建议100以内
}
Response
{
"live_replay": [
{
"expire_time": "2020-11-11T03:49:55Z", // 回放视频url过期时间
"create_time": "2019-11-12T03:49:55Z", // 回放视频创建时间
"media_url": "http://xxxxx.vod2.myqcloud.com/xxxxx/xxxxx/f0.mp4" // 回放视频
}
],
"errcode": 0,
"total": 1,
"errmsg": "ok"
} // 一场直播可能会产生多个视频片段。
四、其他说明
1、直播间小程序码
说明：
小程序引入直播组件后必须进行一次小程序发布上线，否则小程序码不生效
在MP小程序直播后台创建好直播间后，可以直接拿到直播间分享小程序码，无需额外开发
如果商家在后台自己生成的直播间小程序码，需要做以下配置（否则直播间左上角返回键将失效）：
在跳转进入直播间的路径加上 type=9 标识场景入口为小程序码：
"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房间id]&type=9"
2、商家公众号文章添加小程序卡片
说明：
商家在公众号文章中添加跳转进入直播间的小程序卡片时，需要做以下配置（否则直播间左上角返回键将失效）：
在跳转进入直播间的路径加上 type=10 标识场景入口为小程序卡片：
"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房间id]&type=10"
3、商品详情页面需添加返回按钮
点击直播组件页面里的货架商品跳转到商家小程序的商品详情页面后，为了避免用户无法再返回直播间，商家需在小程序商品详情页面左上角加上返回按钮，用于返回到直播组件页面。
4、快速更新直播组件版本的方法
商家小程序对应的管理员微信号收到【公众平台安全助手】下发的直播组件版本更新的服务通知后，可点击通知进行快速发布，移动端即可快速更新小程序内直播组件的新版本，无需修改代码或重新提交审核。
服务通知如下图所示：
相关推荐：小程序开发教程
위 내용은 라이브 방송 컴포넌트를 통해 미니프로그램의 라이브 방송 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!