最终效果
在线预览地址
一、声网简介---->请查看官网
二、声网注册---->请自行百度（创建音视频连接需要在Agora注册属于您的appid）
三、具体实现视频聊天步骤
1、 实现音视频通话基本逻辑
1、创建对象
调用 createClient 方法创建 AgoraRTCClient 对象。
2、加入频道
调用 join 方法加入一个 RTC 频道，你需要在该方法中传入 App ID 、用户 ID、Token、频道名称 。
3、创建轨道
先调用createMicrophoneAudioTrack 通过麦克风采集的音频创建本地音频轨道对象；然后调用publish 方法，将本地音频轨道对象当作参数即可将音频发布到频道中。
4、订阅轨道
当用户加入频道并发布音频轨道时：
1、监听client.on(“user-published”) 事件。当 SDK 触发该事件时，在这个事件回调函数的参数中你可以获取远端用户 AgoraRTCRemoteUser 对象 。 2、调用 join subscribe 方法订阅远端用户 AgoraRTCRemoteUser 对象，获取远端用户的远端音频轨道 RemoteAudioTrack 对象。 3、调用 play 方法播放远端音频轨道。
第一种方式：基于以上基本步骤封装组件(可以参考官方示例代码对agora-rtc-sdk-ng进行封装)
第二种方式：通过agora-rtc-vue插件来实现
1、创建项目
我们使用@vue/cli 脚手架工具创建一个 Vue 2 版本的项目
vue create agora-demo
cd ./agora-demo
2、安装插件
npm i agora-rtc-sdk-ng agora-rtc-vue
3、在main.js中引入并添加如下代码
import AgoraRtcVue from 'agora-rtc-vue'
import 'agora-rtc-vue/lib/agora-rtc-vue.css'
Vue.use(AgoraRtcVue, {
appid: '09d2682bec254d8ebbb384c8ba0ac764' // Your App ID
// token: 'null' // Your temp token
})
注意：AppID在你注册声网创建项目后会自动有（我使用的是：无证书模式，所以没有用token）
4、在页面使用
1、 注意点
1、设置本地视频流的清晰度及流程度需设置encoder属性，此属性继承Agora Web API VideoEncoderConfiguration属性
2、本地视频及远程视频设置了playerConfig:{mirror: false}也没有全屏及画中画功能（即video标签没有controls属性），需要在@video-ready事件中手动添加video标签的controls属性
3、channel：是频道名称 （相同的频道名称 可以存在多个远程视频——即多人视频聊天）
4、想要启动项目进行测试必须使用https协议或者本地localhost
2、完整代码
<template>
<t-layout-page>
<t-layout-page-item>
<div style="display: flex;align-items: center;">
<label>channel:</label>
<el-input style="width: 60%" placeholder="请输入channel" v-model="channel"></el-input>
<el-button
style="margin-left:15px;"
type="primary"
:disabled="!channel"
@click="isPlay=true"
>点击开始</el-button>
</div>
</t-layout-page-item>
<t-layout-page-item v-if="isPlay">
<div class="container">
<div class="user">
<div class="local">
<label>本地视频:</label>
<div
v-if="localUserVideo"
class="player user-player"
ref="localVideo"
v-player="localUserVideo"
></div>
</div>
<div class="remote">
<label>远程视频:</label>
<div
class="player user-player"
v-for="video in remoteUserVideo"
ref="remoteVideo"
:key="video.uid"
v-player="video"
></div>
</div>
</div>
<agora :channel="channel">
<agora-video-sender
type="camera"
:config="{facingMode: 'environment'}"
:playerConfig="{ fit: 'contain', mirror: false }"
:encoder="encoderConfig"
optimization="detail"
@video-ready="handleLocalUserVideo"
customizationPlayer
></agora-video-sender>
<agora-video-receiver
:playerConfig="{ fit: 'contain', mirror: false }"
customizationPlayer
@video-ready="handleRemoteVideoVideo"
></agora-video-receiver>
</agora>
</div>
</t-layout-page-item>
</t-layout-page>
</template>
<script>
export default {
data() {
return {
channel: '7',
isPlay: false,
localUserVideo: null,
encoderConfig: { height: { max: 1920, min: 1920 }, width: { max: 1080, min: 1080 }, bitrateMax: 15000, bitrateMin: 15000, frameRate: { max: 15, min: 5 } },
remoteUserVideo: [],
filmUid: 999999
}
},
mounted() {
},
methods: {
// 获取本地视频流
handleLocalUserVideo(video) {
console.log('1111-----------', video)
this.localUserVideo = video
setTimeout(() => {
// // 获取video并添加controls属性
// this.$refs.localVideo.children[0].children[0].controls = 'controls'
const items = this.$refs?.localVideo?.getElementsByTagName('video') || []
// console.log('----', items)
for (let i = 0; i < items.length; i++) {
items[i].controls = 'controls'
}
}, 0)
},
// 获取远程视频流
handleRemoteVideoVideo(videos) {
console.log('222-----------', videos)
this.remoteUserVideo = videos.filter((v) => v.uid !== this.filmUid)
setTimeout(() => {
// 获取video并添加controls属性
for (let index = 0; index < this.$refs.remoteVideo.length; index++) {
const items = this.$refs.remoteVideo[index].getElementsByTagName('video')
for (let i = 0; i < items.length; i++) {
items[i].controls = 'controls'
}
}
}, 0)
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
.player {
overflow: hidden;
background-color: black;
}
.user {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
.local {
display: flex;
justify-content: flex-start;
flex-direction: column;
label {
text-align: left;
font-weight: 700;
}
}
.remote {
margin-left: 10px;
padding-left: 15px;
border: 1px solid #eee;
display: flex;
justify-content: flex-start;
flex-direction: column;
label {
text-align: left;
font-weight: 700;
}
}
}
.user-player {
width: 300px;
height: 300px;
margin: 5px 0;
}
}
</style>
