用vue 和 element 生成一份视频会议UI界面

好的，下面是一个简单的视频会议UI界面的示例代码，使用Vue和Element UI库实现：

<template>
  <div class="video-meeting">
    <el-row>
      <el-col :span="16">
        <div class="video-container">
          <video ref="localVideo" autoplay="autoplay"></video>
          <video ref="remoteVideo" autoplay="autoplay"></video>
        </div>
        <div class="btn-group">
          <el-button
            type="primary"
            icon="el-icon-video-camera"
            @click="toggleCamera"
            :disabled="!peerConnection"
          >
            {{ isCameraOn ? '关闭摄像头' : '开启摄像头' }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-microphone"
            @click="toggleMic"
            :disabled="!peerConnection"
          >
            {{ isMicOn ? '关闭麦克风' : '开启麦克风' }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-phone"
            @click="hangup"
            :disabled="!peerConnection"
          >
            挂断
          </el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <el-form :model="form" label-position="top" label-width="80px">
          <el-form-item label="会议号">
            <el-input v-model="form.meetingId"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="joinMeeting">加入会议</el-button>
          </el-form-item>
        </el-form>
        <ul v-if="userList.length" class="user-list">
          <li v-for="(user, index) in userList" :key="index">{{ user }}</li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'VideoMeeting',
  data() {
    return {
      form: {
        meetingId: '',
        username: ''
      },
      isCameraOn: true,
      isMicOn: true,
      peerConnection: null,
      localStream: null,
      remoteStream: null,
      userList: []
    }
  },
  computed: {
    ...mapState(['socket'])
  },
  created() {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(stream => {
      this.$refs.localVideo.srcObject = stream
      this.localStream = stream
    }).catch(error => {
      console.log(error)
    })
  },
  methods: {
    toggleCamera() {
      this.isCameraOn = !this.isCameraOn
      this.localStream.getVideoTracks()[0].enabled = this.isCameraOn
    },
    toggleMic() {
      this.isMicOn = !this.isMicOn
      this.localStream.getAudioTracks()[0].enabled = this.isMicOn
    },
    createPeerConnection() {
      const pcConfig = {
        iceServers: [
          {
            urls: 'stun:stun.l.google.com:19302'
          }
        ]
      }
      this.peerConnection = new RTCPeerConnection(pcConfig)
      this.peerConnection.onicecandidate = event => {
        if (event.candidate) {
          this.socket.emit('icecandidate', {
            meetingId: this.form.meetingId,
            username: this.form.username,
            candidate: event.candidate
          })
        }
      }
      this.peerConnection.onaddstream = event => {
        this.remoteStream = event.stream
        this.$refs.remoteVideo.srcObject = this.remoteStream
      }
      this.peerConnection.addStream(this.localStream)
    },
    joinMeeting() {
      this.createPeerConnection()
      this.socket.emit('joinMeeting', {
        meetingId: this.form.meetingId,
        username: this.form.username
      })
      this.socket.on('userList', userList => {
        this.userList = userList
      })
      this.socket.on('offer', async data => {
        try {
          await this.peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer))
          const answer = await this.peerConnection.createAnswer()
          await this.peerConnection.setLocalDescription(answer)
          this.socket.emit('answer', {
            meetingId: this.form.meetingId,
            username: this.form.username,
            answer: answer
          })
        } catch (error) {
          console.log(error)
        }
      })
      this.socket.on('answer', async data => {
        try {
          await this.peerConnection.setRemoteDescription(new RTCSessionDescription(data.answer))
        } catch (error) {
          console.log(error)
        }
      })
      this.socket.on('icecandidate', async data => {
        try {
          await this.peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate))
        } catch (error) {
          console.log(error)
        }
      })
    },
    hangup() {
      this.socket.emit('hangup', {
        meetingId: this.form.meetingId,
        username: this.form.username
      })
      this.peerConnection.close()
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.video-meeting {
  margin: 20px;
  .video-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 500px;
    video {
      max-width: 48%;
      max-height: 100%;
    }
  }
  .btn-group {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    button {
      margin: 0 10px;
    }
  }
  .user-list {
    margin-top: 20px;
    li {
      margin-bottom: 10px;
    }
  }
}
</style>

其中使用了WebRTC技术实现视频通话，需要在调用getUserMedia方法前获取用户授权。同时，需要使用Socket.io库实现用户加入和退出会议、发送和接收offer、answer和icecandidate等操作。在代码中，使用了Vuex来管理Socket.io实例，需要在store中定义state和mutations。

此外，还使用了Element UI库提供的组件，如Row、Col、Form、Input和Button等，使界面更加美观和易用。