web 前端实现音视频通话 - liveKit 框架

这篇具有很好参考价值的文章主要介绍了web 前端实现音视频通话 - liveKit 框架。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

运行环境

  • go1.18以上
  • liveKit-server.exe
  • liveKit官方文档链接
  • 科学上网(github)

liveKit基础概念

在liveKit 中有两个概念,分别是:room 房间 和 user 用户

房间很好理解,类似一个腾讯会议中的 一个会议
用户指的是 加入房间的所有人。
每个用户的权限是相同的

  • 想要实现主持人功能,可以通过web服务器来对liveKit 房间中权限进行管理
    :::info
    liveKit相当于搭建了一个流媒体服务器,并且这个流媒体服务器封装了一些视频聊天的方法
    :::
    :::info
    通过go 语言开发的web服务 通过SDK 来访问 liveKit服务,并且通过SDK对liveKit 中的room以及user进行管理
    :::

业务流程

vue livekit demo,系统开发,前端,音视频

用户A 创建房间流程

  1. 用户A访问http 服务下的/getToken接口 参数如下:
  • creatRoom : true 创建房间
  • identity , 用户ID
  • roomName 房间名称
  1. 创建房间 需传入 creatRoom为0 ,房间名称为 roomName
  2. 后端根据 roomName 创建房间,并且返回token
  3. 用户A 获取到token 通过room.connect 方法连接 liveKet房间
await room.connect(wsUrl, token);  // 在开发时 wsUrl 为 ws://127.0.0.1:7880
  1. 开始传输音频/接受音频

用户B 进入房间流程

  1. 用户B访问http 服务下的/getToken接口 参数如下:
  • creatRoom : false 加入房间
  • identity , 用户ID
  • roomName 房间名称
  1. 根据参数 roomName, 和identity 生成对应的 token
  2. 用户B获取到token 通过room.connect 方法连接 liveKet房间
await room.connect(wsUrl, token);  // 在开发时 wsUrl 为 ws://127.0.0.1:7880
  1. 开始传输音频/接受音频

web端 向ROOM发送媒体流

相机和麦克风

将本地参与者的摄像头和/或麦克风流发布到房间

// 打开摄像头
room.localParticipant.setCameraEnabled(true)


//打开麦克风
room.localParticipant.setMicrophoneEnabled(true)

可以通过以下方法来将自己的麦克风静音

room.localParticipant.setCameraEnabled(false) //关闭摄像头
room.localParticipant.setMicrophoneEnabled(false) //关闭麦克风

禁用摄像头或麦克风将关闭各自的录音,房间内的其他用户将收到一个TrackMuted事件。

屏幕共享

LiveKit还支持跨所有平台的本机屏幕共享。

// 需要浏览器支持
await currentRoom.localParticipant.setScreenShareEnabled(true);

web端 接收ROOM中的媒体流

媒体订阅

LiveKit使用两个结构来建模轨道:TrackPublication和Track。将TrackPublication视为向服务器注册的轨道的元数据,将Track视为原始媒体流。
订阅的回调将在Room和RemoteParticipant对象回调

import {
  connect,
  RoomEvent,
} from 'livekit-client';


room
  .on(RoomEvent.TrackSubscribed, handleTrackSubscribed)


function handleTrackSubscribed(
  track: RemoteTrack,
  publication: RemoteTrackPublication,
  participant: RemoteParticipant
) {

}

媒体播放

订阅了音频就可以播放了

function handleTrackSubscribed(
  track: RemoteTrack,
  publication: RemoteTrackPublication,
  participant: RemoteParticipant
) {
  // attach track to a new HTMLVideoElement or HTMLAudioElement
  const element = track.attach();
  parentElement.appendChild(element);
  // or attach to existing element
  // track.attach(element)
}

说话人检测

当音轨发布时,LiveKit将检测正在说话的参与者。扬声器更新将为本地和远程参与者发送。

room.on(RoomEvent.ActiveSpeakersChanged, (speakers: Participant[]) => {
  // 包含所有当前活动的扬声器
})


participant.on(ParticipantEvent.IsSpeakingChanged, (speaking: boolean) => {
  console.log(`${participant.identity} is ${speaking ? "now" : "no longer"} speaking. audio level: ${participant.audioLevel}`)
})

开发流程

启动liveKit服务

./liveKit-server.exe --dev 
注: 在本地开发环境下只能使用服务默认的key 和 secret 如下
var appKey = "devkey"
var appSecret = "secret"

