基于livekit的webrtc的音视频通话，无需打洞，支持iOSAndroid

原创 于 2025-12-10 17:27:27 发布 · 888 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webrtc #音视频 #uni-app #小程序 #微信小程序

更新记录

1.0.4（2025-12-09）

  1. Android增加共享屏幕接口
  2. 从新构建升级插件的用户需要修改属性
  3. 升级sdk

1.0.3（2025-11-20）

  1. 增加更多回调接口

1.0.2（2025-11-18）

  1. 升级sdk版本
  2. 增加更多回调接口
  3. 修复已知问题

查看更多

平台兼容性

uni-app(3.6.15)
Vue2Vue3ChromeSafariapp-vueapp-nvueAndroidiOS鸿蒙
√√--√√5.013-
微信小程序支付宝小程序抖音小程序百度小程序快手小程序京东小程序鸿蒙元服务QQ小程序飞书小程序快应用-华为快应用-联盟
-----------
uni-app x(3.6.15)
ChromeSafariAndroidiOS鸿蒙微信小程序
--5.013--
其他
多语言暗黑模式宽屏模式
√√√

基于livekit的webrtc的音视频通话，无需打洞

功能

  • 音视频通话
  • 切换麦克风
  • 切换摄像头

快速跑通demo

  1. 拷贝demo里的AndroidManifest.xml、Info.plist文件到项目根目录
  2. 集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027
  3. 安装部署livekit服务器
  • 安装livekit服务https://github.com/livekit/livekit 安装成功后，命名行执行启动服务命令，启动后会有API Key和API Secret, key和secret用于生成token时使用：

// 启动服务：
livekit-server --dev --bind 0.0.0.0

// 用户user1
lk token create \
    --api-key devkey --api-secret secret \
    --join --room my-first-room --identity user1 \
    --valid-for 999h

//用户user2
lk token create \
     --api-key devkey --api-secret secret \
     --join --room my-first-room --identity user2 \
     --valid-for 999h
  1. 修改demo的url和token,自定义基座运行后点击加入房间，需要渲染视频画面的页面要用nvue

接口


import {
    UTSLiveKitRoom
} from "@/uni_modules/wrs-uts-livekit"
let room = new UTSLiveKitRoom()
  • 设置回调

room.onCallback((resp) => {
    // this.showMsg(JSON.stringify(resp))
    let opt = resp.opt
    switch (opt) {
        // didConnect
        case "onConnect": {
            // 连接成功，成功加入房间

        }
        break;
        case "onFailConnect": {
            // 连接失败
        }
        break;
        case "onReconnecting": {
            // 重连中
        }
        break;
        case "onReconnected": {
            // 重连成功
        }
        break;
        case "onDisconnect": {
            // 断开连接   
        }
        break;
        case "onPublishLocalTrack": {

            // 本地音视频推流
            let kind = resp.participant.kind
            switch (kind) {
                // 音频Track
                case 0: {

                }
                break;
                // 视频Track
                case 1: {
                    console.log("收到本地视频流：" + JSON.stringify(resp))
                    let newParams = {}
                    newParams.businessArray = [{
                        business: "showLocalView", // 设置播放地址
                        params: { // 业务参数
                            identity: resp.participant.identity,
                            scaleType: "fill"
                        }
                    }]

                    let newParamsStr = this.formatNewParams(newParams)
                    // android、ios
                    this.params = newParamsStr

                }
                break;
                default:
                    break;
            }
        }
        break;
        case "onParticipantConnected": {
            let participant = resp.participant
            // 有人加入房间
            // this.showMsg("onParticipantConnected")
        }
        break;
        case "onParticipantDisconnected": {
            let participant = resp.participant
            // 有人退出房间
            // this.showMsg("onParticipantDisconnected")
        }
        break;
        case "onUpdateName": {

        }
        break;
        case "onUpdateMetadata": {

        }
        break;
        // 收到其他人发布的音频、视频流
        case "onSubscribeRemoteTrack": {

            // 其他人音视频推流
            let kind = resp.publication.kind
            switch (kind) {
                // 音频Track
                case 0: {

                }
                break;
                // 视频Track
                case 1: {
                    let identity = resp.participant.identity
                    let source = resp.publication.source
                    let isShareScreenVideo = false
                    if (source) {
                        switch (source) {
                            case 0: {
                                // 未知
                            }
                            break;
                            case 1: {
                                // 相机
                                console.log("收到相机视频流:" + JSON.stringify(resp))
                            }
                            break;
                            case 2: {
                                // MIC
                            }
                            break;
                            case 3: {
                                // 共享屏幕视频
                                console.log("收到共享屏幕视频流" + JSON.stringify(resp))
                                isShareScreenVideo = true
                            }
                            break;
                            case 3: {
                                // 共享屏幕音频
                            }
                            break;
                            default:
                                break;
                        }
                    }
                    switch (uni.getSystemInfoSync().platform) {
                        case 'android': {

                            let newParams = {}
                            newParams.businessArray = [{
                                business: "showRemoteView", // 设置播放地址
                                params: { // 业务参数
                                    identity: identity
                                }
                            }]

                            this.remoteArray.push(JSON.stringify(newParams))
                        }
                        break;
                        case 'ios': {
                            if (!isShareScreenVideo) {
                                let newParams = {}
                                newParams.businessArray = [{
                                    business: "showRemoteView", // 设置播放地址
                                    params: { // 业务参数
                                        identity: identity
                                    }
                                }]

                                this.remoteArray.push(JSON.stringify(newParams))
                            }
                        }
                        break;
                        default:
                            break;
                    }

                }
                break;
                default:
                    break;
            }
        }
        break;
        case "onUpdateAttributes": {

        }
        break;
        case "onUpdateSpeakingParticipants": {
            let speakers = resp.speakers
            for (let index = 0; index < speakers.length; index++) {
                let speaker = speakers[index]
                let name = speaker.name
                let isSpeaking = speaker.isSpeaking
                if (isSpeaking) {
                    console.log(name + "在讲话")
                }
            }
        }
        break;
        case "onTrackUpdateMuted": {
            let participant = resp.participant
            let name = participant.name
            let isMicrophoneEnabled = participant.isMicrophoneEnabled
            if (isMicrophoneEnabled) {
                console.log(name + "打开了MIC")
            } else {
                console.log(name + "关闭了MIC")
            }
            // let isCameraEnabled = para
        }
        break;
        default:
            break;
    }

})
  • 初始化，调用一次就可以

