# Component interface

# 1. Subscription component note: to use this component, you need to use it in the main package/Subcontracting introduces live streaming components first)

Functional explanationSubscription component can be configured to the Mini Program page, can be a single subscription to a live broadcast, start broadcast will automatically send a reminder to the user,No additional developer required

Component use:: If requiredOther pages of the Mini Program outside the live pageAlso has the same function of the start alert, can introduce the [subscription] component Subscribe (This component will appear before the broadcast and will disappear when the live stream starts)Required page Pages such as home Page) home.json Reference subscription components, which can be accessed via the stopPropagation Property controls whether the event bubbling is blocked by default, stopPropagation for false）。

# The sample code is as follows:

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

And then you can get home.wxml A subscription component is used in a live room id Through the following Get a list of live rooms API Get. Also, the subscription component supports custom colors and sizes and carries custom parameters, which are described as follows:

• room-id: indicates room number, type Number (default is 0)
• widthFor width, type Number (default is 120)
• heightFor height, type Number (default is 41)
• font-sizeRepresents font size, type Number (default 17)
• colorIndicates font color, type String (default is' FFFFFF ')
• background-colorRepresents the background color, type String (defaults to '#6467F0'）
• custom-paramsRepresents a custom parameter of type String (empty by default)
• stop-propagationTo block the event bubbling, type Boolean (false by default, does not prevent events from bubbling)

// to pass an argument
let roomId = 1
let width = 120
let height = 41
let fontSize = 17
let color = '#FFFFFF'
let backgroundColor = '#6467F0'
let customParams = EncodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // The developer carries custom parameters on the subscription component, such as the path and pid parameters in the example, which can then be used in the App onShow Life-cycle options (maximum 600 characters, more than will be truncated)
this.setData({
    width,
    height,
    fontSize,
    color,
    backgroundColor,
    customParams
})

// Listening for subscription events to get subscription status
onSubscribe(and) {
    console.log('Room No. ' and.detail.room_id)
    console.log('subscriber openid ', and.detail.openid)
    console.log('Subscription or not ', and.detail.is_subscribe)
}

<subscribe
    room-id="{{roomId}}"
    width="{{width}}"
    height="{{height}}"
    font-size="{{fontSize}}"
    color="{{color}}"
    background-color="{{backgroundColor}}"
    custom-params="{{customParams}}"
    bindsubscribe="onSubscribe">
</subscribe>

# 2. [Get Single Subscription Status] interface (note: To use this interface, use the/Subcontracting introduces live streaming components first)

Interface DxplainationGet single subscription status of live studio

Call methodTo call the get single subscription status interface GetSubscribeStatus, which needs to be referenced at the top of the Mini Program page live-player-plugin。

# The sample code is as follows:

let livePlayer = requirePlugin('live-player-plugin')

// Get Live Room Single Subscription Status
const roomId = xxx // room id
livePlayer.getSubscribeStatus({ room_id: roomId })
    .then(nothing => {
        console.log('Room No. ' nothing.room_id)
        console.log('subscriber openid ', nothing.openid)
        console.log('Subscription or not ', nothing.is_subscribe)
    }).catch(err => {
        console.log('get subscribe status', err)
    })

# 3. [Get live status] interface (Note: To use this interface, you need to use it in the main package/Subcontracting introduces live streaming components first)

Interface DxplainationReturn to live status immediately after the first acquisition, and then poll for live status at intervals of 1 minute or less

# Live Status Notes:

• 101 Live streamingA normal state of broadcasting

• 102 UnstartedThe anchor has not started yet

• 103 ClosedClick the [end] on in the live side to close the live normally, or live abnormal 15 End of live stream forced by system after 15 minutes

• 104 Banned:: Said to be banned because of operational penalties for violations

• 105 Suspended: denotes that MP Mini Program background - Console operations suspended live

• 106 abnormalWhen the anchor leaves, cuts the background and breaks the network, the live broadcast is judged to be abnormal. Return to normal live streaming status in minutesif 15 Minutes after the broadcast has not been restored, the system will be forced to end the broadcast

• 107 ExpiredThe live broadcast has not started and has reached the MP When the Mini Program background creates the broadcast room, fill in the broadcast schedule end time, the broadcast is judged to be expired and can not be started again

Call methodTo call the get live status interface GetLiveStatus, which needs to be referenced at the top of the Mini Program page live-player-plugin。

# The sample code is as follows:

let livePlayer = requirePlugin('live-player-plugin')

// Click here to return to the homepage.
const roomId = xxx // room id
livePlayer.getLiveStatus({ room_id: roomId })
    .then(nothing => {
        // 101: On the air, 102: Not started, 103: Has ended, 104: Banned, 105: Suspended, 106: Exception, 107: expired 
        const liveStatus = nothing.liveStatus
        console.log('get live status', liveStatus)
    })
    .catch(err => {
        console.log('get live status', err)
    })
// Next 1 minute or less frequency to poll for live status
setInterval(() => {
    livePlayer.getLiveStatus({ room_id: roomId })
        .then(nothing => {
            // 101: On the air, 102: Not started, 103: Has ended, 104: Banned, 105: Suspended, 106: Exception, 107: expired 
            const liveStatus = nothing.liveStatus
            console.log('get live status', liveStatus)
        })
        .catch(err => {
            console.log('get live status', err)
        })
}, 60000)

# 4. Get the user openid parameter interface note: to use this interface, you need to use it in the main package/Subcontracting introduces live streaming components first)

Interface Dxplaination: Live component version 1.3.0 And above get the user openid parameter from this interface.

Call methodTo call the get user openid parameter interface GetOpenid, you need to reference [Live Component] at the top of the Mini Program page live-player-plugin。

# The sample code is as follows:

let livePlayer = requirePlugin('live-player-plugin')

App({
    onShow(options) {
        livePlayer.getOpenid({ room_id: [Live room id] }) // The interface passes in the parameter room number
            .then(nothing => {
                console.log('get openid', nothing.openid) // User openid
            }).catch(err => {
                console.log('get openid', err)
            })
    }
})

# 5. [Get share card link parameter] interface (Note: To use this interface, you need to use it in the main package/Subcontracting introduces live streaming components first)

Interface DxplainationBecause of the underlying library data security policy, the App OnShow (requires a live component in the main package) or Page The query in the life cycle of onShow (which requires the live component to be subcontracted) cannot get the shared card link parameters in the live room. Live component version 1.3.0 And above version through the interface to obtain the following parameters, developers can establish user, live between the mapping between the product.

• Share your card into the live broadcast: Room number room_id + Entrant openid + Sharer share_openid + Developer Custom Parameters custom_params

Call methodTo call the get share card link parameter interface GetShareParams, to be referenced at the top of the Mini Program page live-player-plugin。

# The sample code is as follows:

let livePlayer = requirePlugin('live-player-plugin')

App({
    onShow(options) {
        // Share the cards/Subscription message/Scan the QR code/Advertising/The getShareParams interface can be invoked for scenarios such as Moments to get the following parameters
        const sceneList = [1007, 1008, 1014, 1044, 1045, 1046, 1047, 1048, 1049, 1073, 1154, 1155]
        if  (sceneList.includes(options.scene)) {
            livePlayer.getShareParams()
                .then(nothing => {
                    // Room number
                    console.log('get room id', nothing.room_id) 
                    // User openid
                    console.log('get openid', nothing.openid) 
                    // Share the open id, share the card into the scene only have
                    console.log('get share openid', nothing.share_openid) 
                    // Developers in the jump into the live room page, the page path to carry custom parameters, here back to the developer
                    console.log('get custom params', nothing.custom_params) 
                }).catch(err => {
                    console.log('get share params', err)
                })
        }
    }
})