vue livekit demo,系统开发,前端,音视频
:::info
启动成功后如上图所示
:::

  • 其中 starting LiveKet server 后 端口7880 为后端管理room 时使用

vue livekit demo,系统开发,前端,音视频

  • 其中7881 与7882 分别是TCP /UDP 链接端口
  • ps:需要在生产环境中配置文件中设置开启,本地启动默认7880端口

go引入 livekit/server-sdk-go 包 创建web服务器

2.1 web服务器用来生成 liveKit可以识别进入房间的token
vue livekit demo,系统开发,前端,音视频

创建token接口,根据秘钥生成房间的token

vue livekit demo,系统开发,前端,音视频

使用roomClient方法 连接 liveKit服务

vue livekit demo,系统开发,前端,音视频

根据liveKit文档通过Room 的相关API管理liveKit中的room

vue livekit demo,系统开发,前端,音视频

测试项目

  • 前端vue3 + iview
  • 后端 go + gin框架
  • 仓库中附带windows 环境下liveKit服务应用
  • 初步实现双方语音对讲功能,在云服务器环境下经过测试延迟情况良好,基本达到微信语音水平
  • 服务器配置如下

vue livekit demo,系统开发,前端,音视频

  • 测试负载:
  • 单房间,三用户,语音聊天

待完善

  • go 后端设想引入socket服务,用来更新房间数据到用户端

Events 回调事件

room.on(RoomEvent.TrackSubscribed, 回调函数); 
事件 描述 房间事件 用户事件
ParticipantConnected 远程参与者在本地参与者之后加入 x
ParticipantDisconnected 远程参与者离开 x
Reconnecting 它正在尝试重新连接 x
Reconnected 重新连接已成功 x
Disconnected 由于房间关闭、故障 而 断开连接、链接失败 x
TrackPublished 本地参与者加入后,新曲目将发布到房间 x x
TrackUnpublished 远程参与者已取消发布曲目 x x
TrackSubscribed 本地参与者已订阅曲目 x x
TrackUnsubscribed 先前订阅的曲目已取消订阅 x x
TrackMuted 一个曲目被静音,本地曲目和远程曲目都会触发 x x
TrackUnmuted 轨道未静音,本地轨道和远程轨道都有声音 x x
LocalTrackPublished 本地轨道已成功发布 x x
LocalTrackUnpublished 本地轨道未发布 x x
ActiveSpeakersChanged 当前活动的扬声器已更改 x
IsSpeakingChanged 当前参与者已更改发言状态 x
ConnectionQualityChanged 参与者的连接质量已更改 x x
ParticipantMetadataChanged 参与者的元数据已通过服务器API更新 x x
RoomMetadataChanged 与房间关联的元数据已更改 x
DataReceived 从另一个参与者或服务器接收的数据 x x
TrackStreamStateChanged 指示订阅的轨道是否因带宽而暂停 x x
TrackSubscriptionPermissionChanged 订阅的轨道之一已更改当前参与者的轨道级别权限 x x
ParticipantPermissionsChanged 当前参与者的权限已更改 x x

此表捕获了跨平台SDK可用的一组一致事件。除了此处列出的内容之外,某些平台上可能还有特定于平台的事件。文章来源地址https://www.toymoban.com/news/detail-851034.html

服务器部署liveKit server

使用docker方式部署

  • 未测试

直接运行 liveKit 服务

  • 使用官方提供的liveKit-server 运行包,直接运行
./live-server --config ./config.yaml
  • 上述命令执行了在同级目录下的 live-server 服务的 配置文件
  • 使用nginx 反向代理ws 协议与http协议到liveKit 端口,实现用户端网页直接访问 liveKit 服务。

