更新记录

1.0.3（2024-11-02）

完善ios耳机听筒的兼容性问题

1.0.2（2024-10-31）

修复iOS 连接耳机时，声音切换问题

1.0.1（2024-09-29）

增加支持Android
增加支持多人视频通话

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.7.0，Android：5.0，iOS：12，HarmonyNext：不确定	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

WebRTC音视频通话

主要功能

2人/多人音视频通话
静音/闭麦
切换摄像头
暂停/继续视频流

集成步骤

demo使用的是vue3,HBuilderX导入的时候选择vue3,vue2也是支持的
拷贝demo里的Info.plist和AndroidManifest.xml到项目根目录
集成插件，集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027
demo/static/NodeJS是websocket服务器，使用node app.js命令既可以运行
修改demo的socket服务器地址(webSocketUrl)改为电脑ip
socket业务可以使用各自的服务器，支持用来发送接收信令，可以使用socket、webSocket、socket.IO都可以，demo里的socket服务只是配合演示流程


socketTask = uni.connectSocket({
    url: 'ws://172.16.11.37:8088',
    complete: () => {}
});

如果socket服务器是采用局域网IP连接，ios某些机型连接局域网时首次访问会弹出局域网授权信息，点击确定后再次点击界面上的"连接socket"按钮，socket连接状态可以查看控制台或代码
demo演示流程：点击界面上的加入房间即可进行视频通话整体业务流程：
点击"加入房间",会向房间里的其他人发送新成员加入消息


{
    msgType: "join",
    userId: "xx"
}

其他成员收到join消息时，会与该用户创建一个PeerConnection(同时把本地音视频加入PeerConnection)，并生成offer，设置setLocalDescription，然后将offer数据发送给对方，同时会生成onIceCandidate，IceCandidate数据也要发送给对方


offer数据：

{
    msgType: "sdp",
    fromUserId: "xx",
    toUserId: "xx",
    type: "offer",
    sdp: "xx"
}

IceCandidate数据：
{
    msgType: "iceCandidate",
    fromUserId: “xx”,
    toUserId: "xx",
    id: candidate.sdpMid,
    label: candidate.sdpMLineIndex,
    candidate: candidate.sdp
}

用户收到offer消息时,也创建一个PeerConnection(同时把本地音视频加入PeerConnection)，并setRemoteDescription，然后生成answer，设置setLocalDescription，然后将answer数据发送给对方，同时会生成onIceCandidate，IceCandidate数据也要发送给对方


answer数据：
{
    msgType: "sdp",
    fromUserId: "xx",
    toUserId: "",
    type: "answer",
    sdp: ""
}

IceCandidate数据：
{
    msgType: "iceCandidate",
    fromUserId: “xx”,
    toUserId: "xx",
    id: candidate.sdpMid,
    label: candidate.sdpMLineIndex,
    candidate: candidate.sdp
}

用户收到answer消息时，设置setRemoteDescription,双方收到对方的iceCandidate消息时，都调用addIceCandidate接口设置
完成以上流程后，就可以进行视频通话了

接口


import {
    UTSWebRTC
} from "@/uni_modules/wrs-uts-webrtc"

let webRTC = new UTSWebRTC()

设置webRTC的回调


