라이브 방송 컴포넌트를 통해 미니프로그램의 라이브 방송 기능 구현

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"

} // 一场直播可能会产生多个视频片段。

로그인 후 복사