用vue、element、七牛云qnweb-rtc 生成一套视屏会议完整功能

要实现这个功能，你需要进行以下步骤：

1. 创建一个Vue项目并集成Element UI
2. 集成七牛云的qnweb-rtc SDK
3. 实现视频通话相关的功能，如呼叫、接听、挂断等
4. 实现房间管理，如创建房间、加入房间、离开房间等
5. 实现视频画面展示、音频播放、屏幕共享等功能

下面是一些详细的步骤：

1. 创建一个Vue项目并集成Element UI

首先，你需要使用Vue CLI创建一个新的Vue项目，使用命令行输入以下命令：

vue create my-project

然后，进入新项目的根目录，使用以下命令安装Element UI：

npm install element-ui -S

接着，在项目的入口文件`main.js`中引入Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. 集成七牛云的qnweb-rtc SDK

接下来，你需要集成七牛云的qnweb-rtc SDK。首先，在项目中安装SDK：

npm install qnweb-rtc -S

然后，在需要使用SDK的地方引入：

import QNRTC from 'qnweb-rtc'

3. 实现视频通话相关的功能

在实现视频通话相关的功能之前，你需要了解一些基本概念，如房间、用户等。通常，每个房间都有一个唯一的房间ID，用户通过房间ID加入房间，并与房间中的其他用户进行视频通话。

以下是一些示例代码，用于呼叫、接听和挂断：

// 呼叫
call(userId) {
  const rtc = new QNRTC({
    appId: 'your app id',
    userId: 'your user id',
    token: 'your token',
  })
  rtc.call(userId)
}

// 接听
answer() {
  const rtc = new QNRTC({
    appId: 'your app id',
    userId: 'your user id',
    token: 'your token',
  })
  rtc.answer()
}

// 挂断
hangup() {
  const rtc = new QNRTC({
    appId: 'your app id',
    userId: 'your user id',
    token: 'your token',
  })
  rtc.hangup()
}

4. 实现房间管理

在实现房间管理功能之前，你需要先创建一个房间，然后将用户加入到该房间中。以下是一个示例代码：

// 创建房间
createRoom(roomId) {
  const rtc = new QNRTC({
    appId: 'your app id',
    userId: 'your user id',
    token: 'your token',
  })
  rtc.createRoom(roomId)
}

// 加入房间
joinRoom(roomId) {
  const rtc = new QNRTC({
    appId: 'your app id',
    userId: 'your user id',
    token: 'your token',
  })
  rtc.joinRoom(roomId)
}

// 离开房间
leaveRoom(roomId) {
  const rtc = new QNRTC({
    appId: 'your app id',
    userId: 'your user id',
    token: 'your token',
  })
  rtc.leaveRoom(roomId)
}

5. 实现视频画面展示、音频播放、屏幕共享等功能

最后，你需要实现视频画面展示、音频播放、屏幕共享等功能。七牛云的qnweb-rtc SDK提供了一些API，可以帮助你实现这些功能。以下是一个示例代码：

// 获取本地视频流
const rtc = new QNRTC({
  appId: 'your app id',
  userId: 'your user id',
  token: 'your token',
})
const localStream = rtc.getLocalStream()

// 获取远程视频流
const remoteStream = rtc.getRemoteStream(userId)

// 播放视频流
const video = document.getElementById('video')
video.srcObject = localStream

// 播放音频流
const audio = document.getElementById('audio')
audio.srcObject = remoteStream.getAudioTracks()[0]

// 屏幕共享
rtc.startScreenShare()

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

总结

通过以上步骤，你可以使用Vue、Element UI和七牛云的qnweb-rtc SDK创建一个完整的视频会议系统。当然，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。