1. uniapp实现一对一视频通话的基本准备工作
在开始实现一对一视频通话之前，我们需要准备一些必要的工作。首先，我们需要安装uni-app的开发环境，这样才能创建我们的uniapp项目。其次，我们需要有视频通话所需的服务器，常见的有agora、twilio等等，在本文中以agora为例进行讲解。还需要注意的是，用户双方需要有一个唯一的ID来进行通话，可以通过注册账户或者使用第三方账号实现。
2. 创建uniapp项目并配置
创建uniapp项目很简单，只需打开HBuilder X，点击“新建项目”按钮，选择“uni-app”，填写项目名称、目录等相关信息即可。接下来我们需要对项目进行一些配置，如引入所需的插件（vue-router、vuex等），建立后台接口等。
// 安装相关插件
npm install -g @vue/cli-service-global
npm install --save uni-simple-router
npm install --save vuex
// 配置后台接口地址等
const baseUrl = process.env.NODE_ENV === 'development'?'http://localhost:3000':'http://onlineurl.com'
// 配置文件具体如下
module.exports = {
baseUrl: baseUrl,
devServer: {
proxy: {
'/api':{
target: baseUrl,
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '',
}
}
}
}
}
3. 导入agora插件
3.1 引入相关代码和文件
在uniapp中，我们可以使用npm或手动下载的方式导入agora插件。在本文中，我们将使用手动下载并导入的方式。首先，我们需要将agoraSDK.js文件下载到本地，并导入到项目目录下的static目录下。接着在index.html文件中引入agoraSDK.js，代码如下：
<!-- 在index.html中引入agoraSDK.js -->
<script type="text/javascript" src="static/agoraSDK.js"></script>
进入到我们的页面中，在需要的页面中引入agora-web-sdk-ng插件，我们也可以通过npm安装agora-web-sdk-ng，建议使用官方提供的插件以保障插件的稳定性。
// 在需要使用插件的页面中引入
import AgoraRTC from '@/lib/agora-web-sdk-ng'
3.2 初始化agora SDK
接下来，我们需要对agora SDK进行初始化。在程序的开始部分，我们需要使用appID对SDK进行初始化配置，代码如下：
// 初始化agora SDK
AgoraRTC.init({
appId: 'your_appID_here',
encodingLog: false,
decoderPath: '',
logLevel: AgoraRTC.LOG_LEVEL_WARN,
useWebGPU: true
})
appID是客户端初始化Agora SDK时所必需的。开发者在官网注册项目时会得到一个appID，在后面的开发中需要用到。在这里，我们使用AgoraRTC的init方法对其进行初始化，并将其中的appId赋为注册时获取到的id。
4. 实现一对一视频通话
4.1 获取本地媒体流
在进行视频通话前，我们需要首先获取本地的媒体流，并对其进行一些设置，以便于进行视频通话。代码如下：
// 获取本地媒体流
const stream = AgoraRTC.createStream({
streamID: this.uid,
video: true,
audio: true,
screen: false,
cameraId: null,
microphoneId: null,
videoProfile: '720p_2',
mode: 'rtc'
})
// 初始化本地流
stream.init(function() {
console.log('stream initialized')
}, function(err) {
console.log(err)
})
在上述代码中，我们使用AgoraRTC的createStream方法获取本地的媒体流，并为其进行一些设置，例如设置streamID、video、audio、screen等。其中，streamID必须是唯一的，视频和音频均需开启。视频通话设置中，我们可以通过设置videoProfile来进行视频质量的调整。在视频质量较高的情况下，建议使用720p或更高分辨率，但需要注意客户端网络和性能的限制。通过调用init方法，我们可以初始化本地的流。
4.2 加入RTC频道
接下来，我们需要将客户端加入RTC频道以进行视频通话。代码如下：
// 加入RTC频道
AgoraRTC.createClient({
mode: 'rtc',
codec: 'vp8'
}).then(client => {
client.on('user-joined', function(user) {
console.log('user-joined', user)
})
client.on('user-published', function(user, mediaType) {
console.log('user-published', user, mediaType)
})
return client.join('your_token_here', 'your_channel_name_here', null, this.uid)
}).then(uid => {
console.log('join channel success', uid)
// 将本地流发布到频道上
this.client = client
this.localStream = stream
this.localStream.play('local_stream')
return this.client.publish(this.localStream)
}).catch(err => {
console.log(err)
})
在上述代码中，我们首先通过AgoraRTC的createClient方法创建客户端，并为其进行一些设置。在这里，我们设置客户端的模式为rtc模式，编解码格式为vp8。在之前的代码中，我们通过客户端的on方法监听了user-joined、user-published等事件。当有用户加入或发布时，将分别在控制台中打印相关信息。接着，我们通过client.join方法加入RTC频道，其中token为频道的令牌，频道名需自己设定，uid为用户ID，需在本地设置唯一值，不建议使用0。在加入成功后，我们将本地流发布到频道上，并将client和本地流保存下来，方便后续调用。客户端可以通过publish方法来发布媒体流。
4.3 监听远端媒体流
在实现视频通话时，我们不仅需要获得本地的媒体流，还需要获取远端的媒体流，因为双方都需要进行通话。代码如下：
client.on('stream-subscribed', function(evt) {
const remoteStream = evt.stream
console.log('stream-subscribed remote-uid: ', remoteStream.getId())
const id = remoteStream.getId()
if ($('#video-item-' + id).length === 0) {
$('#video-list').append('<div id="video-item-' + id + '"><span class="remove-video-item">X</span><div id="video-' + id + '"></div>remote-' + id + '</div>')
}
remoteStream.play('video-' + id)
})
在上述代码中，我们监听了由服务器发出的stream-subscribed事件，当有远端用户发布流时，将在控制台中打印相关信息。我们将远端流的id赋给一个变量，如果当前视频流不存在，则将其添加到页面上，并为其设置播放区域，此处元素的ID设置需要与页面元素保持一致。远端流可以通过play方法来播放。
4.4 离开RTC频道
最后，我们需要为用户提供离开频道的功能，以便于退出视频通话。代码如下：
leaveChannel() {
this.client.leave()
console.log('离开频道')
}
5. 总结和注意事项
通过以上的操作，我们就可以实现uniapp中的一对一视频通话了。在使用过程中，我们需要注意一些需要注意的事项，例如流的初始化、频道的加入和离开、流的播放、客户端的关闭等。同时，在使用agora插件时，需要提供相关的appID等信息，如果出现问题需要和客服人员进行联系。