metting/src/views/home/components/Device.vue

<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 { reactive, toRefs, onMounted, defineComponent } from 'vue'
export default defineComponent({
  name: 'DeviceSelect',
  props: {
    deviceType: {
      type: String,
      default: () => {}
    },
    value: {
      type: String,
      default: () => {}
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const data = reactive({
      deviceList: [],
      activeDeviceId: ''
    })

    const getDeviceList = async() => {
      switch (props.deviceType) {
        case 'camera':
          data.deviceList = await TRTC.getCameras()
          break
        case 'microphone':
          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)
    }

    const handleReverse = () => {
      const index = data.deviceList.findIndex((item) => item.deviceId === data.activeDeviceId)
      if (data.deviceList.length === 1) {
        emit('update:value', data.activeDeviceId)
      } else if (index === data.deviceList.length - 1) {
        data.activeDeviceId = data.deviceList[index - 1].deviceId
        emit('update:value', data.activeDeviceId)
      } else {
        data.activeDeviceId = data.deviceList[index + 1].deviceId
        emit('update:value', data.activeDeviceId)
      }
    }

    onMounted(() => {
      navigator.mediaDevices.getUserMedia({ audio: true, video: true })
        .then(() => {
          getDeviceList()
        })
      // navigator.mediaDevices.addEventListener('devicechange', this.getDeviceList)
    })
    // beforeUnmount() {
    //   navigator.mediaDevices.removeEventListener('devicechange', this.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>