// 设置webRTC的回调
webRTC.onCallback((resp) => {
    let opt = resp.opt
    this.showMsg("webRTC.onCallback opt:" + opt)
    switch (opt) {
        // 信令状态改变
        case "onSignalingChange": {
            this.showMsg("onSignalingChange:" + JSON.stringify(resp))
            let state = resp.state
            if (state) {
                switch (state) {
                    case 0: {
                        this.showMsg("RTCSignalingStateStable")
                    }
                    break;
                    case 1: {
                        this.showMsg("RTCSignalingStateHaveLocalOffer")
                    }
                    break;
                    case 2: {
                        this.showMsg("RTCSignalingStateHaveLocalPrAnswer")
                    }
                    break;
                    case 3: {
                        // 
                        this.showMsg("RTCSignalingStateHaveRemoteOffer")
                    }
                    break;
                    case 4: {
                        this.showMsg("RTCSignalingStateHaveRemotePrAnswer")
                    }
                    break;
                    case 5: {
                        this.showMsg("RTCSignalingStateClosed")
                        let userId = resp.userId
                        if (userId) {
                            this.userLeave(userId)
                        }
                    }

                    break;
                    default:
                        break;
                }
            }
        }
        break;
        case "onIceGatheringChange": {
            this.showMsg("onIceGatheringChange:" + JSON.stringify(resp))
            let state = resp.state
            if (state) {
                switch (state) {
                    case 0: {
                        this.showMsg("RTCIceGatheringStateNew")
                    }
                    break;
                    case 1: {
                        this.showMsg("RTCIceGatheringStateGathering")
                    }
                    break;
                    case 2: {
                        this.showMsg("RTCIceGatheringStateComplete")
                    }
                    break;
                    default:
                        break;
                }
            }
        }
        break;
        // 生成IceCandidate
        case "onIceCandidate": {
            this.showMsg("onIceCandidate")
            let userId = resp.userId
            let candidate = resp.iceCandidate
            this.sendSocketData({
                msgType: "iceCandidate",
                fromUserId: this.userId,
                toUserId: userId,
                id: candidate.sdpMid,
                label: candidate.sdpMLineIndex,
                candidate: candidate.sdp
            })
        }
        break;
        case "onIceConnectionChange": {
            this.showMsg("onIceConnectionChange:" + JSON.stringify(resp))
            let state = resp.state
            switch (state) {
                case 0: {
                    this.showMsg("RTCIceConnectionStateNew")
                }
                break;
                case 1: {
                    this.showMsg("RTCIceConnectionStateChecking")
                }
                break;
                case 2: {
                    // 这步没有
                    this.showMsg("RTCIceConnectionStateConnected")
                }
                break;
                case 3: {
                    this.showMsg("RTCIceConnectionStateCompleted")
                }
                break;
                case 4: {
                    this.showMsg("RTCIceConnectionStateFailed")
                }
                break;
                case 5: {
                    // 通讯被断开，一般是对方掉线或者STUN/TURN 服务器问题：如果 ICE 服务器配置不当，或者 STUN/TURN 服务器不可用，可能会导致连接失败。确保你的 STUN/TURN 服务器正常工作并且可达。
                    this.showMsg("RTCIceConnectionStateDisconnected")
                    let userId = resp.userId
                    if (userId) {
                        this.userLeave(userId)
                    }
                }
                break;
                case 6: {
                    this.showMsg(" RTCIceConnectionStateClosed")
                    let userId = resp.userId
                    if (userId) {
                        this.userLeave(userId)
                    }
                }
                break;
                case 7: {
                    this.showMsg(" RTCIceConnectionStateCount")
                }
                break;
                default:
                    break;
            }

        }

        break;
        // 收到其他用户的音频或视频流
        case "onAddStream": {
            let userId = resp.userId
            this.showMsg("onAddStream:" + JSON.stringify(resp))
            if (userId) {
                let stream = resp.stream
                if (stream) {
                    // 如果有视频流，则显示其他用户的视频
                    let videoTracks = stream.videoTracks
                    if (videoTracks) {
                        if (videoTracks.length > 0) {
                            let exist = this.existUser(userId)
                            if (!exist) {
                                console.log("显示远程视频流:" + userId)
                                this.otherPersons.push({
                                    userId: userId
                                })
                            }
                        }
                    }
                }
            }

        }
        break;
        case "onRemoveStream": {

        }
        break;

        default:
            break;
    }
})

初始化本地视频


// 初始化视频
webRTC.initVideoTrack({
    trackId: "video0",
    isScreencast: false // 仅对Android生效
})

初始化本地音频


// 初始化音频
webRTC.initAudioTrack({
    trackId: "audio0"
})

配置音频，仅支持iOS


webRTC.configureAudioSession({
    category: "playAndRecord",
    mode: "voiceChat"
})

开启相机抓流/切换摄像头


// 开始本地抓流
webRTC.startVideoCapture({
    isFront: this.isFront,
    width: 1280, // width仅支持Android
    height: 720, // height仅支持Android
    fps: 30
})

暂停抓流


webRTC.stopVideoCapture()

创建连接

iceServers支持类型：

第一种


{
   urls: ["xxx"]
}

第二种


{
   urls: ["xxx"],
   username: "xx",
   credential: "xx"
}


let iceServers = [{
    urls: ["stun:stun.l.google.com:19302",
        "stun:stun1.l.google.com:19302",
        "stun:stun2.l.google.com:19302",
        "stun:stun3.l.google.com:19302",
        "stun:stun4.l.google.com:19302"
    ]
}]
let params = {} 
params.userId = userId
// params.iceServers = iceServers
// params.sdpSemantics = 1 // 0: RTCSdpSemanticsPlanB 1:RTCSdpSemanticsUnifiedPlan
// params.continualGatheringPolicy =
//  1 // 0: RTCContinualGatheringPolicyGatherOnce 1: RTCContinualGatheringPolicyGatherContinually
// params.constraints = {
//  mandatory: {},
//  optional: {
//      DtlsSrtpKeyAgreement: "true"
//  }
// }
userId = webRTC.createPeerConnection(params)

