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

Compare commits

base: zhangtao:master
Branches Tags
zhangtao:master
zhangtao:develop
..
compare: zhangtao:develop
Branches Tags
zhangtao:master
zhangtao:develop

No commits in common. "master" and "develop" have entirely different histories.
master ... develop

9 changed files with 71 additions and 304 deletions
Show Stats Expand all files Collapse all files

2
.env
View File

@ -1,5 +1,5 @@
# title # title
VITE_APP_TITLE = '视频会议' VITE_APP_TITLE = 'h5'
# 端口号 # 端口号
VITE_PORT = 3000 VITE_PORT = 3000

2
index.html
View File

@ -10,8 +10,6 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<title><%= title %></title> <title><%= title %></title>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

1
public/DYFRqZwcf2.txt
View File

@ -1 +0,0 @@
db957f82a208d53cdaeff928dd554022

2
src/style.css
View File

@ -37,6 +37,8 @@ body {
margin: 0; margin: 0;
display: flex; display: flex;
place-items: center; place-items: center;
min-width: 320px;
min-height: 100vh;
} }
h1 { h1 {

5
src/styles/public.scss
View File

@ -3,11 +3,10 @@ html {
} }
html, html,
body,#app{ body {
width: 100%; width: 100%;
min-width: 1440px;
height: 100%; height: 100%;
margin: 0;
padding: 0;
overflow: hidden; overflow: hidden;
background-color: #f2f2f2; background-color: #f2f2f2;
font-family: 'Encode Sans Condensed', sans-serif; font-family: 'Encode Sans Condensed', sans-serif;

88
src/views/home/components/Device.vue
View File

@ -1,71 +1,75 @@
<template> <template>
<div class="select-container" /> <div class="select-container">
<n-select
v-model:value="activeDeviceId"
class="select"
:placeholder="deviceType"
:options="deviceList"
value-field="deviceId"
@update:value="handleChange"
/>
</div>
</template> </template>
<script> <script>
import TRTC from 'trtc-js-sdk' import TRTC from 'trtc-js-sdk'
import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue' import { reactive, toRefs, onMounted, defineComponent } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'DeviceSelect', name: 'DeviceSelect',
props: { props: {
deviceType: {
type: String,
default: () => {}
},
value: {
type: String,
default: () => {}
}
}, },
emits: ['init', 'switch'], emits: ['update:value'],
setup(props, { emit }) { setup(props, { emit }) {
const data = reactive({ const data = reactive({
videoList: [], deviceList: [],
audioList: [], activeDeviceId: ''
videoDeviceId: '',
audioDeviceId: ''
}) })
const getDeviceList = async() => { const getDeviceList = async() => {
data.videoList = await TRTC.getCameras() switch (props.deviceType) {
data.audioList = await TRTC.getMicrophones() case 'camera':
data.videoDeviceId = data.videoList[0]?.deviceId || '' data.deviceList = await TRTC.getCameras()
data.audioDeviceId = data.audioList[0]?.deviceId || '' break
emit('init', { case 'microphone':
cameraId: data.videoDeviceId, data.deviceList = await TRTC.getMicrophones()
microphoneId: data.audioDeviceId break
}) case 'speaker':
data.deviceList = await TRTC.getSpeakers()
break
default:
break
}
data.activeDeviceId = data.deviceList[0].deviceId
emit('update:value', data.activeDeviceId)
} }
const handleCameraReverse = () => { const handleChange = (value) => {
const index = data.videoList.findIndex((item) => item.deviceId === data.videoDeviceId) data.activeDeviceId = value
const len = data.videoList.length emit('update:value', data.activeDeviceId)
if (len <= 1) {
return
} else if (index === 0) {
data.videoDeviceId = data.videoList[len - 1].deviceId
emit('init', {
cameraId: data.videoDeviceId,
microphoneId: data.audioDeviceId
})
emit('switch', { type: 'video', cameraId: data.videoDeviceId, isMirror: false })
} else {
data.videoDeviceId = data.videoList[0].deviceId
emit('init', {
cameraId: data.videoDeviceId,
microphoneId: data.audioDeviceId
})
emit('switch', { type: 'video', cameraId: data.videoDeviceId, isMirror: true })
}
} }
onMounted(() => { onMounted(() => {
navigator.mediaDevices.getUserMedia({ audio: true, video: true }) navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then((res) => { .then(() => {
getDeviceList() getDeviceList()
}) })
navigator.mediaDevices.addEventListener('devicechange', getDeviceList) // navigator.mediaDevices.addEventListener('devicechange', this.getDeviceList)
})
onBeforeUnmount(() => {
navigator.mediaDevices.removeEventListener('devicechange', getDeviceList)
}) })
// beforeUnmount() {
// navigator.mediaDevices.removeEventListener('devicechange', this.getDeviceList)
// }
return { return {
...toRefs(data), ...toRefs(data),
handleCameraReverse handleChange
} }
} }

127
src/views/home/components/DeviceSelect.vue
View File

@ -1,127 +0,0 @@
<template>
<div class="select-container">
<n-select
v-model:value="activeDeviceId"
class="select"
:placeholder="deviceType"
:options="deviceList"
value-field="deviceId"
@update:value="handleChange"
/>
</div>
</template>
<script>
import TRTC from 'trtc-js-sdk'
import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'
export default defineComponent({
name: 'DeviceSelect',
props: {
deviceType: {
type: String,
default: () => {}
},
value: {
type: String,
default: () => {}
}
},
emits: ['update:value', 'switch'],
setup(props, { emit }) {
const data = reactive({
deviceList: [],
activeDeviceId: ''
})
const getDeviceList = async() => {
switch (props.deviceType) {
case 'video':
data.deviceList = await TRTC.getCameras()
break
case 'audio':
data.deviceList = await TRTC.getMicrophones()
break
case 'speaker':
data.deviceList = await TRTC.getSpeakers()
break
default:
break
}
data.activeDeviceId = data.deviceList[0].deviceId
emit('update:value', data.activeDeviceId)
}
const handleChange = (value) => {
data.activeDeviceId = value
emit('update:value', data.activeDeviceId)
emit('switch', { type: props.deviceType, deviceId: data.activeDeviceId })
}
const handleReverse = () => {
const index = data.deviceList.findIndex((item) => item.deviceId === data.activeDeviceId)
if (data.deviceList.length === 1) {
return
} else if (index === 0) {
data.activeDeviceId = data.deviceList[1].deviceId
emit('update:value', data.activeDeviceId)
emit('switch', { type: props.deviceType, deviceId: data.activeDeviceId })
} else {
data.activeDeviceId = data.deviceList[0].deviceId
emit('update:value', data.activeDeviceId)
emit('switch', { type: props.deviceType, deviceId: data.activeDeviceId })
}
}
onMounted(() => {
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then((res) => {
console.log(res)
getDeviceList()
})
navigator.mediaDevices.addEventListener('devicechange', getDeviceList)
})
onBeforeUnmount(() => {
navigator.mediaDevices.removeEventListener('devicechange', getDeviceList)
})
return {
...toRefs(data),
handleChange,
handleReverse
}
}
})
</script>
<style lang="scss" scoped>
.select-container {
display: flex;
.label {
display: inline-block;
padding: 0 20px;
width: 120px;
height: 40px;
text-align: left;
line-height: 40px;
border-top: 1px solid #DCDFE6;
border-left: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
border-radius: 4px 0 0 4px;
color: #909399;
background-color: #F5F7FA;
font-weight: bold;
}
.select {
flex-grow: 1;
}
}
</style>
<style lang="scss">
.select {
input {
border-radius: 0 4px 4px 0 !important;
}
}
</style>

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

@ -1,8 +1,7 @@
<template> <template>
<div class="room"> <div class="room">
<!-- <DeviceSelect v-show="false" ref="cameraRef" v-model:value="cameraId" device-type="video" @switch="handleCamareSwitch" /> --> <DeviceSelect v-show="false" v-model:value="cameraId" device-type="camera" />
<!-- <DeviceSelect v-show="false" v-model:value="microphoneId" device-type="audio" /> --> <DeviceSelect v-show="false" v-model:value="microphoneId" device-type="microphone" />
<Device ref="cameraRef" @init="deviceInit" @switch="handleCamareSwitch" />
<!-- 远端 --> <!-- 远端 -->
<div class="remote-container"> <div class="remote-container">
@ -20,11 +19,6 @@
<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 size="40" @click="handelCameraReverse">
<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 />
@ -52,21 +46,16 @@
<script> <script>
import TRTC from 'trtc-js-sdk' import TRTC from 'trtc-js-sdk'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import Device from './components/Device.vue' import DeviceSelect from './components/Device.vue'
// import DeviceSelect from './components/DeviceSelect.vue' import { reactive, toRefs, onMounted, watch, nextTick } from 'vue'
import { ref, reactive, toRefs, onMounted, onBeforeUnmount, watch, nextTick } from 'vue' import { VideocamOutline, VideocamOffOutline } from '@vicons/ionicons5'
import { 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 { formatDateTime } from '@/utils/index.js'
import axios from 'axios'
// import { Screen, ScreenOff } from '@vicons/carbon' // import { Screen, ScreenOff } from '@vicons/carbon'
export default { export default {
name: 'HomePage', name: 'HomePage',
components: { components: {
Device, DeviceSelect,
// DeviceSelect,
CameraReverseOutline,
VideocamOutline, VideocamOutline,
VideocamOffOutline, VideocamOffOutline,
AudioOutlined, AudioOutlined,
@ -74,19 +63,17 @@ export default {
}, },
setup() { setup() {
const route = useRoute() const route = useRoute()
const cameraRef = ref()
const data = reactive({ const data = reactive({
hasInit: false,
client: null, client: null,
timer: null,
sdkAppId: 1400752641, sdkAppId: 1400752641,
sdkSecret: '9b5fc557f286d7e4d6eafd8023026da59f0674000f319754aa1ec4beefddcdd6', sdkSecret: '9b5fc557f286d7e4d6eafd8023026da59f0674000f319754aa1ec4beefddcdd6',
userId: null, userId: '',
userSig: null,
roomId: null, roomId: null,
taskId: null, secret: {
remoteStreamList: [], 'haoran': 'eJwtzEELgjAYxvHvsqsh29ymCB28hIIElZR1G2y1ty2VJSVE3z1Tj8-vgf8HVeUhfGmPUkRDjFbTBqWbHq4wsZGtl83yPJWVXQcKpYRhHHMqGJkfPXTg9eicc4oxnrWHx9*EEFHECGVLBW5jWMn6HCRBW7njJd*WNgNrNrnbFXcZG356V94Vg7W12ydr9P0BbGAyOQ__',
isMirror: true 'wanghaoran': 'eJwtzEELgjAcBfDvsnO4ubnFhA6ihwIhUqEOXhZO*6dNUalF9N0z9fh*7-E*KItT56l75CPqELSZMxTajFDCzC9lqptqe2XWdihq1XVQIN-1CNlyKjx3abTtoNeTc84pIWTRER5-E0IwVwq5bgeopnPPRDluaVPGTb1P3nd7CcPMHgJ2zbFJ5HCKrDkHxzLHMmX1Dn1-G3A0Zg__'
},
remoteStreamList: []
}) })
const settings = reactive({ const settings = reactive({
@ -111,7 +98,7 @@ export default {
data.client = TRTC.createClient({ data.client = TRTC.createClient({
sdkAppId: data.sdkAppId, // 填写您申请的 sdkAppId sdkAppId: data.sdkAppId, // 填写您申请的 sdkAppId
userId: data.userId, // 填写您业务对应的 userId userId: data.userId, // 填写您业务对应的 userId
userSig: data.userSig, // 填写服务器或本地计算的 userSig userSig: data.secret[data.userId], // 填写服务器或本地计算的 userSig
mode: 'rtc' mode: 'rtc'
}) })
handleClientEvents() handleClientEvents()
@ -128,10 +115,6 @@ export default {
status.isJoining = false status.isJoining = false
status.isJoined = true status.isJoined = true
startGetAudioLevel() startGetAudioLevel()
updateUsers(2)
data.timer = setInterval(async() => {
await heartbeat()
}, 5000)
} catch (error) { } catch (error) {
status.isJoining = false status.isJoining = false
console.error('join room failed', error) console.error('join room failed', error)
@ -310,10 +293,7 @@ export default {
* @return {*} * @return {*}
*/ */
const playLocalStream = async() => { const playLocalStream = async() => {
if (settings.localStream && settings.isPlayingLocalStream) { settings.localStream.play('localStream')
settings.isPlayingLocalStream = false
}
settings.localStream.play('localStream', { mirror: data.isMirror })
.then(() => { .then(() => {
settings.isPlayingLocalStream = true settings.isPlayingLocalStream = true
}) })
@ -425,24 +405,6 @@ export default {
data.client && data.client.enableAudioVolumeEvaluation(-1) data.client && data.client.enableAudioVolumeEvaluation(-1)
} }
/**
* @description: 切换音频
* @param {*} type
* @param {*} cameraId
* @return {*}
*/
const handleCamareSwitch = ({ type, cameraId, isMirror = true }) => {
try {
if (settings.localStream) {
data.isMirror = isMirror
settings.localStream.switchDevice(type, cameraId)
playLocalStream()
}
} catch (error) {
console.error('switchDevice failed', error)
}
}
/** /**
* @description: 退出直播间 * @description: 退出直播间
* @return {*} * @return {*}
@ -460,7 +422,6 @@ export default {
await data.client.leave() await data.client.leave()
status.isLeaving = false status.isLeaving = false
status.isJoined = false status.isJoined = false
wx.miniProgram.switchTab({ url: '/pages/tool/tool' })
} catch (error) { } catch (error) {
status.isLeaving = false status.isLeaving = false
console.error('leave room error', error) console.error('leave room error', error)
@ -468,78 +429,13 @@ export default {
} }
} }
/** onMounted(() => {
* @description: 用户签名 const { userId, roomId } = route.query
* @return {*} data.userId = userId
*/
const handleSig = async() => {
const res = await axios.get(`/hhz/api/tencentCloudRtc/genUserSig/${data.userId}`)
if (res.data.code === 0) {
data.userSig = res.data.data.userSig
}
}
const updateUsers = async(status) => {
const params = {
roomUserId: data.taskId,
status
}
await axios.put(`/hhz/api/meeting/updatePeopleStatus`, params)
}
/**
* @description: 心跳，定时调用
* @param {*} status
* @return {*}
*/
const heartbeat = async() => {
const time = new Date().getTime()
const params = {
roomUserId: data.taskId,
heartbeatTime: formatDateTime(time)
}
await axios.put(`/hhz/api/meeting/heartbeatTime`, params)
}
/**
* @description: 翻转摄像头
* @return {*}
*/
const handelCameraReverse = () => {
if (!status.isMutedVideo) {
cameraRef.value.handleCameraReverse()
}
}
onMounted(async() => {
const { userId, roomId, taskId } = route.query
data.userId = String(userId)
data.roomId = Number(roomId) data.roomId = Number(roomId)
data.taskId = Number(taskId)
await handleSig()
}) })
watch(() => [settings.cameraId, settings.microphoneId], async([cameraId, microphoneId]) => {
onBeforeUnmount(() => { if (cameraId && microphoneId) {
updateUsers(3)
clearInterval(data.timer)
data.timer = null
})
// watch(() => [settings.cameraId, settings.microphoneId], async([cameraId, microphoneId]) => {
// console.log('cameraId:' + cameraId, 'microphoneId:' + microphoneId)
// if (cameraId && microphoneId) {
// data.hasInit = true
// }
// })
const deviceInit = (device) => {
const { cameraId, microphoneId } = device
settings.cameraId = cameraId
settings.microphoneId = microphoneId
data.hasInit = true
}
watch(() => [data.hasInit, data.userSig], async([init, sig]) => {
if (init && sig) {
await createMeetingRoom() await createMeetingRoom()
await joinMeetingRoom() await joinMeetingRoom()
await initLocalStream() await initLocalStream()
@ -552,14 +448,10 @@ export default {
...toRefs(data), ...toRefs(data),
...toRefs(settings), ...toRefs(settings),
...toRefs(status), ...toRefs(status),
cameraRef,
deviceInit,
handleVideoMute, handleVideoMute,
handleVideoUnMute, handleVideoUnMute,
handleAudioMute, handleAudioMute,
handleAudioUnMute, handleAudioUnMute,
handelCameraReverse,
handleCamareSwitch,
leaveMeetingRoom leaveMeetingRoom
} }
} }

2
src/views/login/index.vue
View File

@ -23,7 +23,7 @@ export default {
const data = reactive({ const data = reactive({
form: { form: {
userId: 'wanghaoran', userId: 'wanghaoran',
roomId: '111' roomId: 111
} }
}) })