zhangtao
/
metting
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

view camera

This commit is contained in:
zhangtao 2022-10-22 10:22:57 +08:00
parent 54f189b4c4
commit 2698ba7007
1 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/home/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="room"> <div class="room">
<DeviceSelect v-show="false" v-model:value="cameraId" device-type="camera" /> <DeviceSelect v-model:value="cameraId" device-type="camera" />
<DeviceSelect v-show="false" v-model:value="microphoneId" device-type="microphone" /> <DeviceSelect v-model:value="microphoneId" device-type="microphone" />
<!-- 远端 --> <!-- 远端 -->
<div class="remote-container"> <div class="remote-container">
@ -19,6 +19,14 @@
<div id="localStream" class="local-stream-content" /> <div id="localStream" class="local-stream-content" />
<!-- 本地流操作栏 --> <!-- 本地流操作栏 -->
<div v-if="isPlayingLocalStream" class="local-stream-control"> <div v-if="isPlayingLocalStream" class="local-stream-control">
<div class="video-control control">
<n-icon v-if="!isReverseCamera" size="40" @click="handleVideoMute">
<CameraOutline />
</n-icon>
<n-icon v-if="isReverseCamera" size="40" @click="handleVideoUnMute">
<CameraReverseOutline />
</n-icon>
</div>
<div class="video-control control"> <div class="video-control control">
<n-icon v-if="!isMutedVideo" size="40" @click="handleVideoMute"> <n-icon v-if="!isMutedVideo" size="40" @click="handleVideoMute">
<VideocamOutline /> <VideocamOutline />
@ -48,7 +56,7 @@ import TRTC from 'trtc-js-sdk'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import DeviceSelect from './components/Device.vue' import DeviceSelect from './components/Device.vue'
import { reactive, toRefs, onMounted, watch, nextTick } from 'vue' import { reactive, toRefs, onMounted, watch, nextTick } from 'vue'
import { VideocamOutline, VideocamOffOutline } from '@vicons/ionicons5' import { CameraOutline, CameraReverseOutline, VideocamOutline, VideocamOffOutline } from '@vicons/ionicons5'
import { AudioOutlined, AudioMutedOutlined } from '@vicons/antd' import { AudioOutlined, AudioMutedOutlined } from '@vicons/antd'
import { isUndef } from '@/utils/is.js' import { isUndef } from '@/utils/is.js'
// import { Screen, ScreenOff } from '@vicons/carbon' // import { Screen, ScreenOff } from '@vicons/carbon'
@ -56,6 +64,8 @@ export default {
name: 'HomePage', name: 'HomePage',
components: { components: {
DeviceSelect, DeviceSelect,
CameraOutline,
CameraReverseOutline,
VideocamOutline, VideocamOutline,
VideocamOffOutline, VideocamOffOutline,
AudioOutlined, AudioOutlined,
@ -431,6 +441,21 @@ export default {
} }
} }
const handelCameraReverse = () => {
if (this.video) {
this.video.pause()
}
this.constraints.video.facingMode = this.isFront ? 'environment' : 'user'
const stream = this.video.srcObject
const tracks = stream.getTracks()
tracks.forEach(function(track) {
track.stop()
})
this.video.srcObject = null
this.init()
this.isFront = !this.isFront
}
onMounted(() => { onMounted(() => {
const { userId, roomId } = route.query const { userId, roomId } = route.query
data.userId = userId data.userId = userId
@ -438,11 +463,11 @@ export default {
}) })
watch(() => [settings.cameraId, settings.microphoneId], async([cameraId, microphoneId]) => { watch(() => [settings.cameraId, settings.microphoneId], async([cameraId, microphoneId]) => {
if (cameraId && microphoneId) { if (cameraId && microphoneId) {
await createMeetingRoom() // await createMeetingRoom()
await joinMeetingRoom() // await joinMeetingRoom()
await initLocalStream() // await initLocalStream()
await playLocalStream() // await playLocalStream()
await publishStream() // await publishStream()
} }
}) })
@ -454,6 +479,7 @@ export default {
handleVideoUnMute, handleVideoUnMute,
handleAudioMute, handleAudioMute,
handleAudioUnMute, handleAudioUnMute,
handelCameraReverse,
leaveMeetingRoom leaveMeetingRoom
} }
} }