room.initRoom()
  • 进入连接房间

let params = {}
params.url = "ws://192.168.2.73:7880"
params.token = "xxx"
room.connect(params, (resp) => {
    console.log("nvue room.connect:" + JSON.stringify(resp))
    let flag = resp.flag
    if(flag) {
        // 先调用连接接口后才能打开摄像头
        this.openCameraMic()
    } else {
        this.showMsg("连接失败:" + JSON.stringify(resp))
    }

})
  • 打开相机和麦克风，连接房间后再打开

let position = "front"
if(this.isFrontCamera) {
    position = "front"
} else {
    position = "back"
}
let params = {}
params.camera = {
    enable: true,
    position: position, // front、back
    fps: 30
}
params.mic = {
    enable: true
}
room.setCameraMic(params, ()=>{
    if(this.isAndroid) {
        this.localIdentity = new Date().getTime() + ""
    }

    console.log("nvue room.setCameraMic callback")
})
  • 离开房间

room.disConnect(() => {

})
  • 切换摄像头

room.switchCamera((resp) => {
    if (resp.flag) {

    } else {
        this.showMsg("切换失败:" + JSON.stringify(resp))
    }
})
  • 开启/关闭麦克风

let params = {}
params.enabled = true // true、false
params.captureOptions = { // captureOptions仅对iOS生效
    noiseSuppression: false,
    highpassFilter: false
}
room.setMicrophone(params, (resp) => {
    console.log(JSON.stringify(resp))
    if (resp.flag) {

    } else {
        this.showMsg("切换失败:" + JSON.stringify(resp))
    }
})
  • 渲染本地视频

<wrs-uts-livekit :style="'width:'+width+'px;height:'+height+'px;'" :params="params">
</wrs-uts-livekit>
  • 显示本地视频

let newParams = {}
newParams.businessArray = [{
    business: "showLocalView", // 显示本地视频
    params: { // 业务参数
        identity: resp.participant.identity
    }
}]

let newParamsStr = this.formatNewParams(newParams)
// android、ios
this.params = newParamsStr
  • 显示其他人的视频画面

let newParams = {}
newParams.businessArray = [{
    business: "showRemoteView", // 显示远程视频
    params: { // 业务参数
        identity: identity
    }
}]

this.remoteArray.push(JSON.stringify(newParams))
果果科技
关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值