vue项目Agora声网实现一对一视频聊天Demo示例（Agora声网实战及agora-rtc-vue使用,新增在线预览地址）
最终效果
在线预览地址
一、声网简介---->请查看官网
二、声网注册---->请自行百度（创建音视频连接需要在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-buttonstyle="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><divv-if="localUserVideo"class="player user-player"ref="localVideo"v-player="localUserVideo"></div></div><div class="remote"><label>远程视频:</label><divclass="player user-player"v-for="video in remoteUserVideo"ref="remoteVideo":key="video.uid"v-player="video"></div></div></div><agora :channel="channel"><agora-video-sendertype="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 = videosetTimeout(() => {// // 获取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>四、组件地址
gitHub组件地址
gitee码云组件地址
在线预览地址
五、相关文章
基于ElementUi或AntdUI再次封装基础组件文档
基于Element-plus再次封装基础组件文档(vue3+ts)
vue项目Agora声网实现一对一视频聊天Demo示例（Agora声网实战及agora-rtc-vue使用,新增在线预览地址）相关推荐
- vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
- 文件文档在线预览开源项目kkFileView的使用
文件文档在线预览开源项目kkFileView的使用 1.项目特性 2.部署过程 2.1 二进制下载部署文件进行部署 2.2 docker方式部署 2.3 通过源代码编绎部署 3.部分配置说明 3.1 ...
- JAVA-文件文档在线预览项目解决方案-kkFileView
1. 简介 kkFileView是文件文档在线预览项目解决方案,对标业务付费产品有 永中office,office365,idocv等.该项目使用六星的springboot大家,易上手和部署,基本支持 ...
- 腾讯轻量+宝塔搭建文档在线预览项目kkFileView
一.使用的服务 1.腾讯云 [腾讯云]轻量应用服务器Lighthouse,「轻」松上云!1核2G6M 限时低至74元/年起! https://cloud.tencent.com/act/cps/red ...
- (Agora声网)多人视频聊天应用的开发（二）一对一聊天
转载于:Android多人视频聊天应用的开发(二)一对一聊天-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2095626 本系列文章结合声网官方在G ...
- (Agora声网)多人视频聊天应用的开发（三）多人聊天
转载于:Android多人视频聊天应用的开发(三)多人聊天-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2104587 本系列文章结合声网官方在Gi ...
- (Agora声网)多人视频聊天应用的开发（一）快速集成
转载于:Android多人视频聊天应用的开发(一)快速集成-玖哥的书房-51CTO博客 http://blog.51cto.com/dongfeng9ge/2095621 本系列文章结合声网官方在Gi ...
- vue项目中使用a标签下载视频文件
vue项目中使用a标签下载视频文件 前提条件: 1.地址为http 2.文件格式为MP4(仅代表这次项目中使用的情况) 示例代码: <el-button size="mini" ...
- 一款交友APP,聊天交友,视频交友,语音交友,直播交友,同城交友,一对一交友,一对一视频聊天,1v1同城交友,1v1交友,付费交友,相亲交友,陌生人交友源码
码上致富 交友APP,聊天交友,视频交友,语音交友,直播交友,同城交友,一对一交友,一对一视频聊天,1v1同城交友,1v1交友,付费交友,相亲交友,陌生人交友 项目前端地址:https://gitee ...
最新文章
- 从FPN到Mask R-CNN，一文告诉你Facebook的计算机视觉有多强
- 号称能自动编程60年，“进化计算”究竟进化到哪一步了？
- UBOOT添加命令的执行流程
- python 队列 锁_python-day31(同步锁,队列)
- android锁屏显示应用程序,今日应用：微软又给 Android 做了一款锁屏应用
- vue知识总结第一篇vue组件的定义以及父子组件的传值。
- ccs6 linux安装教程,【图片】【吧主帖】在LINUX（ubuntu）系统下装CCSv6方法（原创）【dsp吧】_百度贴吧...
- 剑指Offer - 面试题40. 最小的k个数（排序/大顶堆）
- as400和java的区别_文件传输协议和AS400
- QTimer定时器的使用,判断ros是否关闭,ros关闭后关闭窗口
- I/O设备与主机的联系方式
- [Linux] ubuntu server sudo出现sudo:must be setuid root 完美解决办法
- Hello China操作系统STM32移植指南（三）
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
- 基于STM32的智能鱼缸设计
- 服务监管框架下的 IT 运维服务与绩效管理体系建设
- 捋一捋Python中的数学运算math库之三角函数
- 还记得愤怒的小鸟嘛？今天用Python给大家安排一波！
- 空气净化器UL867测试报告流程
- 数字货币＆区块链动态