uniapp微信小程序直播

https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/industry/liveplayer/live-player-plugin.html

https://docs.qq.com/doc/DZHhzV0FiYXRQV01i

不能用<live-player>，因为live-player的src要赋值rtmp格式流视频文件，而<navigator>对应的小程序插件只需要从接口获取房间号和图片即可，但首页无法实现一开始的小窗口播放，只能在点开全屏播放后后退会出现小窗浮层

 

manifest.json:

"mp-weixin" : {
        "appid" : "wx25......",
        "setting" : {
            "urlCheck" : false,
            "es6" : false,
            "postcss" : false,
            "minified" : true
        },
        "plugins": {
            "live-player-plugin": {
                "version": "1.3.5",
                "provider": "wx2b03c6e691cd7370"
            }
        },
        "usingComponents" : true,
        "permission" : {},
        "lazyCodeLoading" : "requiredComponents"
    },

 

pages.json:

{
    "pages": [
        {
            "path": "pages/index/index",
            "name":"index",
            "style": {
                "navigationStyle": "custom",
                "navigationBarTitleText": "首页",
                "app-plus": {
                    "bounce": "vertical",
                    "titleNView": {
                        "autoBackButton":"true"
                    }
                },
                "usingComponents": {
                      "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
                }
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "网",
        "navigationBarBackgroundColor": "#F7F5F6",
        "backgroundColor": "#F7F5F6",
        "app-plus": {
            "titleNView": {  
                "backgroundImage":"#00b4ed"
            }  
        }
    },
    "lazyCodeLoading":"requiredComponents"
}

 

index.vue:

<template>
    <view class="container">
        <view v-show="liveFlag">
        <view class="zhibo">
            <view class="zhibo_right">
                <view class="live" >
                    <navigator :url="live.url" style=" height: 100%;">
                        <view class="liveBtn" >直播中</view>
                        <image class="liveImg" :src="live.curUrl" mode="aspectFill"></image>
                    </navigator>
                </view>
            </view>
        </view>
        </view>
        <view class="bottomV"></view>
        <Tabbar></Tabbar>
    </view>
</template>

<script>// let livePlayer = requirePlugin('live-player-plugin')
    export default {
        name:'index',
        components: {},
        data() {
            return {
                title:'首页',
                liveFlag:false,
                live:{
                    url:'',
                    autoplay:'true',
                    mode:'live',
                    picture:["push", "pop"],
                    roomId:0,
                    customParams:'',
                    curUrl:''
                }
            }
        },
        onLoad() {
            //console.log('1')
            //监听页面加载，参数为上一个页面传递的数据，类型为Object
        },
        onShow(){
            //console.log('2')
            //监听页面的显示，页面每次出现在屏幕上都会触发this.getDate();
        },    
        methods: {
　　　　　　　//无用
            activeLive(){
                this.live.customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
                var curUrl = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + this.live.roomId + '&custom_params=' + this.live.customParams
                wx.navigateTo({
                    url: curUrl
                })
            },
            getDate(){
                uni.request({
                    url: this.$httpUrl.HomeDataGetList,
                    method: 'POST',
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    success: (res) => {
                        // console.log(res)
                        if (res.data.s.co === 1) {
                            let info = res.data.d.rd;
                            //console.log(info)
                            //5直播
                            info.forEach((item,index)=>{
                                if(item.Classify == 5){
                                    this.liveFlag = true
                                    this.live.roomId = Number(item.Url)　　//获取到房间号
                                    this.live.curUrl = item.ImgUrl　　　　//获取到主播上传照片
                                    // this.live.curUrl = 'http://img.myqpw.com/a/5/2/9/4/8/5121359236477258585.jpg'//'https://img.myqpw.com/mini/static/image/head.jpg'
                                    this.live.url = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + this.live.roomId + '&type=10'
                                    // livePlayer.getSubscribeStatus({ room_id: this.live.roomId }).then(res => {
                                    //     console.log('房间号：', res.room_id)
                                    //     console.log('订阅用户openid', res.openid)
                                    //     console.log('是否订阅', res.is_subscribe)
                                    // }).catch(err => {
                                    //     console.log('get subscribe status', err)
                                    // })
                                }
                            })
                        } else {
                            // uni.showToast({
                            //     title: res.data.s.mg,
                            //     icon: "none",
                            //     duration: 2000
                            // });
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .zhibo{
            display: flex;
            .zhibo_right{
                width:50%;
                margin-top:20rpx;
                .live{
                    position:relative;
                    height:100%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: center;
                    flex-direction: column;
                    margin-right:20rpx;
                    .liveBtn{
                        position: absolute;
                        top:10rpx;
                        left:10rpx;
                        z-index: 1;
                        width: 100rpx;
                        height: 40rpx;
                        line-height: 40rpx;
                        border: none;
                        border-radius: 20rpx;
                        font-size: 24rpx;
                        color:#FFFFFF;
                        text-align: center;
                        background: linear-gradient(90deg, rgba(180, 101, 218, 1) 0%, rgba(207, 108, 201, 1) 33%, rgba(238, 96, 156, 1) 66%, rgba(238, 96, 156, 1) 100%) !important;
                    }
                    .liveImg{
                        width:100%;
                        height:100%;
                        border-radius:15rpx;
                    }
                }
            }
        }
    }
</style>