forked from gzydong/LumenIM
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
259 additions
and
164 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,83 +1,61 @@ | ||
| <script lang="ts" setup> | ||
| import Menu from './component/Menu.vue' | ||
| import Sponsor from './component/Sponsor.vue' | ||
| import { useSettingsStore } from '@/store' | ||
| import { isElectronMode } from '@/utils/electron' | ||
| const settingsStore = useSettingsStore() | ||
| const isElectron = isElectronMode() | ||
| </script> | ||
|
|
||
| <template> | ||
| <section class="container flex-center"> | ||
| <section | ||
| class="el-container im-container" | ||
| :class="{ | ||
| 'small-screen': !settingsStore.isFullScreen | ||
| }" | ||
| > | ||
| <aside | ||
| class="el-aside app-drag" | ||
| :class="{ | ||
| 'pd-t15': isElectronMode() | ||
| }" | ||
| > | ||
| <Menu /> | ||
| </aside> | ||
| <main class="el-main"> | ||
| <router-view /> | ||
| </main> | ||
| </section> | ||
| <section class="el-container is-vertical im-container"> | ||
| <header v-if="isElectron" class="el-header app-header flex-center app-drag"> | ||
| LumenIM 在线聊天 | ||
| </header> | ||
| <main class="el-main"> | ||
| <section class="el-container"> | ||
| <aside class="el-aside"><Menu></Menu></aside> | ||
| <main class="el-main"><router-view /></main> | ||
| </section> | ||
| </main> | ||
| </section> | ||
|
|
||
| <Sponsor /> | ||
| </template> | ||
| <style lang="less" scoped> | ||
| .container { | ||
| .im-container { | ||
| height: 100vh; | ||
| width: 100vw; | ||
| background: url(@/assets/image/background.jpeg); | ||
| background-position: center center; | ||
| background-repeat: no-repeat; | ||
| background-attachment: fixed; | ||
| background-size: cover; | ||
| .im-container { | ||
| height: 100vh; | ||
| width: 100vw; | ||
| overflow: hidden; | ||
| background-color: #fff; | ||
| .el-aside { | ||
| width: 60px; | ||
| box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); | ||
| } | ||
| overflow: hidden; | ||
| background-color: #ffffff; | ||
| .app-header { | ||
| height: 28px; | ||
| background-color: #1890ff; | ||
| color: #ffffff; | ||
| font-size: 13px; | ||
| cursor: pointer; | ||
| user-select: none; | ||
| } | ||
| &.small-screen { | ||
| position: fixed; | ||
| width: 1000px; | ||
| height: 650px; | ||
| border-radius: 10px; | ||
| transition: all 0.5s; | ||
| } | ||
| .el-aside { | ||
| width: 60px; | ||
| box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); | ||
| } | ||
| } | ||
| html[theme-mode='dark'] { | ||
| .container { | ||
| background: unset; | ||
| .im-container { | ||
| background-color: unset; | ||
| .im-container { | ||
| background-color: unset; | ||
| .el-aside { | ||
| background-color: rgba(255, 255, 255, 0.05); | ||
| box-shadow: unset; | ||
| } | ||
| .app-header { | ||
| background-color: #383838; | ||
| color: #9d9696; | ||
| } | ||
| } | ||
| .small-screen { | ||
| border: 1px solid #494949; | ||
| .el-aside { | ||
| background-color: rgba(255, 255, 255, 0.05); | ||
| box-shadow: unset; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| <script lang="ts" setup> | ||
| import { ref } from 'vue' | ||
| import { NModal } from 'naive-ui' | ||
| const emit = defineEmits([]) | ||
| const show = ref(true) | ||
| const localStream = ref() | ||
| const remoteStream = ref() | ||
| const peerConnection = ref() | ||
| const remoteVideo = ref() | ||
| const localVideo = ref() | ||
| const startCall = async () => { | ||
| // 获取本地媒体流 | ||
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true }) | ||
| localStream.value = stream | ||
| // 将本地视频流绑定到video元素 | ||
| // @ts-ignore | ||
| localVideo.value.srcObject = localStream.value | ||
| // 初始化RTCPeerConnection | ||
| peerConnection.value = new RTCPeerConnection() | ||
| // 将本地媒体流添加到RTCPeerConnection | ||
| localStream.value | ||
| .getTracks() | ||
| .forEach((track) => peerConnection.value.addTrack(track, localStream.value)) | ||
| // 监听来自远端的IceCandidate | ||
| peerConnection.value.onicecandidate = ({ candidate }) => { | ||
| if (candidate) { | ||
| // 发送candidate到远端 | ||
| } | ||
| } | ||
| // 监听远端的media流 | ||
| peerConnection.value.ontrack = ({ streams: [stream] }) => { | ||
| remoteStream.value = stream | ||
| // 将远端视频流绑定到video元素 | ||
| remoteVideo.value.srcObject = remoteStream.value | ||
| } | ||
| // 创建offer | ||
| const offer = await peerConnection.value.createOffer() | ||
| await peerConnection.value.setLocalDescription(offer) | ||
| // // 发送offer到远端 | ||
| // // 远端接收offer，创建answer，并返回给你 | ||
| // const answer = /* 远端返回的answer */; | ||
| // // 设置远端的answer | ||
| // await peerConnection.value.setRemoteDescription(answer); | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <n-modal | ||
| v-model:show="show" | ||
| preset="card" | ||
| title="语音通话" | ||
| class="modal-radius" | ||
| style="max-width: 350px; height: 550px" | ||
| :segmented="{ | ||
| content: true, | ||
| footer: true | ||
| }" | ||
| :content-style="{ | ||
| padding: 0 | ||
| }" | ||
| > | ||
| <section class="el-container is-vertical launch-box"> | ||
| <button @click="startCall">发起视频通话</button> | ||
| <button @click="startCall">挂断</button> | ||
|
|
||
| <!-- 本地视频 --> | ||
| <video autoplay ref="localVideo" id="localVideo" muted playsinline class="local"></video> | ||
| <!-- 远端视频 --> | ||
| <video autoplay ref="remoteVideo" id="remoteVideo" playsinline class="remote"></video> | ||
| </section> | ||
|
|
||
| <template #footer> | ||
| <div class="footer"> | ||
| <div></div> | ||
|
|
||
| <div> | ||
| <n-button type="primary" text-color="#ffffff" class="mt-l15"> 确定 </n-button> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </n-modal> | ||
| </template> | ||
|
|
||
| <style lang="less" scoped> | ||
| .launch-box { | ||
| height: 410px; | ||
| width: 100%; | ||
| overflow: hidden; | ||
| } | ||
| .footer { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.