视频

liuyg

2021-08-10 c2e4ee1dff3bd6f166711136519d561629e52af2

视频

 manifest.json

@@ -56,7 +56,9 @@
            "ios" : {},
            /* SDK配置 */
            "sdkConfigs" : {
                "ad" : {}
                "ad" : {
                    "360" : {}
                }
            },
            "icons" : {
                "android" : {

 pages.json

@@ -2,21 +2,24 @@
    "easycom": {
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    },
    "pages": [{
    "pages": [
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "首页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
            "path": "pages/login/login-account",
            "style": {
                "navigationBarTitleText": "登录",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        // {
        //     "path": "pages/login/login-account",
        //     "style": {
        //         "navigationBarTitleText": "登录",
        //         "enablePullDownRefresh": false,
        //         "navigationStyle": "custom"
        //     }
        // },
        {
            "path": "pages/registerUser/registerUser",
            "name": "loging",
            "style": {
@@ -28,7 +31,7 @@
                //     "animationDuration": 300
                // }
            }
        }, 
        },
        // {
        //     "path": "pages/home/home",
        //     "style": {
@@ -44,44 +47,48 @@
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }

        }, {
        },
        {
            "path": "pages/manage/manage",
            "style": {
                "navigationBarTitleText": "管理",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }

        }, {
        },
        {
            "path": "pages/user/center",
            "style": {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/talking/talking",
            "style": {
                "navigationBarTitleText": "好友",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/groupChat/groupChat",
            "style": {
                "navigationBarTitleText": "聊天室",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/groupChat/chatingQZ",
            "style": {
                "navigationBarTitleText": "聊天室",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/groupChat/chating",
            "style": {
                "navigationBarTitleText": "聊天室",
@@ -89,7 +96,6 @@
                "navigationStyle": "custom"
            }
        },

        {
            "path": "pages/securityStaff/exhibition",
            "style": {
@@ -98,7 +104,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/securityStaff/information",
            "style": {
                "navigationBarTitleText": "详细信息",
@@ -106,9 +113,6 @@
                "navigationStyle": "custom"
            }
        },



        {
            "path": "pages/company/company",
            "style": {
@@ -117,7 +121,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/company/companyDetail",
            "style": {
                "navigationBarTitleText": "服务单位管理",
@@ -125,7 +130,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/report/report",
            "style": {
                "navigationBarTitleText": "工作汇报",
@@ -133,7 +139,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/report/initiate",
            "style": {
                "navigationBarTitleText": "发起汇报",
@@ -141,7 +148,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/report/send",
            "style": {
                "navigationBarTitleText": "发送汇报列表",
@@ -149,7 +157,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/report/sendDetail",
            "style": {
                "navigationBarTitleText": "发送汇报详情",
@@ -157,7 +166,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/report/receive",
            "style": {
                "navigationBarTitleText": "接受汇报列表",
@@ -165,7 +175,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/report/receiveDetail",
            "style": {
                "navigationBarTitleText": "接收汇报详情",
@@ -173,7 +184,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/dispatch/dispatch",
            "style": {
                "navigationBarTitleText": "调度指令",
@@ -181,7 +193,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/dispatch/look",
            "style": {
                "navigationBarTitleText": "指令查看",
@@ -189,7 +202,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/dispatch/lookDetail",
            "style": {
                "navigationBarTitleText": "指令详情",
@@ -197,7 +211,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/dispatch/issue",
            "style": {
                "navigationBarTitleText": "文字指令下发",
@@ -205,7 +220,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/dispatch/imgissue",
            "style": {
                "navigationBarTitleText": "图片指令下发",
@@ -213,7 +229,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/message/message",
            "style": {
                "navigationBarTitleText": "通知通告",
@@ -221,7 +238,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/examine/examine",
            "style": {
                "navigationBarTitleText": "现场检查",
@@ -229,7 +247,8 @@
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
        },
        {
            "path": "pages/map/map",
            "style": {
                "navigationBarTitleText": "位置查看",
@@ -254,130 +273,145 @@
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }

        }, {
        },
        {
            "path": "pages/login/login-phone",
            "style": {
                "navigationBarTitleText": "手机登录",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }

        }, {
        },
        {
            "path": "pages/login/login-account",
            "style": {
                "navigationBarTitleText": "账号登录",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }

        }, {
        },
        {
            "path": "pages/system/setting",
            "style": {
                "navigationBarTitleText": "设置",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }

        }, {
        },
        {
            "path": "pages/news/list",
            "style": {
                "navigationBarTitleText": "新闻动态",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }

        }, {
        },
        {
            "path": "pages/news/detail",
            "style": {
                "navigationBarTitleText": "新闻详情页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/demo/demo",
            "style": {
                "navigationBarTitleText": "示例页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/demo/storage",
            "style": {
                "navigationBarTitleText": "storage测试页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/demo/vuex",
            "style": {
                "navigationBarTitleText": "vuex测试页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/demo/mock",
            "style": {
                "navigationBarTitleText": "mock测试页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/demo/request",
            "style": {
                "navigationBarTitleText": "request测试页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
        },
        {
            "path": "pages/demo/crud",
            "style": {
                "navigationBarTitleText": "crud测试页",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/videoCall/videoCall",
            "style": {
                "navigationBarTitleText": "视频通话",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
                // "enablePullDownRefresh": false
            }
        }
        ,{
            "path" : "pages/videoCall/videoCall",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "视频通话",
                "enablePullDownRefresh": false
            }
            
        }
    ],
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#fff",
        "backgroundColor": "#F7F7F7"
        // "app-plus": {
        //     "titleNView": true,
        //     "bounce": "none"
        // }
    },
    "tabBar": {
        "color": "#A6ABB5",
        "selectedColor": "#0BB9C8",
        "borderStyle": "white",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/home/home",
            "iconPath": "static/images/tabbar/home.png",
            "selectedIconPath": "static/images/tabbar/home_selected.png",
            "text": "首页"
        }, {
            "pagePath": "pages/groupChat/groupChat",
            "iconPath": "static/images/tabbar/demo.png",
            "selectedIconPath": "static/images/tabbar/demo_selected.png",
            "text": "好友"
        }, {
            "pagePath": "pages/manage/manage",
            "iconPath": "static/images/tabbar/manage.png",
            "selectedIconPath": "static/images/tabbar/manage_selected.png",
            "text": "管理"
        }, {
            "pagePath": "pages/user/center",
            "iconPath": "static/images/tabbar/user.png",
            "selectedIconPath": "static/images/tabbar/user_selected.png",
            "text": "我的"
        }]
        "list": [
            {
                "pagePath": "pages/home/home",
                "iconPath": "static/images/tabbar/home.png",
                "selectedIconPath": "static/images/tabbar/home_selected.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/groupChat/groupChat",
                "iconPath": "static/images/tabbar/demo.png",
                "selectedIconPath": "static/images/tabbar/demo_selected.png",
                "text": "好友"
            },
            {
                "pagePath": "pages/manage/manage",
                "iconPath": "static/images/tabbar/manage.png",
                "selectedIconPath": "static/images/tabbar/manage_selected.png",
                "text": "管理"
            },
            {
                "pagePath": "pages/user/center",
                "iconPath": "static/images/tabbar/user.png",
                "selectedIconPath": "static/images/tabbar/user_selected.png",
                "text": "我的"
            }
        ]
    }
}
}

 pages/groupChat/groupChat.vue

@@ -3,8 +3,13 @@
    <view class="work">
        <!-- 自定义顶部导航栏 -->
        <!-- <navBarTop :title="'聊天室'"></navBarTop> -->
        <view style="height:100rpx;"></view>
        <view class="tab" style="position: fixed;top: 0;width: 100%;height: 100rpx;z-index: 100;">
		
        <view style="height:205rpx;"></view>
        <view class="tab" style="position: fixed;top: 0;width: 100%;height: 205rpx;z-index: 100;">
            <u-navbar style="position: relative;left: -20rpx;" :is-fixed="false" :border-bottom="false" :is-back="false" title="好友"
                :background="{ background: '#0BB9C8' }" title-color="#fff">
                <image slot="right" src="/static/images/home/message.png" class="message-icon" mode="widthFix"></image>
            </u-navbar>
            <u-tabs :list="list" :is-scroll="false" :current="current" active-color="#14B9C8" inactive-color="#595959"
                height="100" @change="change" style="background-color:rgba(255,255,255,0.8)"></u-tabs>
        </view>
@@ -310,4 +315,10 @@
            }
        }
    }
    .message-icon {
        width: 32rpx;
        height: auto;
        margin-right: 27rpx;
    }
	
</style>

 pages/videoCall/moban.vue

copy from pages/videoCall/videoCall.vue
copy to pages/videoCall/moban.vue
File was copied from pages/videoCall/videoCall.vue
@@ -3,7 +3,7 @@
        <!-- 加入频道 -->
        <view class="index" v-if="!videoShow">
            <!-- 输入频道 -->
            <!-- <view class="chanel">
            <view class="chanel">
                <input class="uni-input activetext" v-model="channel" focus placeholder="请输入频道号" />
            </view>

@@ -17,33 +17,6 @@

            <view class="join">
                <button type="primary" class="button jion_bg" @click="join"><text class="activetext">加入频道</text></button>
            </view> -->
            <view class="Mains" v-if="isMain">
                <view class="title">
                    正在呼叫{{MainName}}
                    <u-loading size="36" mode="flower"></u-loading>
                </view>

                <!-- 挂断 -->
                <view class="open" @click="phoneFnMain">
                    <image class="video_bg_img" src="../../static/over.png" mode=""></image>
                    <text class="open_text">取消呼叫</text>

                </view>
            </view>
            <view class="Receiver" v-if="!isMain">
                <!-- <u-button class="ccbut" type="primary" @click="join('Receiver')">确认进入{{channel}}号房间</u-button> -->
                <!-- <u-button class="ccbut" type="primary" @click="comeBack">拒绝进入</u-button> -->
                <view class="open" @click="join('Receiver')">
                    <image class="video_bg_img" src="../../static/phone.png" mode=""></image>
                    <text class="open_text">接受</text>

                </view>
                <view class="open" @click="comeBack">
                    <image class="video_bg_img" src="../../static/over.png" mode=""></image>
                    <text class="open_text">挂断</text>

                </view>
            </view>
        </view>

@@ -78,8 +51,7 @@
            <view class="videoshow_control position">
                <!-- 音频开关 -->
                <view class="open" @click="audioSwitchFn" v-if="role == 1">
                    <image class="video_bg_img" src="../../static/au_in.png" mode="" v-if="audioSwitch == 'open'">
                    </image>
                    <image class="video_bg_img" src="../../static/au_in.png" mode="" v-if="audioSwitch == 'open'"></image>
                    <image class="video_bg_img" src="../../static/au_on.png" mode="" v-else></image>
                    <text class="open_text">音频</text>
                </view>
@@ -93,8 +65,7 @@

                <!-- 视频开关 -->
                <view class="open" @click="vedioSwitchFn" v-if="role == 1">
                    <image class="video_bg_img" src="../../static/vi_on.png" mode="" v-if="vedioSwitch == 'open'">
                    </image>
                    <image class="video_bg_img" src="../../static/vi_on.png" mode="" v-if="vedioSwitch == 'open'"></image>
                    <image class="video_bg_img" src="../../static/vi_in.png" mode="" v-else></image>
                    <text class="open_text">视频</text>
                </view>
@@ -142,13 +113,7 @@
                // videoShowBg: true, //背景展示
                promptText: "loading...",

                PeerVideoUser: [{
                    a: 1
                }, {
                    a: 2
                }, {
                    a: 3
                }], //用户视频加入存储
                PeerVideoUser: [], //用户视频加入存储
                PeerVideoUserStyle: "video_local", //用户视频加入样式

                // 本地
@@ -161,29 +126,14 @@
                popupType: "",
                popupMessage: "",

                isMain: false,
                MainName: '222',
                userName: '111'

                // closeArray: []
            }
        },
        // 页面初始加载（仅执行一次）
        onReady() {
            // 初始化
            this.channel = 2554;
            console.log(RtcModule)
            this.init();
        },
        onLoad(option) {
            console.log(option.state);
            if (option.state == "Mains") {
                this.isMain = true;
                setTimeout(res => {
                    this.join();
                }, 2000)
            } else if (option.state == "Receiver") {
                this.isMain = false;
            }
        },

        watch: {
@@ -241,12 +191,8 @@
                }, (ret) => {});
            },


            //加入频道 跳转到视频
            async join(val) {
                var that = this;
                // if (val == "Mains") { //视频发起人进入
                console.log('视频发起人进入');
            async join() {
                uni.showLoading({
                    title: '加载中',
                    mask: true
@@ -257,37 +203,8 @@
                    "channelId": this.channel,
                    "uid": this.uid
                }, (res) => {
                    console.log(res, 'join break');
                    console.log('成功进入房间：' + that.channel);
                    console.log(res,'join break')
                })
                // } else if (val == 'Receiver') { //视频接收人进入
                //     console.log('视频接收人进入');
                //     uni.showLoading({
                //         title: '加载中',
                //         mask: true
                //     });
                //     //加入房间
                //     await RtcModule.joinChannel({
                //         "token": "",
                //         "channelId": this.channel,
                //         "uid": this.uid
                //     }, (res) => {
                //         console.log(res, 'join break');
                //         console.log('成功进入房间：' + that.channel);
                //     })
                // }

            },
            // 等待时候挂断
            phoneFnMain() {
                // RtcModule.leaveChannel((res) => {});
                console.log("等待时候挂断");
                uni.navigateBack();
            },
            //拒绝进入视频
            comeBack() {
                console.log("拒绝进入视频");
                uni.navigateBack();
            },

            // 挂断 离开
@@ -378,8 +295,7 @@
                                }, (res) => {})
                                setTimeout(() => {
                                    // 启用视频模块。
                                    this.role == 1 ? this.setupLocalVideoFn() : RtcModule
                                        .enableVideo((res) => {});
                                    this.role == 1 ? this.setupLocalVideoFn() : RtcModule.enableVideo((res) => {});
                                }, 200)
                            }, 2000)
                            break;
@@ -458,7 +374,7 @@
                this.vedioSwitch = "open"; //视频开关
                // 重新创建实例
                await this.init();
                // 如果需要跳转其它页面请按下边步骤
              // 如果需要跳转其它页面请按下边步骤
                // await uni.redirectTo({
                //     url: '..',
                //     success: () => {
@@ -473,9 +389,8 @@
            async requestAndroidPermission(permisionID, type) {
                let result = 0;
                let strStatus = "";
                type == 'ios' ? result = await permision.judgeIosPermission(permisionID) : result = await permision
                    .requestAndroidPermission(
                        permisionID);
                type == 'ios' ? result = await permision.judgeIosPermission(permisionID) : result = await permision.requestAndroidPermission(
                    permisionID);
                if (result == 1) {
                    strStatus = "已获得授权"
                } else if (result == 0) {
@@ -489,7 +404,7 @@
    }
</script>

<style lang="scss" scoped>
<style>
    .content {
        flex: 1;
    }
@@ -498,99 +413,6 @@
    .index {
        flex: 1;
        background-color: #0A1621;
        height: 100vh;
    }

    /* 等待时候样式   Main */
    .ccbut {
        position: relative;
        top: 45vh;
    }

    .Mains {
        // position: absolute;
        // width: 100%;
        // height: 5rem;
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        // border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        // bottom: 0;
        .title {
            color: #fff;
        }

        .open {
            // border: 1px solid #fff;
            position: fixed;
            bottom: 3rem;
            width: 100%;
            height: 4.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .video_bg_img {
                width: 3rem;
                height: 2rem;
            }

            .open_text {
                padding: 5px 0 0;
                text-align: center;
                display: block;
                // border: 1px solid #fff;
                color: #fff;
            }
        }
    }

    .Receiver {
        // position: absolute;
        // width: 100%;
        // height: 5rem;
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        // border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        // bottom: 0;
        .title {
            color: #fff;
        }

        .open {
            // border: 1px solid #fff;
            position: relative;
            top: 12rem;
            width: 100%;
            height: 4.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .video_bg_img {
                width: 3rem;
                height: 2rem;
            }

            .open_text {
                padding: 5px 0 0;
                text-align: center;
                display: block;
                // border: 1px solid #fff;
                color: #fff;
            }
        }
    }

    .chanel {
@@ -650,11 +472,6 @@
    .vedioWatch {
        flex: 1;
        position: relative;
        width: 100%;
        height: 100vh;
        background-color: #0A1621;


    }

    /* 初始背景 */
@@ -670,7 +487,6 @@

    .video_bg_img {
        flex: 1;
        width: 100%;
    }

    .video_bg_text {
@@ -695,21 +511,21 @@
        flex-direction: row;
        background-color: transparent;
    }
	

    /* 1个视频 */
    .video_local {
        width: 750rpx;
        height: 1334rpx;
        background-color: transparent;
    }
	

    .video_region_padding {
        margin-top: 20px;
        padding: 200rpx 0 260rpx;
        width: 750rpx;
        height: 840rpx;
    }
	

    /* 4个视频 */
    .video_local_1 {
        width: 375rpx;
@@ -730,8 +546,8 @@

    /* 音视频基本开关 */
    .videoshow_control {
        position: absolute;
        bottom: 3rem;
        /* position: absolute; */
        bottom: 20rpx;
        left: 0;
        width: 750rpx;
        /* background-color: #007AFF; */
@@ -739,28 +555,8 @@
        padding: 20px;
        background-color: transparent;
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        image {
            width: 3rem;
        }

        .open {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 4.3rem;
        }
    }

    .camera {
        image {
            width: 2rem;
            height: 2rem;
        }
    }

    .open {
@@ -770,7 +566,7 @@
    }

    .open_text {
        padding: 5px 0 0;
        padding: 15px 0 0;
        text-align: center;
        color: #fff;
    }

 pages/videoCall/videoCall - 副本.vue

File was renamed from pages/videoCall/videoCall.vue
@@ -283,17 +283,20 @@
                // RtcModule.leaveChannel((res) => {});
                console.log("等待时候挂断");
                uni.navigateBack();
                this.closeAll();
            },
            //拒绝进入视频
            comeBack() {
                console.log("拒绝进入视频");
                uni.navigateBack();
                this.closeAll();
            },

            // 挂断 离开
            phoneFn() {
                //离开频道
                RtcModule.leaveChannel((res) => {})
                RtcModule.leaveChannel((res) => {});
                this.closeAll();
            },

            //添加本地视频到页面
@@ -492,27 +495,25 @@
<style lang="scss" scoped>
    .content {
        flex: 1;
        height: 100%;
        overflow: hidden;
    }

    /* 加入频道 */
    .index {
        flex: 1;
        background-color: #0A1621;
        height: 100vh;
        height: 100%;
    }

    /* 等待时候样式   Main */
    .ccbut {
        position: relative;
        top: 45vh;
    }

    .Mains {
        // position: absolute;
        // width: 100%;
        // height: 5rem;
        width: 100%;
        height: 100vh;
        height: 100%;
        box-sizing: border-box;
        // border: 1px solid #fff;
        display: flex;
@@ -555,7 +556,7 @@
        // width: 100%;
        // height: 5rem;
        width: 100%;
        height: 100vh;
        height: 100%;
        box-sizing: border-box;
        // border: 1px solid #fff;
        display: flex;
@@ -593,30 +594,6 @@
        }
    }

    .chanel {
        padding: 120px 20px 20px;
    }

    .uni-input {
        height: 120rpx;
        padding: 0 20px;
        background-color: #2F3041;
        border-radius: 6px;
    }

    .setrole {
        padding: 60px 20px;
        flex-direction: row;
        justify-content: space-between;
    }

    .button {
        padding: 10px 70rpx;
        background-color: #2F3041;
        border-radius: 6px;
        border-width: 2px;
        border-color: #2f3041;
    }

    .text {
        color: #B4B5BE;
@@ -634,15 +611,6 @@
        border-width: 2px;
        border-color: #40a3fb;
        background-color: #0A1621;
    }

    .join {
        padding: 20px;
    }

    .jion_bg {
        background-color: #40A3FB;
        border-width: 0;
    }


@@ -675,7 +643,7 @@

    .video_bg_text {
        justify-content: center;
        align-items: center;
        align-items: center;	
    }

    /* 转换摄像头 */

 pages/videoCall/videoCall.nvue

copy from pages/videoCall/videoCall.vue
copy to pages/videoCall/videoCall.nvue
File was copied from pages/videoCall/videoCall.vue
@@ -2,53 +2,39 @@
    <view class="content">
        <!-- 加入频道 -->
        <view class="index" v-if="!videoShow">
            <!-- 输入频道 -->
            <!-- <view class="chanel">
                <input class="uni-input activetext" v-model="channel" focus placeholder="请输入频道号" />
            </view>

            <view class="setrole">

                <button type="default" :class="role == 1? 'active': 'button'" @click="setClientRole(1)"><text class="text button_text"
                     :class="role == 1? 'activetext': ''">我是主播</text></button>

                <button type="default" :class="role == 2? 'active': 'button'" @click="setClientRole(2)"><text class="text" :class="role == 2? 'activetext': ''">我是游客</text></button>
            </view>

            <view class="join">
                <button type="primary" class="button jion_bg" @click="join"><text class="activetext">加入频道</text></button>
            </view> -->
            <view class="Mains" v-if="isMain">
                <view class="title">
                    正在呼叫{{MainName}}
                <view class="Mains-t">
                    <text class="activetext">正在呼叫{{MainName}}</text>
                    <u-loading size="36" mode="flower"></u-loading>
                </view>

                <!-- 挂断 -->
                <view class="open" @click="phoneFnMain">
                    <image class="video_bg_img" src="../../static/over.png" mode=""></image>
                <view class="i-open" @click="phoneFnMain">
                    <image class="i-video_bg_img" src="../../static/over.png" mode=""></image>
                    <text class="open_text">取消呼叫</text>

                </view>
            </view>
            <view class="Receiver" v-if="!isMain">
                <!-- <u-button class="ccbut" type="primary" @click="join('Receiver')">确认进入{{channel}}号房间</u-button> -->
                <!-- <u-button class="ccbut" type="primary" @click="comeBack">拒绝进入</u-button> -->
                <view class="open" @click="join('Receiver')">
                    <image class="video_bg_img" src="../../static/phone.png" mode=""></image>
                    <text class="open_text">接受</text>

                <view class="Mains-t">
                    <text class="activetext">是否接收来自{{userName}}的视频请求</text>
                    <u-loading size="36" mode="flower"></u-loading>
                </view>
                <view class="open" @click="comeBack">
                    <image class="video_bg_img" src="../../static/over.png" mode=""></image>
                    <text class="open_text">挂断</text>
                <view class="i-control">
                    <view class="i-c-open" @click="joinit">
                        <image class="i-video_bg_img" src="../../static/phone.png" mode=""></image>
                        <text class="open_text">接受</text>

                    </view>
                    <view class="i-c-open" @click="comeBack">
                        <image class="i-video_bg_img" src="../../static/over.png" mode=""></image>
                        <text class="open_text">挂断</text>

                    </view>
                </view>
            </view>
        </view>

        <!-- 视频 -->
        <view class="vedio vedioWatch" v-else>
        <view class="vedioWatch" v-else>

            <view class="video_bg">
                <image class="video_bg_img" src="../../static/BG.png" mode=""></image>
@@ -59,14 +45,16 @@
                </view> -->
            </view>

            <view class="video_region" :class="PeerVideoUser.length > 1 ? 'video_region_padding' : ''">
            <view class="video_region">
                <!-- 渲染视频 -->
                <view v-for="peervideo in PeerVideoUser" :key="peervideo">
                    <view :class="PeerVideoUserStyle" v-if="peervideo == uid && role == 2 ? false : true">
                <view v-for="(peervideo,index) in PeerVideoUser" :key="peervideo">
                    <view :class="PeerVideoUserStyle[index]" v-if="peervideo == uid && role == 2 ? false : true">
                        <AR-CanvasView :ref="`popup${peervideo}`" style="flex: 1;"></AR-CanvasView>
                    </view>

                </view>

                <!-- {{PeerVideoUser}} -->
            </view>

            <!-- 转换摄像头 -->
@@ -132,24 +120,20 @@
        },
        data() {
            return {
                //anyRTC 为 App 开发者签发的 App ID。每个项目都应该有一个独一无二的 App ID。如果你的开发包里没有 App ID，请从anyRTC官网(https://www.anyrtc.io)申请一个新的 App ID
                appid: "d5a164cd8e0a8352ee108c561ba2e44e",
                channel: "",
                uid: "",
                role: 1, //角色 主播-游客


                videoShow: false, //视频展示
                // videoShowBg: true, //背景展示
                promptText: "loading...",

                PeerVideoUser: [{
                    a: 1
                }, {
                    a: 2
                }, {
                    a: 3
                }], //用户视频加入存储
                PeerVideoUserStyle: "video_local", //用户视频加入样式
                PeerVideoUser: [], //用户视频加入存储
                PeerVideoUserStyle: [
                    'video_local_call', "video_local"
                ], //用户视频加入样式

                // 本地
                audioSwitch: "open", //音频开关 
@@ -161,11 +145,9 @@
                popupType: "",
                popupMessage: "",

                isMain: false,
                MainName: '222',
                userName: '111'

                // closeArray: []
                isMain: true,
                userName: '111'
            }
        },
        // 页面初始加载（仅执行一次）
@@ -178,10 +160,17 @@
            console.log(option.state);
            if (option.state == "Mains") {
                this.isMain = true;
                this.userName = 'faqiren';
                setTimeout(res => {
                    this.join();
                    // this.join();
                    //发起请求  给后端双方姓名
					
                    //得到返回值   开始视频  或者拒绝视频
					
					
                }, 2000)
            } else if (option.state == "Receiver") {
                this.userName = 'jieshouren';
                this.isMain = false;
            }
        },
@@ -191,18 +180,32 @@
                if (this.role == 2) {
                    newName = newName.filter((x) => x !== this.uid);
                }
                // video_local

                if (newName.length == 1) {
                    this.PeerVideoUserStyle = "video_local"
                } else if (newName.length > 1 && newName.length < 5) {
                    this.PeerVideoUserStyle = "video_local_1"
                } else if (newName.length > 4 && newName.length < 10) {
                    this.PeerVideoUserStyle = "video_local_2"
                } else if (newName.length > 9 && newName.length < 17) {
                    this.PeerVideoUserStyle = "video_local_3"
                } else if (newName.length == 0) {
                    this.role == 2 ? this.promptText = "暂无主播播放视频" : this.promptText = "loading..."
                    // this.PeerVideoUserStyle = [
                    //     'video_local', "video_local_call"
                    // ]
                    this.PeerVideoUserStyle = [
                        'video_local_call', "video_local"
                    ]
                } else if (newName.length == 2) {
                    this.PeerVideoUserStyle = [
                        'video_local_call', "video_local"
                    ]
                }

                //     // video_local
                //     if (newName.length == 1) {
                //         this.PeerVideoUserStyle = "video_local"
                //     } else if (newName.length > 1 && newName.length < 5) {
                //         this.PeerVideoUserStyle = "video_local_1"
                //     } else if (newName.length > 4 && newName.length < 10) {
                //         this.PeerVideoUserStyle = "video_local_2"
                //     } else if (newName.length > 9 && newName.length < 17) {
                //         this.PeerVideoUserStyle = "video_local_3"
                //     } else if (newName.length == 0) {
                //         this.role == 2 ? this.promptText = "暂无主播播放视频" : this.promptText = "loading..."
                //     }
            }
        },
        methods: {
@@ -228,9 +231,10 @@
                await RtcModule.create({
                    "appId": this.appid
                }, (res) => {

                    console.log(res);
                });
                this.uid = this.randomFn(6);
                console.log(this.uid, '当前id码')
            },
            //设置角色
            setClientRole(num) {
@@ -247,6 +251,7 @@
                var that = this;
                // if (val == "Mains") { //视频发起人进入
                console.log('视频发起人进入');
                console.log(this.uid, '进入检测uid')
                uni.showLoading({
                    title: '加载中',
                    mask: true
@@ -259,6 +264,7 @@
                }, (res) => {
                    console.log(res, 'join break');
                    console.log('成功进入房间：' + that.channel);
                    that.videoShow = true;
                })
                // } else if (val == 'Receiver') { //视频接收人进入
                //     console.log('视频接收人进入');
@@ -283,25 +289,42 @@
                // RtcModule.leaveChannel((res) => {});
                console.log("等待时候挂断");
                uni.navigateBack();
                this.closeAll();
            },
            joinit(){//接受进入视频
                // 传输接受的值
				
                // 开始进入视频通话
                },
            //拒绝进入视频
            comeBack() {
				
				
                // 传输拒绝的值
				
				
                console.log("拒绝进入视频");
                uni.navigateBack();
				
                // RtcModule.leaveChannel((res) => {});
                // this.closeAll();
            },

            // 挂断 离开
            phoneFn() {
                //离开频道
                RtcModule.leaveChannel((res) => {})
                RtcModule.leaveChannel((res) => {});
                this.closeAll();
                // uni.navigateBack();
            },

            //添加本地视频到页面
            setupLocalVideoFn() {
                //视频 
                var that = this;
                RtcModule.enableVideo((res) => {});
                this.$refs[`popup${this.uid}`][0].setupLocalVideo({
                    "renderMode": 1,
                    "renderMode": 4,
                    "channelId": this.channel,
                    "uid": this.uid,
                    "mirrorMode": 0
@@ -368,6 +391,7 @@
                        case "onJoinChannelSuccess": //用户加入成功
                            uni.hideLoading();
                            this.role == 1 ? this.PeerVideoUser.push(res.uid) : "";
                            console.log(res.uid, 'uidsssss')
                            this.videoShow = true;
                            setTimeout(() => {
                                // this.videoShowBg = false;
@@ -377,6 +401,7 @@
                                    "enabled": true
                                }, (res) => {})
                                setTimeout(() => {
                                    console.log(this.PeerVideoUser, 'this.PeerVideoUser')
                                    // 启用视频模块。
                                    this.role == 1 ? this.setupLocalVideoFn() : RtcModule
                                        .enableVideo((res) => {});
@@ -442,12 +467,14 @@
                    let randomPoz = Math.floor(Math.random() * charSet.length);
                    randomString += charSet.substring(randomPoz, randomPoz + 1);
                }
                return randomString;
                // return randomString;
                return this.userName;
            },
            // 离开清空
            async closeAll() {
                // 销毁实例
                await RtcModule.destroyRtc((res) => {});
                await RtcModule.leaveChannel((res) => {})
                // await RtcModule.destroyRtc((res) => {});
                this.videoShow = false; //视频展示
                // this.videoShowBg = true; //背景展示
                this.promptText = "loading...";
@@ -460,12 +487,16 @@
                await this.init();
                // 如果需要跳转其它页面请按下边步骤
                // await uni.redirectTo({
                //     url: '..',
                //     success: () => {
                //         RtcModule.destroyRtc((res) => {
                //             console.log("页面销毁", res.code);
                //         });
                //     }
                // url: '..',
                // success: () => {
                // console.log('成功关闭')
                // uni.navigateBack();
                RtcModule.destroyRtc((res) => {
                                console.log("页面销毁", res.code);
                    console.log('成功关闭')
                    uni.navigateBack();
                });
                // }
                // });

            },
@@ -485,116 +516,85 @@
                }
            },

        },
        destroyed() {
            console.log('this.closeAll();');
            this.closeAll();
            uni.hideLoading();
        }

    }
</script>

<style lang="scss" scoped>
<style>
    .content {
        flex: 1;
        width: 750rpx;

    }

    /* 加入频道 */
    .index {
        flex: 1;
        background-color: #0A1621;
        height: 100vh;
    }
        width: 750rpx;
        height: 1080rpx;

    /* 等待时候样式   Main */
    .ccbut {
        position: relative;
        top: 45vh;
    }

    .Mains {
        // position: absolute;
        // width: 100%;
        // height: 5rem;
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        // border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        // bottom: 0;
        .title {
            color: #fff;
        }

        .open {
            // border: 1px solid #fff;
            position: fixed;
            bottom: 3rem;
            width: 100%;
            height: 4.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .video_bg_img {
                width: 3rem;
                height: 2rem;
            }

            .open_text {
                padding: 5px 0 0;
                text-align: center;
                display: block;
                // border: 1px solid #fff;
                color: #fff;
            }
        }
        flex: 1;
        width: 750rpx;
    }

    .Mains-t {
        padding-top: 500rpx;
        flex-direction: row;
        justify-content: center;
    }

    .i-open {
        width: 750rpx;
        position: fixed;
        bottom: 20rpx;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: transparent;
    }

    .i-video_bg_img {
        width: 50rpx;
        height: 50rpx;
    }

    /* 是否接受 */
    .Receiver {
        // position: absolute;
        // width: 100%;
        // height: 5rem;
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        // border: 1px solid #fff;
        display: flex;
        flex: 1;
        width: 750rpx;
    }

    .i-control {
        width: 750rpx;
        bottom: 20rpx;
        position: fixed;
        /* bottom: 20px; */
        /* width: 600px; */
        flex-direction: row;
        justify-content: center;
    }

    .i-c-open {
        width: 325rpx;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        // bottom: 0;
        .title {
            color: #fff;
        }

        .open {
            // border: 1px solid #fff;
            position: relative;
            top: 12rem;
            width: 100%;
            height: 4.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .video_bg_img {
                width: 3rem;
                height: 2rem;
            }

            .open_text {
                padding: 5px 0 0;
                text-align: center;
                display: block;
                // border: 1px solid #fff;
                color: #fff;
            }
        }
        /* padding: 350px 150px 0 0; */
    }


    .chanel {
        padding: 120px 20px 20px;
        padding: 120px 70px 40px;
    }

    .uni-input {
@@ -650,11 +650,8 @@
    .vedioWatch {
        flex: 1;
        position: relative;
        width: 100%;
        height: 100vh;
        background-color: #0A1621;


        width: 750rpx;
        height: 1080rpx;
    }

    /* 初始背景 */
@@ -670,7 +667,6 @@

    .video_bg_img {
        flex: 1;
        width: 100%;
    }

    .video_bg_text {
@@ -685,53 +681,80 @@
        /* position: absolute; */
        left: 20px;
        top: 40px;
        z-index: 10;
    }

    /* 视频区域 */

    .video_region {
        /* position: fixed;
        top: 0;
        left: 0; */
        flex: 1;
        /* position: absolute; */
        /* width: 750rpx;
        height: 1334rpx; */
        border: 1px solid red;
        flex-wrap: wrap;
        flex-direction: row;
        background-color: transparent;
    }
	

    /* 1个视频 */
    .video_local {
        flex: 1;
        width: 750rpx;
        height: 1334rpx;
        height: 1344rpx;
        border: 2px solid green;
        background-color: transparent;
        z-index: 5;
    }
	

    .video_local_call {
        position: fixed;
        top: 60rpx;
        right: 30rpx;
        width: 300rpx;
        border: 2px solid yellow;
        height: 400rpx;
        background-color: transparent;
        z-index: 6;
    }

    .video_none {
        width: 0;
        height: 0;
    }

    .video_region_padding {
        margin-top: 20px;
        padding: 200rpx 0 260rpx;
        width: 750rpx;
        height: 840rpx;
        height: 1080rpx;
    }
	

    /* 4个视频 */
    .video_local_1 {
    /* .video_local_1 {
        width: 375rpx;
        height: 420rpx;
    }
    } */

    /* 9个视频 */
    .video_local_2 {
    /* .video_local_2 {
        width: 250rpx;
        height: 280rpx;
    }
    } */

    /* 16个视频 */
    .video_local_3 {
    /* .video_local_3 {
        width: 187.5rpx;
        height: 210rpx;
    }
    } */

    /* 音视频基本开关 */
    .videoshow_control {
        position: absolute;
        bottom: 3rem;
        /* position: absolute; */
        bottom: 20rpx;
        left: 0;
        width: 750rpx;
        /* background-color: #007AFF; */
@@ -739,28 +762,9 @@
        padding: 20px;
        background-color: transparent;
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        image {
            width: 3rem;
        }

        .open {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 4.3rem;
        }
    }

    .camera {
        image {
            width: 2rem;
            height: 2rem;
        }
        z-index: 10;
    }

    .open {
@@ -770,7 +774,7 @@
    }

    .open_text {
        padding: 5px 0 0;
        padding: 15px 0 0;
        text-align: center;
        color: #fff;
    }

 pages/videoCall/自己写全.vue

copy from pages/videoCall/videoCall.vue
copy to "pages/videoCall/\350\207\252\345\267\261\345\206\231\345\205\250.vue"
File was copied from pages/videoCall/videoCall.vue
@@ -2,64 +2,41 @@
    <view class="content">
        <!-- 加入频道 -->
        <view class="index" v-if="!videoShow">
            <!-- 输入频道 -->
            <!-- <view class="chanel">
                <input class="uni-input activetext" v-model="channel" focus placeholder="请输入频道号" />
            </view>

            <view class="setrole">

                <button type="default" :class="role == 1? 'active': 'button'" @click="setClientRole(1)"><text class="text button_text"
                     :class="role == 1? 'activetext': ''">我是主播</text></button>

                <button type="default" :class="role == 2? 'active': 'button'" @click="setClientRole(2)"><text class="text" :class="role == 2? 'activetext': ''">我是游客</text></button>
            </view>

            <view class="join">
                <button type="primary" class="button jion_bg" @click="join"><text class="activetext">加入频道</text></button>
            </view> -->
            <view class="Mains" v-if="isMain">
                <view class="title">
                    正在呼叫{{MainName}}
                    <u-loading size="36" mode="flower"></u-loading>
                </view>

                <!-- 挂断 -->
                <view class="open" @click="phoneFnMain">
                    <image class="video_bg_img" src="../../static/over.png" mode=""></image>
                    <text class="open_text">取消呼叫</text>

                </view>
            </view>
            <view class="Receiver" v-if="!isMain">
                <!-- <u-button class="ccbut" type="primary" @click="join('Receiver')">确认进入{{channel}}号房间</u-button> -->
                <!-- <u-button class="ccbut" type="primary" @click="comeBack">拒绝进入</u-button> -->
                <view class="open" @click="join('Receiver')">
                    <image class="video_bg_img" src="../../static/phone.png" mode=""></image>
                    <text class="open_text">接受</text>

                <view class="title">
                    是否接收来自{{userName}}的视频请求
                    <u-loading size="36" mode="flower"></u-loading>
                </view>
                <view class="open" @click="comeBack">
                    <image class="video_bg_img" src="../../static/over.png" mode=""></image>
                    <text class="open_text">挂断</text>
                <view class="Receiver-but">
                    <view class="open" @click="join('Receiver')">
                        <image class="video_bg_img" src="../../static/phone.png" mode=""></image>
                        <text class="open_text">接受</text>

                    </view>
                    <view class="open" @click="comeBack">
                        <image class="video_bg_img" src="../../static/over.png" mode=""></image>
                        <text class="open_text">挂断</text>

                    </view>
                </view>
            </view>
        </view>

        <!-- 视频 -->
        <view class="vedio vedioWatch" v-else>
        <view class="vedio-vedioWatch" v-else>

            <view class="video_bg">
                <image class="video_bg_img" src="../../static/BG.png" mode=""></image>
                <!-- <text class="activetext" v-if="videoShowBg"></text> -->
                <!--     <view class="video_bg video_bg_text">
			
                    <text class="activetext">{{promptText}}</text>
                </view> -->
            </view>

            <view class="video_region" :class="PeerVideoUser.length > 1 ? 'video_region_padding' : ''">
            <view class="video_region" :class="PeerVideoUser.length > 0 ? 'video_region_padding' : ''">
                <!-- 渲染视频 -->
                <view v-for="peervideo in PeerVideoUser" :key="peervideo">
                    <view :class="PeerVideoUserStyle" v-if="peervideo == uid && role == 2 ? false : true">
@@ -68,14 +45,13 @@

                </view>
            </view>

            <!-- 转换摄像头 -->
            <view class="camera position" @click="cameraSwitchFn" v-if="role == 1">
                <image class="video_bg_img" src="../../static/camera.png" mode=""></image>

            </view>
            <!-- 音视频基本开关 -->
            <view class="videoshow_control position">
            <!-- 控制开关 -->
            <view class="vider-but">
                <!-- 音频开关 -->
                <view class="open" @click="audioSwitchFn" v-if="role == 1">
                    <image class="video_bg_img" src="../../static/au_in.png" mode="" v-if="audioSwitch == 'open'">
@@ -98,24 +74,13 @@
                    <image class="video_bg_img" src="../../static/vi_in.png" mode="" v-else></image>
                    <text class="open_text">视频</text>
                </view>
            </view>

                <!--     <scroll-view scroll-y="true" style="height: 500px;padding: 20px;">
                    <view v-for="(item,value) in closeArray" :key='item+value'>{{item}}</view>
                </scroll-view> -->
            </view>
            <!-- 提示文字 -->
            <view class="video_bg video_bg_text" v-if="promptText">
                <!-- <view class="video_bg video_bg_text"> -->
                <text class="activetext">{{promptText}}</text>
                <!-- </view> -->
            </view>
            <uni-popup ref="popup" type="center">
                <uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
            </uni-popup>
        </view>
        <uni-popup ref="popup" type="center">
            <uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
        </uni-popup>
    </view>


</template>

<script>
@@ -132,27 +97,21 @@
        },
        data() {
            return {
                //anyRTC 为 App 开发者签发的 App ID。每个项目都应该有一个独一无二的 App ID。如果你的开发包里没有 App ID，请从anyRTC官网(https://www.anyrtc.io)申请一个新的 App ID
                appid: "d5a164cd8e0a8352ee108c561ba2e44e",
                channel: "",
                uid: "",
                role: 1, //角色 主播-游客


                videoShow: false, //视频展示
                // videoShowBg: true, //背景展示
                promptText: "loading...",

                PeerVideoUser: [{
                    a: 1
                }, {
                    a: 2
                }, {
                    a: 3
                }], //用户视频加入存储
                PeerVideoUser: ['aaaaaaa'], //用户视频加入存储
                PeerVideoUserStyle: "video_local", //用户视频加入样式

                // 本地
                audioSwitch: "open", //音频开关 
                audioSwitch: "colse", //音频开关 
                vedioSwitch: "open", //视频开关

                videoWidth: 0,
@@ -161,11 +120,10 @@
                popupType: "",
                popupMessage: "",


                isMain: false,
                MainName: '222',
                userName: '111'

                // closeArray: []
            }
        },
        // 页面初始加载（仅执行一次）
@@ -228,9 +186,10 @@
                await RtcModule.create({
                    "appId": this.appid
                }, (res) => {

                    console.log(res);
                });
                this.uid = this.randomFn(6);
                console.log(this.uid, '当前id码')
            },
            //设置角色
            setClientRole(num) {
@@ -247,6 +206,7 @@
                var that = this;
                // if (val == "Mains") { //视频发起人进入
                console.log('视频发起人进入');
                console.log(this.uid, '进入检测uid')
                uni.showLoading({
                    title: '加载中',
                    mask: true
@@ -259,6 +219,7 @@
                }, (res) => {
                    console.log(res, 'join break');
                    console.log('成功进入房间：' + that.channel);
                    that.videoShow = true;
                })
                // } else if (val == 'Receiver') { //视频接收人进入
                //     console.log('视频接收人进入');
@@ -283,25 +244,33 @@
                // RtcModule.leaveChannel((res) => {});
                console.log("等待时候挂断");
                uni.navigateBack();
                this.closeAll();
            },
            //拒绝进入视频
            comeBack() {
                console.log("拒绝进入视频");
                uni.navigateBack();
                RtcModule.leaveChannel((res) => {});
                this.closeAll();
            },

            // 挂断 离开
            phoneFn() {
                //离开频道
                RtcModule.leaveChannel((res) => {})
                RtcModule.leaveChannel((res) => {});
                this.closeAll();
                uni.navigateBack();
            },

            //添加本地视频到页面
            setupLocalVideoFn() {
                //视频 
                var that = this;
                RtcModule.enableVideo((res) => {});
                console.log(that,'thatsss')
                console.log(that.$refs,'refsssss')
                this.$refs[`popup${this.uid}`][0].setupLocalVideo({
                    "renderMode": 1,
                    "renderMode": 4,
                    "channelId": this.channel,
                    "uid": this.uid,
                    "mirrorMode": 0
@@ -368,6 +337,7 @@
                        case "onJoinChannelSuccess": //用户加入成功
                            uni.hideLoading();
                            this.role == 1 ? this.PeerVideoUser.push(res.uid) : "";
                            console.log(res.uid, 'uidsssss')
                            this.videoShow = true;
                            setTimeout(() => {
                                // this.videoShowBg = false;
@@ -377,6 +347,7 @@
                                    "enabled": true
                                }, (res) => {})
                                setTimeout(() => {
                                    console.log(this.PeerVideoUser,'this.PeerVideoUser')
                                    // 启用视频模块。
                                    this.role == 1 ? this.setupLocalVideoFn() : RtcModule
                                        .enableVideo((res) => {});
@@ -485,297 +456,250 @@
                }
            },

        },
        destroyed() {
            console.log('this.closeAll();');
            this.closeAll();
            uni.hideLoading();
        }

    }
</script>

<style lang="scss" scoped>
    $butFixedButtom: 2rem;

    .content {
        flex: 1;
    }

    /* 加入频道 */
    .index {
        flex: 1;
        background-color: #0A1621;
        height: 100vh;
    }

    /* 等待时候样式   Main */
    .ccbut {
        position: relative;
        top: 45vh;
    }

    .Mains {
        // position: absolute;
        // width: 100%;
        // height: 5rem;
        width: 100%;
        // height: 100%;
        height: 100vh;
        box-sizing: border-box;
        // border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
		

        // bottom: 0;
        .title {
            color: #fff;
        }

        .open {
            // border: 1px solid #fff;
            position: fixed;
            bottom: 3rem;
        /* 等待时候样式   Main */
        .index {
            width: 100%;
            height: 4.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100%;
            background-color: #0A1621;

            .video_bg_img {
                width: 3rem;
                height: 2rem;
            }

            .open_text {
                padding: 5px 0 0;
                text-align: center;
                display: block;
            .Mains {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                // border: 1px solid #fff;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;

                // bottom: 0;
                .title {
                    color: #fff;
                }

                .open {
                    // border: 1px solid #fff;
                    position: fixed;
                    bottom: $butFixedButtom;
                    width: 100%;
                    left: 0;
                    height: 4.3rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    z-index: 10;

                    .video_bg_img {
                        width: 2.1rem;
                        height: 2rem;
                    }

                    .open_text {
                        padding: 5px 0 0;
                        text-align: center;
                        display: block;
                        // border: 1px solid #fff;
                        color: #fff;
                    }
                }
            }

            .Receiver {
                // position: absolute;
                width: 100%;
                height: 100vh;
                // position: fixed;
                // bottom: 2rem;
                box-sizing: border-box;
                // border: 1px solid #fff;
                display: flex;
                align-items: center;
                justify-content: center;

                // bottom: 0;
                .title {
                    color: #fff;
                }

                .Receiver-but {
                    width: 100%;
                    position: fixed;
                    bottom: $butFixedButtom;
                    left: 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    .open {
                        // border: 1px solid #fff;
                        // position: fixed;
                        // bottom: 3rem;
                        // width: 100%;
                        height: 4.3rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        z-index: 10;

                        .video_bg_img {
                            width: 2.1rem;
                            height: 2rem;
                        }

                        .open_text {
                            padding: 5px 0 0;
                            text-align: center;
                            display: block;
                            // border: 1px solid #fff;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    .Receiver {
        // position: absolute;
        // width: 100%;
        // height: 5rem;
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        // border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        // bottom: 0;
        .title {
            color: #fff;
        }

        .open {
            // border: 1px solid #fff;
            position: relative;
            top: 12rem;
        /*视频样式*/
        .vedio-vedioWatch {
            width: 100%;
            height: 4.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;

            .video_bg_img {
                width: 3rem;
            /*视频主体样式*/
            .video_region {
                z-index: 8;
                width: 100%;
                height: 100vh;
                border: 1px solid red;
            }

            // 一个视频  自己的
            .video_region_padding {
                z-index: 8;
                width: 100%;
                height: 30vh;
                border: 3px solid green;
            }

            //接通视频  2人
            .video_local {
                z-index: 8;
                width: 100%;
                height: 30vh;
                position: relative;
                top: 30vh;
                background-color: transparent;
                border: 3px solid yellow;
            }
			
            /* 视频区域 */
            // .video_region {
            //     flex: 1;
            //     /* position: absolute; */
            //     flex-wrap: wrap;
            //     flex-direction: row;
            //     background-color: transparent;
            // }
			
            // /* 1个视频 */
            // .video_local {
            //     width: 750rpx;
            //     height: 1334rpx;
            //     background-color: transparent;
            // }
			
            // .video_region_padding {
            //     margin-top: 20px;
            //     padding: 200rpx 0 260rpx;
            //     width: 750rpx;
            //     height: 840rpx;
            // }
			
            // /* 4个视频 */
            // .video_local_1 {
            //     width: 375rpx;
            //     height: 420rpx;
            // }
			
            // /* 9个视频 */
            // .video_local_2 {
            //     width: 250rpx;
            //     height: 280rpx;
            // }
			
            // /* 16个视频 */
            // .video_local_3 {
            //     width: 187.5rpx;
            //     height: 210rpx;
            // }

            /* 转换摄像头 */
            .camera {
                width: 2.1rem;
                height: 2rem;
                position: fixed;
                left: 20px;
                top: 60px;

                .video_bg_img {
                    width: 2.1rem;
                    height: 2rem;
                }

                z-index: 10;
            }

            .open_text {
                padding: 5px 0 0;
                text-align: center;
                display: block;
                // border: 1px solid #fff;
                color: #fff;

            /*视频按钮样式*/
            .vider-but {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                position: fixed;
                bottom: $butFixedButtom;

                .open {
                    height: 4.3rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    z-index: 10;

                    .video_bg_img {
                        width: 2.1rem;
                        height: 2rem;
                    }

                    .open_text {
                        padding: 5px 0 0;
                        text-align: center;
                        display: block;
                        // border: 1px solid #fff;
                        color: #fff;
                    }
                }
            }
        }
    }

    .chanel {
        padding: 120px 20px 20px;
    }

    .uni-input {
        height: 120rpx;
        padding: 0 20px;
        background-color: #2F3041;
        border-radius: 6px;
    }

    .setrole {
        padding: 60px 20px;
        flex-direction: row;
        justify-content: space-between;
    }

    .button {
        padding: 10px 70rpx;
        background-color: #2F3041;
        border-radius: 6px;
        border-width: 2px;
        border-color: #2f3041;
    }

    .text {
        color: #B4B5BE;
    }



    .activetext {
        color: #fff;
    }

    .active {
        padding: 10px 70rpx;
        border-radius: 6px;
        border-width: 2px;
        border-color: #40a3fb;
        background-color: #0A1621;
    }

    .join {
        padding: 20px;
    }

    .jion_bg {
        background-color: #40A3FB;
        border-width: 0;
    }


    /* 视频 */
    .vedioWatch {
        flex: 1;
        position: relative;
        width: 100%;
        height: 100vh;
        background-color: #0A1621;


    }

    /* 初始背景 */
    .video_bg {
        flex: 1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: transparent;
    }

    .video_bg_img {
        flex: 1;
        width: 100%;
    }

    .video_bg_text {
        justify-content: center;
        align-items: center;
    }

    /* 转换摄像头 */
    .camera {
        width: 44px;
        height: 37px;
        /* position: absolute; */
        left: 20px;
        top: 40px;
    }

    /* 视频区域 */
    .video_region {
        flex: 1;
        /* position: absolute; */
        flex-wrap: wrap;
        flex-direction: row;
        background-color: transparent;
    }
	
    /* 1个视频 */
    .video_local {
        width: 750rpx;
        height: 1334rpx;
        background-color: transparent;
    }
	
    .video_region_padding {
        margin-top: 20px;
        padding: 200rpx 0 260rpx;
        width: 750rpx;
        height: 840rpx;
    }
	
    /* 4个视频 */
    .video_local_1 {
        width: 375rpx;
        height: 420rpx;
    }

    /* 9个视频 */
    .video_local_2 {
        width: 250rpx;
        height: 280rpx;
    }

    /* 16个视频 */
    .video_local_3 {
        width: 187.5rpx;
        height: 210rpx;
    }

    /* 音视频基本开关 */
    .videoshow_control {
        position: absolute;
        bottom: 3rem;
        left: 0;
        width: 750rpx;
        /* background-color: #007AFF; */
        /* height: 250rpx; */
        padding: 20px;
        background-color: transparent;
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        image {
            width: 3rem;
        }

        .open {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 4.3rem;
        }
    }

    .camera {
        image {
            width: 2rem;
            height: 2rem;
        }
    }

    .open {
        height: 205rpx;
        width: 128rpx;
        justify-content: center;
    }

    .open_text {
        padding: 5px 0 0;
        text-align: center;
        color: #fff;
    }

    .position {
        position: absolute;
    }
</style>