From 04f5693e63235fddf2650b591a6b25bdd1202a19 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 12 Aug 2021 16:54:39 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/zhba_app
---
pages/home/home.vue | 37
components/submit/submit.vue | 251 ++++--
pages.json | 180 ++--
pages/videoCall/videoCall - 副本.vue | 52 -
App.vue | 84 ++
pages/videoCall/videoCall.nvue | 568 ++++++++++-----
pages/groupChat/groupChat.vue | 21
store/index.js | 7
static/images/chatroom/phone.png | 0
components/contacts/contacts.vue | 2
manifest.json | 4
pages/videoCall/moban.vue | 240 ------
main.js | 2
pages/groupChat/chating.vue | 13
store/mutations.js | 38 +
pages/videoCall/自己写全.vue | 602 +++++++---------
store/actions.js | 7
17 files changed, 1,099 insertions(+), 1,009 deletions(-)
diff --git a/App.vue b/App.vue
index 7a4e426..79c0309 100644
--- a/App.vue
+++ b/App.vue
@@ -4,6 +4,14 @@
data() {
return {
login: '',
+
+ show: true,
+ name: 'a',
+ list: [{
+ "name": 'tip',
+ "msg": 'The first content!'
+ }],
+ content: '123456'
}
},
methods: {
@@ -25,14 +33,84 @@
url: 'pages/loging/loging?id=1',
})
}
- }
+ },
+ //发送消息
+ send: function() {
+ if (this.content) {
+ this.list.push({
+ "name": this.name,
+ "msg": this.content
+ })
+ console.log(this.list)
+ this.socket.emit('sendMessage', {
+ "name": this.name,
+ "msg": this.content
+ });
+ this.content = ''
+ uni.pageScrollTo({
+ duration: 0,
+ scrollTop: this.list.length * 100
+ })
+ } else {
+ uni.showToast({
+ title: '请输入内容',
+ icon: 'none'
+ })
+ }
+ },
+ //提交姓名
+ onSubmitName: function() {
+ console.log(this.name)
+ if (this.name) {
+ this.show = false
+ this.socket.emit('newPeople', this.name);
+ }
+ },
},
watch: {},
- mounted() {},
+ mounted() {
+ // 加载长连接服务器
+ // this.socket.on('connect', () => {
+ // console.log('connection created.');
+ // // that.onSubmitName();
+ // });
+
+
+
+ },
onLaunch: function() { //初始化完成时触发（全局只触发一次）
+ var that = this;
if (WxStorage.get("init") == '') {
WxStorage.set("init", 'false');
- console.log('第一次进入')
+ console.log('第一次进入');
+
+ // uni.connectSocket({
+ // url: 'ws://192.168.0.111:9034/websocket'
+ // });
+
+ // uni.onSocketOpen(function(res) {
+ // socketOpen = true;
+ // sendSocketMessage();
+ // });
+
+ // function sendSocketMessage() {
+ // var data = {
+ // type: that.$store.state.puserName,
+ // id: that.$store.state.puserID
+ // }
+ // if (socketOpen) {
+ // uni.sendSocketMessage({
+ // data: JSON.stringify(data)
+ // });
+ // }
+ // }
+
+ // 加载长连接服务器
+ // this.socket.on('connect', () => {
+ // console.log('connection created.');
+ // that.onSubmitName();
+ // });
+
}
// this.judgeAdmin();
},
diff --git a/components/contacts/contacts.vue b/components/contacts/contacts.vue
index 28acda7..67163ba 100644
--- a/components/contacts/contacts.vue
+++ b/components/contacts/contacts.vue
@@ -76,7 +76,7 @@
var datas = this.Pdata;
//alert(datas.name)
uni.navigateTo({
- url: '/pages/groupChat/chating?chatID=' + datas.id.toString()
+ url: '/pages/groupChat/chating?chatID=' + datas.id.toString() + '&data=' + JSON.stringify(datas)
});
},
onClose() { //触摸遮罩事件
diff --git a/components/submit/submit.vue b/components/submit/submit.vue
index 1098c75..0c2348f 100644
--- a/components/submit/submit.vue
+++ b/components/submit/submit.vue
@@ -3,85 +3,65 @@
<view class="submit">
<view class="submit-chat">
<view class="bt-img">
- <image src="../../static/images/chatroom/voice.png"
- mode=""
- @tap="records"/>
+ <image src="../../static/images/chatroom/voice.png" mode="" @tap="records" />
</view>
- <textarea auto-height="true"
- class="chat-send btn"
- :class="{displaynone: isrecord}"
- @input="inputs"
- v-model="msg"
- @focus="focus"/>
- <view class="record btn"
- :class="{displaynone: !isrecord}"
- @touchstart="touchstart"
- @touchend="touchend"
- @touchmove="touchmove"
- >
+ <textarea auto-height="true" class="chat-send btn" :class="{displaynone: isrecord}" @input="inputs"
+ v-model="msg" @focus="focus" />
+ <view class="record btn" :class="{displaynone: !isrecord}" @touchstart="touchstart" @touchend="touchend"
+ @touchmove="touchmove">
按住说话
</view>
<view class="bt-img">
- <image src="../../static/images/chatroom/emoji.png"
- mode=""
- @tap="emoji"/>
+ <image src="../../static/images/chatroom/emoji.png" mode="" @tap="emoji" />
</view>
<view class="bt-img">
- <image src="../../static/images/chatroom/add.png"
- mode=""
- @tap="more"/>
+ <image src="../../static/images/chatroom/add.png" mode="" @tap="more" />
</view>
</view>
- <view class="emoji"
- :class="{ displaynone: !isemoji }">
+ <view class="emoji" :class="{ displaynone: !isemoji }">
<view class="emoji-send">
- <view class="emoji-send-del"
- @tap="emojiBack">
- 删除
+ <view class="emoji-send-del" @tap="emojiBack">
+ 删除
</view>
- <view class="emoji-send-bt"
- @tap="emojiSend">
- 发送
+ <view class="emoji-send-bt" @tap="emojiSend">
+ 发送
</view>
</view>
- <emoji @emotion="emotion"
- :height="260" />
+ <emoji @emotion="emotion" :height="260" />
</view>
-
- <view class="more"
- :class="{ displaynone: !ismore }">
- <view class="more-list"
- @tap="sendImg('album')">
- <image src="../../static/images/chatroom/photo.png"/>
+
+ <view class="more" :class="{ displaynone: !ismore }">
+ <view class="more-list" @tap="sendImg('album')">
+ <image src="../../static/images/chatroom/photo.png" />
<text class="more-list-title">图片</text>
</view>
- <view class="more-list"
- @tap="sendImg('camera')">
- <image src="../../static/images/chatroom/camera.png"/>
+ <view class="more-list" @tap="sendImg('camera')">
+ <image src="../../static/images/chatroom/camera.png" />
<text class="more-list-title">拍照</text>
</view>
<view class="more-list">
- <image src="../../static/images/chatroom/file.png"/>
+ <image src="../../static/images/chatroom/file.png" />
<text class="more-list-title">文件</text>
</view>
- <view class="more-list"
- @tap="chooseLocation()">
- <image src="../../static/images/chatroom/location.png"/>
+ <view class="more-list" @tap="chooseLocation()">
+ <image src="../../static/images/chatroom/location.png" />
<text class="more-list-title">位置</text>
</view>
- <view class="more-list">
- <image src="../../static/images/chatroom/vedio.png"/>
+ <view class="more-list" @click="openAudio('Mains')">
+ <image src="../../static/images/chatroom/phone.png" />
+ <text class="more-list-title">语音</text>
+ </view>
+ <view class="more-list" @click="openVideo('Mains')">
+ <image src="../../static/images/chatroom/vedio.png" />
<text class="more-list-title">视频</text>
</view>
</view>
</view>
-
+
<!-- 录制语音遮罩 -->
- <view class="voice-bg"
- :class="{displaynone: !voicebg}">
+ <view class="voice-bg" :class="{displaynone: !voicebg}">
<view class="voice-bg-len">
- <view class="voice-bg-time"
- :style="{width:vlength/0.6 + '%'}">
+ <view class="voice-bg-time" :style="{width:vlength/0.6 + '%'}">
{{ vlength }} "
</view>
</view>
@@ -92,10 +72,11 @@
<script>
import emoji from './emoji/emoji.vue'
-
+
const recorderManager = uni.getRecorderManager()
-
+
export default {
+ props: ['names'],
data() {
return {
isrecord: false,
@@ -108,10 +89,10 @@
pageY: 0,
};
},
- components:{
+ components: {
emoji,
},
- methods:{
+ methods: {
// 获取高度
_getElementHeight() {
const query = uni.createSelectorQuery().in(this);
@@ -154,34 +135,34 @@
inputs(e) {
let chatm = e.detail.value
let pos = chatm.indexOf('\n')
- if(pos != -1 && chatm.length > 1) {
- this.send(this.msg,0)
- }
- setTimeout(() => {
- this._getElementHeight()
- },10)
- },
- // 输入框聚焦
- focus(){
- this.isemoji = false;
- this.ismore = false;
- setTimeout(() => {
- this._getElementHeight()
- },10)
- },
- // 表情内发送
- emojiSend() {
- if(this.msg.length > 0) {
+ if (pos != -1 && chatm.length > 1) {
this.send(this.msg, 0)
}
setTimeout(() => {
this._getElementHeight()
- },10)
+ }, 10)
+ },
+ // 输入框聚焦
+ focus() {
+ this.isemoji = false;
+ this.ismore = false;
+ setTimeout(() => {
+ this._getElementHeight()
+ }, 10)
+ },
+ // 表情内发送
+ emojiSend() {
+ if (this.msg.length > 0) {
+ this.send(this.msg, 0)
+ }
+ setTimeout(() => {
+ this._getElementHeight()
+ }, 10)
},
// 表情退格
emojiBack() {
- if(this.msg.length > 0){
- this.msg = this.msg.substring(0, this.msg.length-1)
+ if (this.msg.length > 0) {
+ this.msg = this.msg.substring(0, this.msg.length - 1)
}
},
// 发送消息
@@ -196,14 +177,14 @@
}, 0)
setTimeout(() => {
this._getElementHeight()
- },10)
+ }, 10)
},
// 发送图片
sendImg(e) {
let count = 9;
- if(e == 'album') {
+ if (e == 'album') {
count = 9
- }else {
+ } else {
count = 1
}
uni.chooseImage({
@@ -212,14 +193,14 @@
sourceType: [e],
success: (res) => {
const filePath = res.tempFilePaths
- for (let i in filePath){
+ for (let i in filePath) {
this.send(filePath[i], 1)
}
}
})
setTimeout(() => {
this._getElementHeight()
- },10)
+ }, 10)
},
// 音频处理
touchstart(e) {
@@ -230,7 +211,7 @@
this.timer = setInterval(() => {
this.vlength = startIndex
startIndex++
- if(startIndex > 60) {
+ if (startIndex > 60) {
clearInterval(this.timer)
this.touchend();
}
@@ -245,15 +226,15 @@
voice: res.tempFilePath,
time: this.vlength
}
- if(this.voicebg){
+ if (this.voicebg) {
this.send(data, 2);
- }
+ }
this.vlength = 0
this.voicebg = false
})
},
touchmove(e) {
- if(this.pageY - e.changedTouches[0].pageY > 200) {
+ if (this.pageY - e.changedTouches[0].pageY > 200) {
this.voicebg = false
}
},
@@ -274,7 +255,66 @@
console.log('经度' + res.longitude)
}
})
- }
+ },
+ //开始音频
+ openAudio(val) { //Mains
+ // console.log(this.names)
+ // var socketOpen = false;
+
+
+ uni.navigateTo({
+ url: '../videoCall/videoCall?state=' + val + '&type=audio'
+ });
+ },
+ //接收音频
+ receiveAudio(val) { //Receiver
+ uni.navigateTo({
+ url: '../videoCall/videoCall?state=' + val + '&type=audio'
+ });
+ },
+ //开始视频
+ openVideo(val) { //Mains
+ // uni.onSocketOpen(function(res) {
+ // // socketOpen = true;
+ // console.log('持续连接成功')
+ // sendSocketMessage();
+ // });
+
+ // function sendSocketMessage() {
+ // var data = {
+ // name: this.$store.state.puserName,
+ // id: this.names[1],
+ // // id: state.puserID,
+ // type: 'video'
+ // }
+ // // if (socketOpen) {
+ // uni.sendSocketMessage({
+ // data: JSON.stringify(data)
+ // });
+ // // }
+ // }
+ var url = '../videoCall/videoCall?state=' + val + '&type=video' + '&myname=' + this.names[0] +
+ '&toname=' + this.names[1]
+ console.log(url)
+ uni.navigateTo({
+ url: url
+ });
+ },
+ //接收视频
+ // receiveVideo(val, room) { //Receiver
+ // uni.navigateTo({
+ // url: '../videoCall/videoCall?state=' + val + '&type=video' + '&room=' + room
+ // });
+ // }
+ },
+ mounted() {
+ // uni.onSocketMessage(function(res) {
+ // console.log(res.data)
+ // if (res.data.type == 'video') {
+ // this.receiveVideo('Receiver', );
+ // }
+ // // console.log('收到服务器内容：' + res.data);
+ // });
}
}
</script>
@@ -290,21 +330,21 @@
z-index: 1002;
padding-bottom: env(safe-area-inset-bottom);
}
-
+
.submit-chat {
width: 100%;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 14rpx 10rpx;
-
+
image {
width: 56rpx;
height: 56rpx;
margin: 0 10rpx;
flex: auto;
}
-
+
.btn {
flex: auto;
background-color: #fff;
@@ -313,29 +353,30 @@
max-height: 160rpx;
margin: 0 10rpx;
}
-
+
.chat-send {
line-height: 44rpx !important;
}
-
+
.record {
text-align: center;
font-size: $uni-font-size-lg;
color: $uni-text-color-grey;
font-weight: bold;
}
-
+
}
+
.displaynone {
display: none;
}
-
+
.emoji {
width: 100%;
height: 460rpx;
background: rgba(236, 237, 238, 1);
box-shadow: 0 -1rpx 0 0 rgba(0, 0, 0, 1);
-
+
.emoji-send {
width: 260rpx;
height: 104rpx;
@@ -345,19 +386,19 @@
right: 0;
padding-top: 24rpx;
display: flex;
-
+
.emoji-send-bt {
flex: 1;
height: 80rpx;
margin: 0 32rpx 0 20rpx;
- background: rgba(255, 228, 49 ,1);
+ background: rgba(255, 228, 49, 1);
border-radius: 240rpx;
font-size: 32rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx;
}
-
+
.emoji-send-del {
flex: 1;
height: 80rpx;
@@ -371,6 +412,7 @@
}
}
}
+
.more {
width: 100%;
height: 436rpx;
@@ -379,7 +421,7 @@
bottom: env(safe-area-inset-bottom);
padding: 0 20rpx;
box-sizing: border-box;
-
+
.more-list {
width: 25%;
text-align: center;
@@ -393,7 +435,7 @@
background: rgba(255, 255, 255, 1);
border-radius: 24rpx;
}
-
+
.more-list-title {
color: rgba(30, 40, 50, .5);
line-height: 34rpx;
@@ -402,7 +444,7 @@
}
}
}
-
+
.voice-bg {
height: 100%;
width: 100%;
@@ -412,7 +454,7 @@
bottom: 0;
z-index: 1001;
// position: relative;
-
+
.voice-bg-len {
height: 84rpx;
width: 600rpx;
@@ -425,6 +467,7 @@
background: rgba(255, 255, 255, .2);
border-radius: 42rpx;
text-align: center;
+
.voice-bg-time {
display: inline-block;
line-height: 84rpx;
@@ -433,15 +476,15 @@
min-width: 120rpx;
}
}
-
+
.voice-del {
position: absolute;
bottom: 148rpx;
margin-bottom: env(safe-area-inset-bottom);
width: 100%;
text-align: center;
- color: #fff;
- font-size: $uni-font-size-base;
+ color: #fff;
+ font-size: $uni-font-size-base;
}
}
</style>
diff --git a/main.js b/main.js
index d682d1a..fafec06 100644
--- a/main.js
+++ b/main.js
@@ -24,6 +24,8 @@
import httpInstall from '@/http/install.js'
Vue.use(httpInstall, app)
+
+
// 公共函数
import globalFunc from '@/utils/func.js'
Vue.use(globalFunc, app);
diff --git a/manifest.json b/manifest.json
index 24d9a51..cce7c30 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 ab36a18..159af86 100644
--- a/pages.json
+++ b/pages.json
@@ -16,7 +16,8 @@
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
- }, {
+ },
+ {
"path": "pages/registerUser/registerUser",
"name": "loging",
"style": {
@@ -29,14 +30,7 @@
// }
}
},
- // {
- // "path": "pages/home/home",
- // "style": {
- // "navigationBarTitleText": "首页",
- // "enablePullDownRefresh": false,
- // "navigationStyle": "custom"
- // }
- // },
+
{
"path": "pages/service/service",
"style": {
@@ -44,44 +38,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 +87,6 @@
"navigationStyle": "custom"
}
},
-
{
"path": "pages/securityStaff/exhibition",
"style": {
@@ -98,7 +95,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/securityStaff/information",
"style": {
"navigationBarTitleText": "详细信息",
@@ -106,9 +104,6 @@
"navigationStyle": "custom"
}
},
-
-
-
{
"path": "pages/company/company",
"style": {
@@ -117,7 +112,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/company/companyDetail",
"style": {
"navigationBarTitleText": "服务单位管理",
@@ -125,7 +121,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/report/report",
"style": {
"navigationBarTitleText": "工作汇报",
@@ -133,7 +130,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/report/initiate",
"style": {
"navigationBarTitleText": "发起汇报",
@@ -141,7 +139,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/report/send",
"style": {
"navigationBarTitleText": "发送汇报列表",
@@ -149,7 +148,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/report/sendDetail",
"style": {
"navigationBarTitleText": "发送汇报详情",
@@ -157,7 +157,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/report/receive",
"style": {
"navigationBarTitleText": "接受汇报列表",
@@ -165,7 +166,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/report/receiveDetail",
"style": {
"navigationBarTitleText": "接收汇报详情",
@@ -173,7 +175,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/dispatch/dispatch",
"style": {
"navigationBarTitleText": "调度指令",
@@ -181,7 +184,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/dispatch/look",
"style": {
"navigationBarTitleText": "指令查看",
@@ -189,7 +193,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/dispatch/lookDetail",
"style": {
"navigationBarTitleText": "指令详情",
@@ -197,7 +202,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/dispatch/issue",
"style": {
"navigationBarTitleText": "文字指令下发",
@@ -205,7 +211,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/dispatch/imgissue",
"style": {
"navigationBarTitleText": "图片指令下发",
@@ -213,7 +220,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/message/message",
"style": {
"navigationBarTitleText": "通知通告",
@@ -221,7 +229,8 @@
"navigationBarBackgroundColor": "#0BB9C8",
"navigationBarTextStyle": "white"
}
- }, {
+ },
+ {
"path": "pages/examine/examine",
"style": {
"navigationBarTitleText": "现场检查",
@@ -302,95 +311,103 @@
"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
+ "enablePullDownRefresh": false,
+ "navigationStyle": "custom"
+ // "enablePullDownRefresh": false
}
-
}
],
"globalStyle": {
@@ -398,32 +415,41 @@
"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/chating.vue b/pages/groupChat/chating.vue
index df1f507..909fe42 100644
--- a/pages/groupChat/chating.vue
+++ b/pages/groupChat/chating.vue
@@ -125,7 +125,7 @@
</view>
<!-- <view class="padbt"></view> -->
</scroll-view>
- <submit @inputs="inputs"
+ <submit @inputs="inputs" :names="name"
@heights="heights"/>
</view>
</template>
@@ -156,7 +156,9 @@
loading: '', // 滚动事件
isload: true,
isanimation: true,
- begainloading: true
+ begainloading: true,
+
+ name: []//视频 双方id
};
},
components:{
@@ -166,6 +168,9 @@
this.recipientId = option.chatID;
this._getMsg(this.nowpage)
// this.nextPage()
+ var data = JSON.parse(option.data)
+ console.log(data,55555555555555555555555)
+ this.name = ['wo',data.id];
},
methods:{
// 返回键
@@ -209,7 +214,7 @@
var that = this;
that.senId = WxStorage.get("ids");
uni.request({
- url:"http://s16s652780.51mypc.cn/api/chat-records/getSingleMessagePage",
+ url:"http://223.82.109.183:2080/api/chat-records/getSingleMessagePage",
method:"get",
data:{
senderId: that.senId,
@@ -332,7 +337,7 @@
}
uni.request({
- url:"http://s16s652780.51mypc.cn/api/chat-records/insertSingleChat",
+ url:"http://223.82.109.183:2080/api/chat-records/insertSingleChat",
method:"post",
data:{
senderId: that.senId,
diff --git a/pages/groupChat/groupChat.vue b/pages/groupChat/groupChat.vue
index 16e3623..63e799d 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>
@@ -134,7 +139,7 @@
var that = this;
if(this.current == 0){
uni.request({
- url:"http://s16s652780.51mypc.cn/api/chat-records/getChatListPage",
+ url:"http://223.82.109.183:2080/api/chat-records/getChatListPage",
method:"get",
data:{
senderId: WxStorage.get("ids")
@@ -152,7 +157,7 @@
});
}else if(this.current == 1){
uni.request({
- url:"http://s16s652780.51mypc.cn/api/chatgroup/selectList",
+ url:"http://223.82.109.183:2080/api/chatgroup/selectList",
method:"POST",
data:{
senderId: WxStorage.get("ids")
@@ -170,7 +175,7 @@
})
}else if(this.current == 2){
uni.request({
- url:"http://s16s652780.51mypc.cn/api//blade-user/pages?current=1&size=9999",
+ url:"http://223.82.109.183:2080/api/blade-user/pages?current=1&size=9999",
method:"get",
data:{
senderId: WxStorage.get("ids")
@@ -310,4 +315,10 @@
}
}
}
+ .message-icon {
+ width: 32rpx;
+ height: auto;
+ margin-right: 27rpx;
+ }
+
</style>
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 7e189cf..fb6a7dd 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -114,8 +114,8 @@
</view>
<!-- 新闻模块 end -->
</view>
- <!-- <u-button class="ccbut" type="primary" @click="openVideo('Mains')">测试点视频通话：主播</u-button> -->
- <!-- <u-button class="ccbut" type="primary" @click="openVideo('Receiver')">测试点视频通话：第二个</u-button> -->
+ <!-- <u-button class="ccbut" type="primary" @click="openVideo('Mains')">测试点视频通话：主播</u-button>
+ <u-button class="ccbut" type="primary" @click="openVideo('Receiver')">测试点视频通话：第二个</u-button> -->
</view>
</template>
@@ -144,7 +144,37 @@
serviceButton: []
};
},
+ mounted() {
+ var socketOpen = false;
+ //websocket连接
+ // uni.connectSocket({
+ // url: 'ws://192.168.0.111:9034/websocket'
+ // });
+
+ // uni.onSocketOpen(function(res) {
+ // socketOpen = true;
+ // sendSocketMessage();
+ // });
+
+ // function sendSocketMessage() {
+ // var data = {
+ // type: 'my',
+ // id: '1415922341221867522'
+ // }
+ // if (socketOpen) {
+ // uni.sendSocketMessage({
+ // data: JSON.stringify(data)
+ // });
+ // }
+ // }
+
+ // uni.onSocketMessage(function(res) {
+ // console.log('收到服务器内容：' + res.data);
+ // });
+
+ },
onLoad() {
+
// 后续将改为与后端联动
// 加载banner数据
fakePosition().then(data => {
@@ -183,7 +213,8 @@
methods: {
openVideo(val){
uni.navigateTo({
- url: '../videoCall/videoCall?state=' + val
+ // url: '../videoCall/videoCall?state=' + val + '&type=video'
+ url: '../videoCall/videoCall?state=Mains&type=video&myname=wo&toname=1424647828935819265'
});
},
changePicker(e) {
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 60%
copy from pages/videoCall/videoCall.vue
copy to pages/videoCall/videoCall.nvue
index f100b08..ad091d3 100644
--- a/pages/videoCall/videoCall.vue
+++ b/pages/videoCall/videoCall.nvue
@@ -2,53 +2,40 @@
<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">正在呼叫{{toName}}</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">是否接收来自{{formName}}的{{Otype}}请求</text>
+ <text class="activetext">接受进入{{channel}}</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-if="videoShow && Otype == 'video'">
<view class="video_bg">
<image class="video_bg_img" src="../../static/BG.png" mode=""></image>
@@ -59,14 +46,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>
<!-- 转换摄像头 -->
@@ -110,6 +99,61 @@
<!-- </view> -->
</view>
</view>
+
+ <!-- 音频 -->
+ <view class="vedioWatch" v-if="videoShow && Otype == 'audio'">
+ <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="Mains-t">
+ <text class="activetext">语音通话中</text>
+ <u-loading size="36" mode="flower"></u-loading>
+ </view>
+
+
+ <!-- 音视频基本开关 -->
+ <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_on.png" mode="" v-else></image>
+ <text class="open_text">音频</text>
+ </view>
+
+ <!-- 挂断 -->
+ <view class="open" @click="phoneFn">
+ <image class="video_bg_img" src="../../static/over.png" mode=""></image>
+ <text class="open_text">挂断</text>
+
+ </view>
+
+ <!-- 视频开关 -->
+ <!-- <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_in.png" mode="" v-else></image>
+ <text class="open_text">视频</text>
+ </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>
+
+ </view>
<uni-popup ref="popup" type="center">
<uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
</uni-popup>
@@ -132,24 +176,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,28 +201,112 @@
popupType: "",
popupMessage: "",
- isMain: false,
- MainName: '222',
- userName: '111'
- // closeArray: []
+ isMain: true,
+ userName: '111',
+ toName: '',
+ Otype: '',
+
+ formName: '',
+
+ faqiid: '',
+ jieshouid:''
+
}
},
// 页面初始加载（仅执行一次）
onReady() {
// 初始化
- this.channel = 2554;
- this.init();
+ // this.channel = 2554;
+ // this.init();
},
onLoad(option) {
+ var that = this;
+ that.toName = option.toname;
+ console.log(option)
+ if (option.type) {
+ that.Otype = option.type;
+ } else {
+ return
+ }
console.log(option.state);
if (option.state == "Mains") {
- this.isMain = true;
- setTimeout(res => {
- this.join();
- }, 2000)
+
+ that.jieshouid = option.toname;
+ that.faqiid = that.$store.state.puserID;
+
+ that.isMain = true;
+ var call = false;
+ this.userName = that.$store.state.puserID + '-faqiren';
+ this.init();
+ // setTimeout(res => {
+ //发起请求 给后端双方姓名
+
+ //得到返回值 开始视频 或者拒绝视频
+ // console.log(that.$store.state);
+ uni.request({
+ url: that.$store.state.api + '/pushMsg/inviteVideoCall',
+ data: {
+ userId: option.toname,
+ faqiid: that.$store.state.puserID,
+ name: that.$store.state.puserName,
+ type: 'video'
+ },
+ success(res) {
+ // if(res.data.res == 0){
+
+ // }
+ var d = res.data.data;
+ if (d.res == 0) {
+ console.log('对方不在线--退出');
+ uni.showToast({
+ title: '对方不在线',
+ duration: 2000,
+ icon: 'none'
+ });
+ setTimeout(res => {
+ uni.navigateBack();
+ // console.log(111)
+ }, 2000)
+
+ } else if (d.res == 1) {
+ that.channel = d.roomId;
+ console.log('对方在线-- 等待对方接受', d);
+ // call = true;
+ setTimeout(res => {
+ // uni.navigateBack();
+ // console.log(111)
+ that.join();
+ console.log('成功进入')
+ }, 2000)
+ }
+ }
+ })
+
+
+ uni.onSocketMessage(function(res) {
+ console.log(res.data);
+ var data = JSON.parse(res.data)
+ // if (call && ) {
+
+ // }
+ if (data.type == 'close') {
+ console.log('对方已挂断');
+ RtcModule.leaveChannel((res) => {});
+ that.closeAll();
+ }
+ });
+
+
+ // }, 5000)
} else if (option.state == "Receiver") {
- this.isMain = false;
+ that.userName = that.$store.state.puserID + '-jieshouren';
+ // that.formName = 'wo';
+ that.channel = option.room;
+ that.faqiid = option.faqiid;
+ that.jieshouid = that.$store.state.puserID;
+ that.init();
+ that.isMain = false;
}
},
@@ -191,24 +315,46 @@
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: {
// 初始化
async init() {
// 查看权限
+ console.log('开始初始化')
+ this.uid = this.userName;
+ console.log('初始化完成’', this.uid, '当前id码');
+ uni.showToast({
+ title: this.uid,
+ duration: 2000,
+ // icon: 'none'
+ });
if (uni.getSystemInfoSync().platform == 'ios') {
//查看相机权限
await this.requestAndroidPermission("camera", 'ios');
@@ -228,9 +374,10 @@
await RtcModule.create({
"appId": this.appid
}, (res) => {
-
+ console.log(res, 11111111111111111111111111111111);
});
- this.uid = this.randomFn(6);
+ // this.uid = this.randomFn(6);
+
},
//设置角色
setClientRole(num) {
@@ -247,11 +394,13 @@
var that = this;
// if (val == "Mains") { //视频发起人进入
console.log('视频发起人进入');
+ console.log(this.uid, '进入检测uid')
uni.showLoading({
title: '加载中',
mask: true
});
//加入房间
+ console.log('room', this.channel, 'useid', this.uid)
await RtcModule.joinChannel({
"token": "",
"channelId": this.channel,
@@ -259,6 +408,7 @@
}, (res) => {
console.log(res, 'join break');
console.log('成功进入房间：' + that.channel);
+ that.videoShow = true;
})
// } else if (val == 'Receiver') { //视频接收人进入
// console.log('视频接收人进入');
@@ -283,25 +433,56 @@
// RtcModule.leaveChannel((res) => {});
console.log("等待时候挂断");
uni.navigateBack();
+ this.closeAll();
+ },
+ joinit() { //接受进入视频
+ // 传输接受的值
+
+ // 开始进入视频通话
+ this.join();
},
//拒绝进入视频
comeBack() {
+
+
+ // 传输拒绝的值
+
+
console.log("拒绝进入视频");
uni.navigateBack();
+
+ // RtcModule.leaveChannel((res) => {});
+ // this.closeAll();
},
// 挂断 离开
phoneFn() {
//离开频道
- RtcModule.leaveChannel((res) => {})
+ // RtcModule.leaveChannel((res) => {});
+ // this.closeAll();
+ var data = {
+ sentId:this.faqiid,
+ acceptId: this.jieshouid
+ }
+ // uni.navigateBack();
+ uni.request({
+ url: this.$store.state.api + '/pushMsg/closeVideoCall',
+ data:data,
+ success:(res)=> {
+ // RtcModule.leaveChannel((res) => {});
+ // this.closeAll();
+ console.log(res,'成功关闭');
+ }
+ })
},
//添加本地视频到页面
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 +549,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 +559,7 @@
"enabled": true
}, (res) => {})
setTimeout(() => {
+ console.log(this.PeerVideoUser, 'this.PeerVideoUser')
// 启用视频模块。
this.role == 1 ? this.setupLocalVideoFn() : RtcModule
.enableVideo((res) => {});
@@ -442,12 +625,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 +645,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 +674,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 +808,8 @@
.vedioWatch {
flex: 1;
position: relative;
- width: 100%;
- height: 100vh;
- background-color: #0A1621;
-
-
+ width: 750rpx;
+ height: 1080rpx;
}
/* 初始背景 */
@@ -670,7 +825,6 @@
.video_bg_img {
flex: 1;
- width: 100%;
}
.video_bg_text {
@@ -685,53 +839,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 +920,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 +932,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>
diff --git a/static/images/chatroom/phone.png b/static/images/chatroom/phone.png
new file mode 100644
index 0000000..922f59e
--- /dev/null
+++ b/static/images/chatroom/phone.png
Binary files differ
diff --git a/store/actions.js b/store/actions.js
index 269ce0d..99d89d0 100644
--- a/store/actions.js
+++ b/store/actions.js
@@ -16,13 +16,13 @@
},
],
pasw = md5(data.pass),
- // url = 'http://223.82.109.183:2080/api/api/blade-auth/oauth/token?tenantId=000000&username=' + data.name +
- url = 'http://223.82.109.183:2080/api/blade-auth/oauth/token?tenantId=000000&username=' + data.name +
+ // url = 'http://223.82.109.183:2080/api/blade-auth/oauth/token?tenantId=000000&username=' + data.name +
+ url = store.state.piAPI + '/blade-auth/oauth/token?tenantId=000000&username=' + data.name +
' &password=' + pasw + '&grant_type=password&scope=all&type=account';
// url ='http://192.168.0.109:82/blade-auth/oauth/token';
// url ='http://192.168.0.109:82/blade-auth/oauth/token?tenantId=000000&username=admin&password=93369e86dc5fa854a0eaf75558c4039d&grant_type=password';
// url ='http://web.byisf.com/api/blade-auth/oauth/token?tenantId=000000&username=admin&password=93369e86dc5fa854a0eaf75558c4039d&grant_type=password&scope=all';
- // console.log(url);
+ console.log(store.state.piAPI);
wx.request({ //uniapp 自带axios
url: url, //仅为示例，并非真实接口地址。
// data: d,
@@ -45,6 +45,7 @@
// // dataType: 'JSON',
success: (res) => {
if (res.statusCode == 200) {
+ console.log(res)
if (res.data.error_code == "400") {
uni.showToast({
title: '密码错误，请重试',
diff --git a/store/index.js b/store/index.js
index 92a048b..9b73093 100644
--- a/store/index.js
+++ b/store/index.js
@@ -17,6 +17,7 @@
const store = new Vuex.Store({
// 下面这些值仅为示例，使用过程中请删除
state: {
+
// 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
userInfo: lifeData.userInfo ? lifeData.userInfo : {
avatar: '',
@@ -32,9 +33,11 @@
useName: '过客 ',
},
logPath: '',
- // piAPI: 'http://223.82.109.183:2080/api/api',
- // piAPI: 'http://localhost:82/',
+ // piAPI: 'http://223.82.109.183:2080/api',
piAPI: 'http://223.82.109.183:2080/api',
+ api: 'http://223.82.109.183:2080/api',
+ // piAPI: 'http://localhost:82/',
+ // piAPI: 'http://192.168.0.108:81',
puserName: '',
puserID: '',
puserIphone:'',
diff --git a/store/mutations.js b/store/mutations.js
index 497af5c..5ff3855 100644
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -46,6 +46,44 @@
state.puserID = data.userID;
state.avatar = data.avatar;
}
+ console.log('登入数据传输成功 开始进入连接')
+
+ uni.connectSocket({
+ url: 'ws://http://223.82.109.183:2086/websocket'
+ });
+ var socketOpen = false;
+ uni.onSocketOpen(function(res) {
+ socketOpen = true;
+ console.log('持续连接成功')
+ sendSocketMessage();
+ });
+
+ function sendSocketMessage() {
+ var data = {
+ // type: state.puserName,
+ id: state.puserID,
+ type: 'login'
+ }
+ if (socketOpen) {
+ uni.sendSocketMessage({
+ data: JSON.stringify(data)
+ });
+ }
+ }
+
+ uni.onSocketMessage(function(res) {
+ console.log(res.data);
+ var data = JSON.parse(res.data)
+ if (data.type == 'video') {
+ // this.receiveVideo('Receiver', );
+ console.log('进入接受 跳转',data.type)
+ uni.navigateTo({
+ url: '../videoCall/videoCall?state=Receiver&type=' + data.type +'&room=' + data.roomId + '&name=' + data.name + '&faqiid=' + data.faqiid
+ });
+ }
+ // console.log('收到服务器内容：' + res.data);
+ });
+
//储存用户
WxStorage.set("init", "true");
WxStorage.set("name", data.userName);
--
Gitblit v1.9.3