将本地视频加入连接


let videoResp = webRTC.addVideoTrack({
    userId: userId,
    streamIds: ["video0"]
})
let videoFlag = videoResp.flag
if (!videoFlag) {
    this.showMsg("添加本地视频出错:" + JSON.stringify(videoFlag))
}

将本地音频加入连接


let audioResp = webRTC.addAudioTrack({
    userId: userId,
    streamIds: ["audio0"]
})
let audioFlag = audioResp.flag
if (!audioFlag) {
    this.showMsg("添加本地音频出错:" + JSON.stringify(videoFlag))
}

创建offer


webRTC.createOffer({
    userId: userId,
    setLocalDescription: false
}, (resp) => {
    let flag = resp.flag
    if (flag) {
        let sessionDescription = resp.sessionDescription
        let type = sessionDescription.type
        let sdp = sessionDescription.sdp
        }
    }
)

设置本地LocalDescription


webRTC.setLocalDescription({
    userId: userId,
    type: type, // 支持offer、pranswer、answer
    sdp: sdp
}, (localDescResp) => {
    let localFlag = localDescResp.flag
    if (localFlag) {
    }
    }
)

设置远程RemoteDescription


webRTC.setRemoteDescription({
    userId: userId,
    type: type, // 支持offer、pranswer、answer
    sdp: sdp
}, (resp) => {
    let flag = resp.flag
    if (flag) {
        }
    }
)

创建answer


webRTC.createAnswer({
    userId: userId,
    setLocalDescription: false
}, (answerResp) => {
    let flag = answerResp.flag
    if (flag) {
        // console.log("createAnswer result:" + JSON.stringify())
        let sessionDescription = answerResp.sessionDescription
        let type = sessionDescription.type
        let sdp = sessionDescription.sdp
        }
    }
)

添加候选人IceCandidate,一般调用offer或answer时会生成多次IceCandidate，可以都发送给对方，对方设置多次


webRTC.addIceCandidate({
    userId: userId,
    sdpMid: sdpMid,
    sdpMLineIndex: sdpMLineIndex,
    sdp: sdp
}, (resp) => {
    let flag = resp.flag
    if (!flag) {
        this.showMsg("addIceCandidate error:" + JSON.stringify(resp))
    }
})

销毁某个用户的连接


webRTC.destroyPeerConnection({
    userId: userId
})

销毁所有的连接


webRTC.destroyAllPeerConnection()

UI组件

使用wrs-uts-webrtc-view组件的页面要用nvue


<wrs-uts-webrtc-view ref='localView' :style="'width:'+width+'px;height:'+height+'px;'"
    @onLoadView="onLoadLocalView" :userId="userId"></wrs-uts-webrtc-view>

渲染本地视频


// 渲染本地视频界面
this.$refs.localView.renderLocalVideo()

渲染其他用户视频

目前有2种方式：

调用接口，常用于2人通话


this.$refs.remoteView.renderRemoteVideo(userId)

绑定userId属性，常用于多人通话


:userId="userId"

WebRTC音视频通话自定义UI自定义服务器android和ios WebRTC 音视频通话 rtc

更新记录

1.0.3（2024-11-02）

1.0.2（2024-10-31）

1.0.1（2024-09-29）

平台兼容性

WebRTC音视频通话

主要功能

集成步骤

接口

UI组件

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

高德地图点标记导航离线地图-原生

读写外接U盘、移动硬盘、SD卡文件、选择系统文件、支持android和ios

腾讯x5webview支持离线内核

读取本地相册图片视频音频，可自定义UI界面

本地HttpServer-静态站点-getpost请求-文件上传下载-本地HLS(m3u8)视频播放

WebRTC音视频通话自定义UI自定义服务器android和ios WebRTC 音视频通话 rtc

更新记录

1.0.3（2024-11-02）

1.0.2（2024-10-31）

1.0.1（2024-09-29）

平台兼容性

WebRTC音视频通话

主要功能

集成步骤

接口

UI组件

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

高德地图点标记导航离线地图-原生

读写外接U盘、移动硬盘、SD卡文件、选择系统文件、支持android和ios

腾讯x5webview支持离线内核

读取本地相册图片视频音频，可自定义UI界面

本地HttpServer-静态站点-getpost请求-文件上传下载-本地HLS(m3u8)视频播放

Modal title