使用vue+七牛云实时音视频SDK 编写一套美观的web浏览器端可以使用的会议界面

首先，你需要在七牛云控制台中创建一个实时音视频应用并获取 AppID 和 AppKey，以便在后续开发中使用。

接下来，你可以使用 Vue.js 框架来编写前端界面，并集成七牛云的实时音视频 SDK。

以下是一个简单的界面示例：

<template>
  <div>
    <div class="video-container">
      <div class="local-video">
        <video ref="localVideo" autoplay></video>
      </div>
      <div v-for="remote in remotes" :key="remote.uid" class="remote-video">
        <video :id="'remote-' + remote.uid" autoplay></video>
      </div>
    </div>
    <div class="controls">
      <button @click="joinRoom">加入房间</button>
      <button @click="leaveRoom">离开房间</button>
    </div>
  </div>
</template>

<script>
import { AgoraRTCClient } from "agora-rtc-sdk-ng";

export default {
  data() {
    return {
      client: null,
      localStream: null,
      remotes: []
    }
  },
  mounted() {
    this.initClient();
  },
  methods: {
    async initClient() {
      this.client = new AgoraRTCClient();
      await this.client.createClient({ mode: "rtc", codec: "vp8" });
      this.client.on("user-published", this.handleUserPublished);
      this.client.on("user-unpublished", this.handleUserUnpublished);
    },
    async joinRoom() {
      const uid = await this.client.join(this.appID, this.channel, this.token, null);
      this.localStream = await AgoraRTC.createCameraVideoTrack();
      await this.client.publish(this.localStream);
      this.$refs.localVideo.srcObject = this.localStream.stream;
    },
    async leaveRoom() {
      await this.client.leave();
      this.remotes = [];
      this.localStream.stop();
      this.localStream.close();
    },
    async handleUserPublished(user, mediaType) {
      if (mediaType === "video") {
        const remoteStream = await this.client.subscribe(user, mediaType);
        const uid = user.uid;
        this.remotes.push({ uid, stream: remoteStream });
        const videoElement = document.getElementById(`remote-${uid}`);
        videoElement.srcObject = remoteStream.stream;
      }
    },
    handleUserUnpublished(user) {
      const uid = user.uid;
      this.remotes = this.remotes.filter(remote => remote.uid !== uid);
      const videoElement = document.getElementById(`remote-${uid}`);
      videoElement.srcObject = null;
    }
  }
}
</script>

<style>
.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.local-video {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 240px;
  height: 180px;
  background-color: #000;
}

.remote-video {
  margin: 0 10px;
  width: 240px;
  height: 180px;
  background-color: #000;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

在上述代码中，我们使用了七牛云提供的实时音视频 SDK 的 AgoraRTCClient 类来创建客户端，并通过创建本地流和加入房间的方法加入了实时音视频会议。我们还通过订阅其他用户发布的流来显示他们的视频。

最后，我们通过 CSS 来美化界面，使其更加美观。

需要注意的是，这只是一个简单的示例，你需要根据实际需求进行更多的开发和优化。