From c2e4ee1dff3bd6f166711136519d561629e52af2 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 10 Aug 2021 20:39:31 +0800
Subject: [PATCH] 视频
---
manifest.json | 4
pages.json | 206 ++++---
pages/videoCall/moban.vue | 240 --------
pages/videoCall/videoCall - 副本.vue | 52 -
pages/videoCall/videoCall.nvue | 396 +++++++-------
pages/groupChat/groupChat.vue | 15
pages/videoCall/自己写全.vue | 602 ++++++++++-------------
7 files changed, 627 insertions(+), 888 deletions(-)
diff --git a/manifest.json b/manifest.json
index 7e751a5..47471f8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -56,7 +56,9 @@
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {
- "ad" : {}
+ "ad" : {
+ "360" : {}
+ }
},
"icons" : {
"android" : {
diff --git a/pages.json b/pages.json
index de0edcc..88fc3c4 100644
--- a/pages.json
+++ b/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": "我的"
+ }
+ ]
}
-}
+}
\ No newline at end of file
diff --git a/pages/groupChat/groupChat.vue b/pages/groupChat/groupChat.vue
index 16e3623..df243ff 100644
--- a/pages/groupChat/groupChat.vue
+++ b/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>
diff --git a/pages/videoCall/videoCall.vue b/pages/videoCall/moban.vue
similarity index 75%
copy from pages/videoCall/videoCall.vue
copy to pages/videoCall/moban.vue
index f100b08..eb4c8bf 100644
--- a/pages/videoCall/videoCall.vue
+++ b/pages/videoCall/moban.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;
}
diff --git a/pages/videoCall/videoCall.vue "b/pages/videoCall/videoCall - \345\211\257\346\234\254.vue"
similarity index 96%
rename from pages/videoCall/videoCall.vue
rename to "pages/videoCall/videoCall - \345\211\257\346\234\254.vue"
index f100b08..8b6e50e 100644
--- a/pages/videoCall/videoCall.vue
+++ "b/pages/videoCall/videoCall - \345\211\257\346\234\254.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;
}
/* 转换摄像头 */
diff --git a/pages/videoCall/videoCall.vue b/pages/videoCall/videoCall.nvue
similarity index 74%
copy from pages/videoCall/videoCall.vue
copy to pages/videoCall/videoCall.nvue
index f100b08..a55874f 100644
--- a/pages/videoCall/videoCall.vue
+++ b/pages/videoCall/videoCall.nvue
@@ -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;
}
diff --git a/pages/videoCall/videoCall.vue "b/pages/videoCall/\350\207\252\345\267\261\345\206\231\345\205\250.vue"
similarity index 64%
copy from pages/videoCall/videoCall.vue
copy to "pages/videoCall/\350\207\252\345\267\261\345\206\231\345\205\250.vue"
index f100b08..b661ea4 100644
--- a/pages/videoCall/videoCall.vue
+++ "b/pages/videoCall/\350\207\252\345\267\261\345\206\231\345\205\250.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>
--
Gitblit v1.9.3