|
|
|
|
@ -31,27 +31,13 @@ |
|
|
|
|
<!-- 左侧画面 --> |
|
|
|
|
<div class="video-stage left-stage" ref="videoContainerLeft"> |
|
|
|
|
<!-- 采集卡/主视频画面 --> |
|
|
|
|
<video |
|
|
|
|
ref="shareVideo" |
|
|
|
|
class="share-preview" |
|
|
|
|
autoplay |
|
|
|
|
playsinline |
|
|
|
|
muted |
|
|
|
|
v-if="isSharing" |
|
|
|
|
></video> |
|
|
|
|
<video ref="shareVideo" class="share-preview" autoplay playsinline muted v-if="isSharing"></video> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 右侧画面 --> |
|
|
|
|
<div class="video-stage right-stage" ref="videoContainerRight"> |
|
|
|
|
<!-- 本地摄像头画面 --> |
|
|
|
|
<video |
|
|
|
|
ref="localVideo" |
|
|
|
|
class="local-camera" |
|
|
|
|
autoplay |
|
|
|
|
muted |
|
|
|
|
playsinline |
|
|
|
|
v-if="camOn" |
|
|
|
|
/> |
|
|
|
|
<video ref="localVideo" class="local-camera" autoplay muted playsinline v-if="camOn" /> |
|
|
|
|
</div> |
|
|
|
|
</main> |
|
|
|
|
|
|
|
|
|
@ -113,29 +99,17 @@ |
|
|
|
|
</footer> |
|
|
|
|
|
|
|
|
|
<!-- 邀请弹窗 --> |
|
|
|
|
<CreateGroupDialog |
|
|
|
|
:visible.sync="inviteDialogVisible" |
|
|
|
|
title="通讯录邀请" |
|
|
|
|
@confirm="handleInviteConfirm" |
|
|
|
|
@close="inviteDialogVisible = false" |
|
|
|
|
/> |
|
|
|
|
<CreateGroupDialog :visible.sync="inviteDialogVisible" title="通讯录邀请" @confirm="handleInviteConfirm" |
|
|
|
|
@close="inviteDialogVisible = false" /> |
|
|
|
|
|
|
|
|
|
<!-- 设置弹窗 --> |
|
|
|
|
<el-dialog |
|
|
|
|
title="设置" |
|
|
|
|
:visible.sync="settingDialogVisible" |
|
|
|
|
width="31%" |
|
|
|
|
@open="onSettingDialogOpen" |
|
|
|
|
:show-close="false" |
|
|
|
|
> |
|
|
|
|
<el-dialog title="设置" :visible.sync="settingDialogVisible" width="31%" @open="onSettingDialogOpen" |
|
|
|
|
:show-close="false"> |
|
|
|
|
<el-tabs v-model="settingTab" tab-position="left"> |
|
|
|
|
<el-tab-pane label="通用" name="general"> |
|
|
|
|
<el-form :model="tempSetting" label-width="140px"> |
|
|
|
|
<el-form-item label="会诊名称"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="tempSetting.meetingTitle" |
|
|
|
|
style="width: 240px" |
|
|
|
|
></el-input> |
|
|
|
|
<el-input v-model="tempSetting.meetingTitle" style="width: 240px"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
@ -143,27 +117,15 @@ |
|
|
|
|
<el-form :model="tempSetting" label-width="140px"> |
|
|
|
|
<el-form-item label="摄像头/工作站"> |
|
|
|
|
<el-select v-model="tempSetting.cameraId" style="width: 100%"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in videoDeviceList" |
|
|
|
|
:key="item.deviceId" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.deviceId" |
|
|
|
|
></el-option> |
|
|
|
|
<el-option v-for="item in videoDeviceList" :key="item.deviceId" :label="item.label" |
|
|
|
|
:value="item.deviceId"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="绿联采集卡"> |
|
|
|
|
<el-select |
|
|
|
|
v-model="tempSetting.captureCard" |
|
|
|
|
style="width: 100%" |
|
|
|
|
@change="switchCaptureCard" |
|
|
|
|
> |
|
|
|
|
<el-select v-model="tempSetting.captureCard" style="width: 100%" @change="switchCaptureCard"> |
|
|
|
|
<el-option label="不使用采集卡" value=""></el-option> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in videoDeviceList" |
|
|
|
|
:key="item.deviceId" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.deviceId" |
|
|
|
|
></el-option> |
|
|
|
|
<el-option v-for="item in videoDeviceList" :key="item.deviceId" :label="item.label" |
|
|
|
|
:value="item.deviceId"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="网络调控策略"> |
|
|
|
|
@ -209,22 +171,14 @@ |
|
|
|
|
<el-form :model="tempSetting" label-width="140px"> |
|
|
|
|
<el-form-item label="麦克风"> |
|
|
|
|
<el-select v-model="tempSetting.micId" style="width: 100%"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in audioInList" |
|
|
|
|
:key="item.deviceId" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.deviceId" |
|
|
|
|
/> |
|
|
|
|
<el-option v-for="item in audioInList" :key="item.deviceId" :label="item.label" |
|
|
|
|
:value="item.deviceId" /> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="扬声器"> |
|
|
|
|
<el-select v-model="tempSetting.speakerId" style="width: 100%"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in audioOutList" |
|
|
|
|
:key="item.deviceId" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.deviceId" |
|
|
|
|
/> |
|
|
|
|
<el-option v-for="item in audioOutList" :key="item.deviceId" :label="item.label" |
|
|
|
|
:value="item.deviceId" /> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
@ -235,9 +189,7 @@ |
|
|
|
|
<el-color-picker v-model="tempSetting.brushColor" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label=""> |
|
|
|
|
<el-checkbox v-model="tempSetting.syncColor" |
|
|
|
|
>同步标记颜色</el-checkbox |
|
|
|
|
> |
|
|
|
|
<el-checkbox v-model="tempSetting.syncColor">同步标记颜色</el-checkbox> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="画笔类型"> |
|
|
|
|
<el-radio-group v-model="tempSetting.brushType"> |
|
|
|
|
@ -265,7 +217,11 @@ |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import CreateGroupDialog from "@/views/message/components/CreateGroupDialog"; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
postConsultationCreate, |
|
|
|
|
postConsultationInfo, |
|
|
|
|
postConsultationStop |
|
|
|
|
} from "@/api/videoCommunication"; |
|
|
|
|
export default { |
|
|
|
|
name: "MeetingRoom", |
|
|
|
|
components: { |
|
|
|
|
@ -281,6 +237,7 @@ export default { |
|
|
|
|
frameRate: 25, |
|
|
|
|
networkDelay: 0, |
|
|
|
|
networkQuality: { text: "良好", color: "#00e676" }, |
|
|
|
|
consultation_id: null, |
|
|
|
|
|
|
|
|
|
// ==================== 计时器 ==================== |
|
|
|
|
timer: 0, |
|
|
|
|
@ -350,8 +307,29 @@ export default { |
|
|
|
|
mounted() { |
|
|
|
|
this.initPage(); |
|
|
|
|
this.initSDK(); |
|
|
|
|
if (this.$route.query.roomId_id) this.creatRoom() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
async creatRoom() { |
|
|
|
|
try { |
|
|
|
|
const res = await postConsultationCreate({ |
|
|
|
|
avatar: '', |
|
|
|
|
init_users: [], |
|
|
|
|
invite_code: '1234', |
|
|
|
|
name: '', |
|
|
|
|
room_id: this.$route.query.roomId_id |
|
|
|
|
}) |
|
|
|
|
console.log(res) |
|
|
|
|
this.consultation_id = res.data.consultation_id |
|
|
|
|
await postConsultationInfo({ |
|
|
|
|
consultation_id: res.data.consultation_id, |
|
|
|
|
from_history: 0, |
|
|
|
|
room_id: '' |
|
|
|
|
}) |
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// ==================== 【1】初始化 ==================== |
|
|
|
|
initPage() { |
|
|
|
|
this.loadLocalSetting(); |
|
|
|
|
@ -606,7 +584,7 @@ export default { |
|
|
|
|
this.isSharing = false; |
|
|
|
|
this.$refs.shareVideo.srcObject = null; |
|
|
|
|
this.$message.info("已停止共享"); |
|
|
|
|
window.hirtcwebsdk?.unPublishScreen(); |
|
|
|
|
window.hirtcwebsdk?.unpublish(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// ==================== 【5】录制 ==================== |
|
|
|
|
@ -632,9 +610,8 @@ export default { |
|
|
|
|
const url = URL.createObjectURL(blob); |
|
|
|
|
const a = document.createElement("a"); |
|
|
|
|
a.href = url; |
|
|
|
|
a.download = `${ |
|
|
|
|
this.meetingTitle |
|
|
|
|
}录制_${new Date().toLocaleString()}.webm`; |
|
|
|
|
a.download = `${this.meetingTitle |
|
|
|
|
}录制_${new Date().toLocaleString()}.webm`; |
|
|
|
|
document.body.appendChild(a); |
|
|
|
|
a.click(); |
|
|
|
|
document.body.removeChild(a); |
|
|
|
|
@ -695,20 +672,20 @@ export default { |
|
|
|
|
|
|
|
|
|
// ==================== 【7】网络状态监控 ==================== |
|
|
|
|
startNetworkMonitoring() { |
|
|
|
|
setInterval(() => { |
|
|
|
|
if (!window.hirtcwebsdk) return; |
|
|
|
|
const s = window.hirtcwebsdk.getNetworkStats(); |
|
|
|
|
if (s?.rtt) { |
|
|
|
|
this.networkDelay = Math.round(s.rtt); |
|
|
|
|
if (this.networkDelay < 100) |
|
|
|
|
this.networkQuality = { text: "优秀", color: "#00e676" }; |
|
|
|
|
else if (this.networkDelay < 300) |
|
|
|
|
this.networkQuality = { text: "良好", color: "#00e676" }; |
|
|
|
|
else if (this.networkDelay < 600) |
|
|
|
|
this.networkQuality = { text: "一般", color: "#ffc107" }; |
|
|
|
|
else this.networkQuality = { text: "差", color: "#f56c6c" }; |
|
|
|
|
} |
|
|
|
|
}, 2000); |
|
|
|
|
// setInterval(() => { |
|
|
|
|
// if (!window.hirtcwebsdk) return; |
|
|
|
|
// const s = window.hirtcwebsdk.getNetworkStats(); |
|
|
|
|
// if (s?.rtt) { |
|
|
|
|
// this.networkDelay = Math.round(s.rtt); |
|
|
|
|
// if (this.networkDelay < 100) |
|
|
|
|
// this.networkQuality = { text: "优秀", color: "#00e676" }; |
|
|
|
|
// else if (this.networkDelay < 300) |
|
|
|
|
// this.networkQuality = { text: "良好", color: "#00e676" }; |
|
|
|
|
// else if (this.networkDelay < 600) |
|
|
|
|
// this.networkQuality = { text: "一般", color: "#ffc107" }; |
|
|
|
|
// else this.networkQuality = { text: "差", color: "#f56c6c" }; |
|
|
|
|
// } |
|
|
|
|
// }, 2000); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// ==================== 【8】设置模块 ==================== |
|
|
|
|
@ -797,6 +774,8 @@ export default { |
|
|
|
|
key: "tagsView", |
|
|
|
|
value: true, |
|
|
|
|
}); |
|
|
|
|
postConsultationStop({ consultation_id: this.consultation_id }); |
|
|
|
|
|
|
|
|
|
this.$router.push("/"); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
@ -813,6 +792,8 @@ export default { |
|
|
|
|
key: "tagsView", |
|
|
|
|
value: true, |
|
|
|
|
}); |
|
|
|
|
postConsultationStop({ consultation_id: this.consultation_id }); |
|
|
|
|
|
|
|
|
|
window.name === "consultationWindow" |
|
|
|
|
? window.close() |
|
|
|
|
: this.$router.push("/"); |
|
|
|
|
@ -1018,9 +999,11 @@ export default { |
|
|
|
|
0% { |
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
50% { |
|
|
|
|
opacity: 0.5; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
|