到了这里,关于web 前端实现音视频通话 - liveKit 框架的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebRTC音视频通话-实现iOS端调用ossrs视频通话服务

    WebRTC音视频通话-实现iOS端调用ossrs视频通话服务 之前搭建ossrs服务,可以查看:https://blog.csdn.net/gloryFlow/article/details/132257196 这里iOS端使用GoogleWebRTC联调ossrs实现视频通话功能。 iOS端端效果图 ossrs效果图 WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站

    2024年02月13日
    浏览(59)
  • 技术分享| 小程序实现音视频通话

    上一期我们把前期准备工作做完了,这一期就带大家实现音视频通话! 为了更好的区分功能,我分成了六个 js 文件 config.js 音视频与呼叫邀请配置 store.js 实现音视频通话的变量 rtc.js 音视频逻辑封装 live-code.js 微信推拉流状态码 rtm.js 呼叫邀请相关逻辑封装 util.js 其他方法

    2024年02月02日
    浏览(57)
  • WebRTC音视频通话-实现GPUImage视频美颜滤镜效果iOS

    WebRTC音视频通话-实现GPUImage视频美颜滤镜效果 在WebRTC音视频通话的GPUImage美颜效果图如下 可以看下 之前搭建ossrs服务,可以查看:https://blog.csdn.net/gloryFlow/article/details/132257196 之前实现iOS端调用ossrs音视频通话,可以查看:https://blog.csdn.net/gloryFlow/article/details/132262724 之前WebR

    2024年02月12日
    浏览(53)
  • iOS 端实现1对1音视频实时通话

    首先,我们来看一下 iOS 端是如何获取访问音视频设备权限的。相比 Android 端而言,iOS端获取相关权限要容易很多。其步骤如下: 打开项目,点击左侧目录中的项目。 在左侧目录找到 info.plist ,并将其打开。 点击 右侧 看到 “+” 号的地方。 添加 Camera 和 Microphone 访问权限。

    2024年02月15日
    浏览(52)
  • WebRTC实战-第二章-使用WebRTC实现音视频通话

    、 什么是WebRTC|WebRTC入门到精通必看|快速学会音视频通话原理|WebRTC超全资料分享FFmpeg/rtmp/hls/rtsp/SRS WebRTC **WebRTC详细指南** http://www.vue5.com/webrtc/webrtc.html WEBRTC三种类型(Mesh、MCU 和 SFU)的多方通信架构 WebRTC API包括媒体捕获,音频和视频编码和解码,传输层和会话管理 。 假设

    2023年04月12日
    浏览(53)
  • 《保姆级教程》基于Agora SDK实现音视频通话及屏幕共享

    😄作者简介: 小曾同学.com,一个致力于测试开发的博主⛽️,主要职责:测试开发、CI/CD 如果文章知识点有错误的地方,还请大家指正,让我们一起学习,一起进步。😊 座右铭:不想当开发的测试,不是一个好测试✌️。 如果感觉博主的文章还不错的话,还请点赞、收藏哦

    2024年02月12日
    浏览(47)
  • WebRTC音视频通话(二)简单音视频通话

    本篇不详细介绍websocket,只针对websocket整合rtc。 webrtc是P2P通信,也就是实际交流的 只有两个人 ,而要建立通信,这两个人需要 交换一些信息来保证通信安全 。而且, webrtc必须通过ssh加密 ,也就是使用https协议、wss协议。 借用一幅图 1.1 创建端点的解析 以下解析不包括we

    2023年04月09日
    浏览(62)
  • 基于webrtc的音视频通话,实现相机流识别人脸的功能

    这几天研究了一下webRTC的基础能力,在此基础之上能实现的视频通话,互动等更多实用功能。项目中使用的是阿里的rtc,我研究的是声网的是否符合功能,后续会总结和记录一下应用到的几个功能实现方法。 今天要记录的功能是项目流识别人脸的功能,其实类似功能很常见了

    2024年04月28日
    浏览(52)
  • Unity Metaverse(八)、RTC Engine 基于Agora声网SDK实现音视频通话

    本文介绍如何在Unity中接入声网SDK,它可以应用的场景有许多,例如直播、电商、游戏、社交等,音视频通话是其实时互动的基础能力。 如下图所示,可以在官网中选择Unity SDK进行下载,也可以到 Unity Asset Store 资源商店中搜索 Agora SDK 进行下载导入。 在官网中前往 Console 控制

    2024年02月09日
    浏览(56)
  • WebRTC音视频通话-WebRTC本地视频通话使用ossrs服务搭建

    iOS开发-ossrs服务WebRTC本地视频通话服务搭建 之前开发中使用到了ossrs,这里记录一下ossrs支持的WebRTC本地服务搭建。 ossrs是什么呢? SRS(Simple Realtime Server)是一个简单高效的实时视频服务器,支持RTMP、WebRTC、HLS、HTTP-FLV、SRT等多种实时流媒体协议。 官网地址:https://ossrs.net/lt

    2024年02月12日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包