|
|
|
@ -1,27 +1,27 @@ |
|
|
|
<template> |
|
|
|
<el-dialog v-dialogDrag :title="title" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" |
|
|
|
:visible="isShow" width="50%" height="70%" :before-close="handleClose"> |
|
|
|
<div class="chat-video"> |
|
|
|
<div v-show="rtcInfo.mode=='video'" class="chat-video-box"> |
|
|
|
<div class="chat-video-friend" v-loading="loading" element-loading-text="等待对方接听..." |
|
|
|
<div class="rtc-private-video"> |
|
|
|
<div v-show="rtcInfo.mode=='video'" class="rtc-video-box"> |
|
|
|
<div class="rtc-video-friend" v-loading="loading" element-loading-text="等待对方接听..." |
|
|
|
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.3)"> |
|
|
|
<head-image class="friend-head-image" :id="rtcInfo.friend.id" :size="80" :name="rtcInfo.friend.nickName" |
|
|
|
:url="rtcInfo.friend.headImage"> |
|
|
|
</head-image> |
|
|
|
<video ref="friendVideo" autoplay=""></video> |
|
|
|
</div> |
|
|
|
<div class="chat-video-mine"> |
|
|
|
<div class="rtc-video-mine"> |
|
|
|
<video ref="mineVideo" autoplay=""></video> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-show="rtcInfo.mode=='voice'" class="chat-voice-box" v-loading="loading" element-loading-text="等待对方接听..." |
|
|
|
<div v-show="rtcInfo.mode=='voice'" class="rtc-voice-box" v-loading="loading" element-loading-text="等待对方接听..." |
|
|
|
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.3)"> |
|
|
|
<head-image class="friend-head-image" :id="rtcInfo.friend.id" :size="200" :name="rtcInfo.friend.nickName" |
|
|
|
:url="rtcInfo.friend.headImage"> |
|
|
|
<div class="chat-voice-name">{{rtcInfo.friend.nickName}}</div> |
|
|
|
<div class="rtc-voice-name">{{rtcInfo.friend.nickName}}</div> |
|
|
|
</head-image> |
|
|
|
</div> |
|
|
|
<div class="chat-video-controllbar"> |
|
|
|
<div class="rtc-control-bar"> |
|
|
|
<div v-show="isWaiting" title="取消呼叫" class="icon iconfont icon-phone-reject reject" style="color: red;" |
|
|
|
@click="cancel()"></div> |
|
|
|
<div v-show="isAccepted" title="挂断" class="icon iconfont icon-phone-reject reject" style="color: red;" |
|
|
|
@ -36,7 +36,7 @@ |
|
|
|
import HeadImage from '../common/HeadImage.vue'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'chatVideo', |
|
|
|
name: 'rtcPrivateVideo', |
|
|
|
components: { |
|
|
|
HeadImage |
|
|
|
}, |
|
|
|
@ -405,7 +405,7 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.chat-video { |
|
|
|
.rtc-private-video { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.el-loading-text { |
|
|
|
@ -418,12 +418,12 @@ |
|
|
|
font-size: 30px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.chat-video-box { |
|
|
|
.rtc-video-box { |
|
|
|
position: relative; |
|
|
|
border: #4880b9 solid 1px; |
|
|
|
background-color: #eeeeee; |
|
|
|
|
|
|
|
.chat-video-friend { |
|
|
|
.rtc-video-friend { |
|
|
|
height: 70vh; |
|
|
|
|
|
|
|
.friend-head-image { |
|
|
|
@ -438,7 +438,7 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.chat-video-mine { |
|
|
|
.rtc-video-mine { |
|
|
|
position: absolute; |
|
|
|
z-index: 99999; |
|
|
|
width: 25vh; |
|
|
|
@ -455,7 +455,7 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.chat-voice-box { |
|
|
|
.rtc-voice-box { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
@ -465,14 +465,14 @@ |
|
|
|
padding-top: 10vh; |
|
|
|
background-color: aliceblue; |
|
|
|
|
|
|
|
.chat-voice-name { |
|
|
|
.rtc-voice-name { |
|
|
|
text-align: center; |
|
|
|
font-size: 22px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.chat-video-controllbar { |
|
|
|
.rtc-control-bar { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
padding: 10px; |