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

好的，首先你需要安装 Vue 和 Element。你可以在 Vue 官网和 Element 官网中找到具体的安装方法。

完成安装后，可以按照以下步骤来生成视频会议 UI 界面：

1. 在 Vue 中创建一个组件，用于展示视频画面和控制按钮。
2. 在组件中使用 Element 的布局组件，如 Row 和 Col，来布置视频画面和控制按钮的位置。
3. 使用 Element 的组件，如 Button、Icon、Input 等，来实现视频会议所需的各种功能。
4. 使用 Vue 的生命周期函数，如 mounted 和 destroyed，来初始化和销毁视频会议相关的资源。

下面是一个简单的视频会议 UI 界面的示例代码：

<template>
  <div>
    <el-row>
      <el-col :span="18">
        <video ref="localVideo" autoplay></video>
        <video ref="remoteVideo" autoplay></video>
      </el-col>
      <el-col :span="6">
        <el-button icon="el-icon-camera" @click="toggleCamera"></el-button>
        <el-button icon="el-icon-microphone" @click="toggleMicrophone"></el-button>
        <el-button icon="el-icon-phone" @click="hangUp"></el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      localStream: null,
      remoteStream: null
    }
  },
  mounted() {
    this.init();
  },
  destroyed() {
    this.hangUp();
  },
  methods: {
    async init() {
      try {
        const localStream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true
        });
        this.$refs.localVideo.srcObject = localStream;
        this.localStream = localStream;
      } catch (err) {
        console.error(err);
      }
    },
    toggleCamera() {
      const tracks = this.localStream.getVideoTracks();
      tracks.forEach(track => {
        track.enabled = !track.enabled;
      });
    },
    toggleMicrophone() {
      const tracks = this.localStream.getAudioTracks();
      tracks.forEach(track => {
        track.enabled = !track.enabled;
      });
    },
    hangUp() {
      if (this.localStream) {
        this.localStream.getTracks().forEach(track => {
          track.stop();
        });
        this.localStream = null;
        this.$refs.localVideo.srcObject = null;
      }
      if (this.remoteStream) {
        this.remoteStream.getTracks().forEach(track => {
          track.stop();
        });
        this.remoteStream = null;
        this.$refs.remoteVideo.srcObject = null;
      }
    }
  }
}
</script>

在这个示例中，我们使用了 Element 中的 Row、Col 和 Button 组件，来实现视频画面和控制按钮的布局。同时，我们使用了 Vue 的生命周期函数 mounted 和 destroyed 来初始化和销毁视频会议相关的资源。

在 init 方法中，我们使用了 navigator.mediaDevices.getUserMedia 方法来获取本地的音视频流，并将其展示在页面上。在 toggleCamera 和 toggleMicrophone 方法中，我们可以通过获取音视频流的轨道，来控制摄像头和麦克风的开关。在 hangUp 方法中，我们停止了所有的音视频轨道，并将展示视频的 video 标签的 srcObject 属性设为 null。

当然，这只是一个简单的示例代码，你可以根据自己的需求进行修改和扩展。