【开发日记】使用WebRTC实现类微信的实时音视频通话

原创已于 2024-11-17 23:18:14 修改 · 2.3k 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#webrtc #实时音视频 #uniapp

于 2024-11-10 18:52:13 首次发布

开发日记专栏收录该内容

48 篇文章

订阅专栏

1、背景

需要使用uni-app技术开发一个类似微信一样的实时音视频通话功能，经过大量的调研和尝试，最终有存在两个方案：第一个方案是使用WebRTC技术实现P2P点对点实时通信；第二个方案是使用现成的阿里、腾讯、声网等平台相关产品。

第二种方案无疑是最稳定的，但价格太劝退了，所以退而求其次使用WebRTC技术实现，下面是在uni-app技术中实现WebRTC的记录。

2、web-view与uniapp通信

webview中html必须引入uni.webview.js文件。uniapp有提供的官方下载地址，去官网找一下。

<script type="text/javascript" src="js/webview.js"></script>

2.1、uniapp发消息给webview

uniapp发送代码如下：

<template>
    <view class="container">
        <web-view :src="webSrc" ref="webview" @onPostMessage="handlePostMessage" @message="handlePostMessage"></web-view>
    </view>
</template>
<script>
    onLoad() {
        /* #ifdef APP-PLUS */
        this.webSrc = plus.io.convertLocalFileSystemURL('_www/hybrid/html/camera.html');
        var currentWebview = this.$scope.$getAppWebview()
        setTimeout(()=>{this.wv = currentWebview.children()[0];},1000)
        /* #endif */
    },
    methods: {
        sendWebViewMessage(event){
            this.wv.evalJS("receiveAppMessage('" + JSON.stringify(event) + "')")
        },
    }
</script>

这里省略data中的数据。需要注意的是必须延时一秒再设定this.wv。

webview接收代码如下：

function receiveAppMessage(event) {
    event = JSON.parse(event);
}

2.1、webview发消息给uniapp

webview发送代码如下：

function sendAppMessage(event) {
    uni.postMessage({
        data: event
    });
}

uniapp接收代码如下：

<template>
    <view class="container">
        <web-view :src="webSrc" ref="webview" @onPostMessage="handlePostMessage" @message="handlePostMessage"></web-view>
    </view>
</template>

handlePostMessage: function (event) {
    console.log('接收webview发送的消息:', JSON.stringify(event.detail.data));
},

3、建立RTC连接

为了形象的表达建立WebRTC连接的整个过程，可以结合下面的时序图对照着文字代码部分进行理解。

WebRTC时序图

3.1、呼叫方进入视频界面，并发送视频请求

发送视频请求使用的是HTTP请求，服务端接收到请求后再通过WS推送给被呼叫方，被呼叫方被动进入视频界面。同时呼叫方建立RTC中独有的WS连接，也就是说现在呼叫方除了软件建立的WS连接，还有RTC的WS连接，用于后续的音视频通话。

3.2、被呼叫方被动进入视频界面，接收视频请求

如果被呼叫方接收到了呼叫请求，则建立RTC中独有的WS连接。

3.3、被呼叫方接受呼叫

被呼叫方受到视频请求时，界面出现接通或拒接两个选项，如果被呼叫方选择接通，则通过RTC中独有的WS连接发送给呼叫方告知被呼叫方接受了视频请求。

3.4、呼叫方接受呼叫

呼叫方收到了被呼叫方接受了视频请求的消息后，也向被呼叫方回复一条呼叫方知道了被呼叫方准备建立RTC连接的消息。

3.5、被呼叫方创建peer连接并发送offer

被呼叫方收到呼叫方的回复后，知道了呼叫方已经做好准备了，于是创建peer连接：

this.createPeerConnection();
peer.createOffer(createOfferAndSendMessage, handleCreateOfferError);
// 创建RTCPeerConnection对象
function createPeerConnection() {
    const configuration = {
        iceServers: [
            {
                urls: ["stun:这里是stun服务地址:3478"]
            },
            {
                urls: "turn:这里是turn服务地址:3478",
                username: "turn服务账号",
                credential: "turn服务密码"
            }
        ]
    };
    peer = new RTCPeerConnection(configuration);
    // 下面两个方法在3.9中补充
    peer.onicecandidate = handleIceCandidate;
    peer.onaddstream = handleRemoteStreamAdded;
    for (const trac of localStream.getTracks()) {
        peer.addTrack(trac, localStream);
    }
}
// 被呼叫方创建offer并发送offer给呼叫方
function createOfferAndSendMessage(sessionDescription) {
    peer.setLocalDescription(sessionDescription).then(() => {
        ws.send(JSON.stringify(
            {
                type: 'TO_ONE',
                uid: this.getCurrentUid(),
                to: this.getCallUid(),
                content: {
                    type: "PASSIVE_OFFER",
                    callUid: this.getCurrentUid(),
                    offer: sessionDescription
                }
            }
        ));
    })
}

3.6、呼叫方接受offer

呼叫方收到被呼叫方的offer后先创建自己的RTCPeerConnection对象，然后根据被呼叫方发来的offer设置远程连接。

// createPeerConnection方法和上面的一样
this.createPeerConnection();
// message.offer就是被呼叫方发送过来的
peer.setRemoteDescription(new RTCSessionDescription(message.offer));

3.7、呼叫方创建并发送应答

呼叫方接受了offer后需要发送一份应答给被呼叫方，以让被呼叫方也知道呼叫方的地址。

peer.createAnswer().then(createAnswerAndSendMessage, handleCreateAnswerError);
// 呼叫方创建offer应答
function createAnswerAndSendMessage(sessionDescription) {
    peer.setLocalDescription(sessionDescription);
    ws.send(JSON.stringify(
        {
            type: 'TO_ONE',
            uid: this.getCurrentUid(),
            to: this.getCallUid(),
            content: {
                type: "ACTIVE_ANSWER",
                callUid: this.getCurrentUid(),
                answer: sessionDescription
            }
        }
    ))
}

3.8、被呼叫方接收应答

被呼叫方接收到呼叫方的应答后，根据呼叫方的应答创建RTCSessionDescription对象。

// 这里的message.answer是呼叫方发送来的应答
peer.setRemoteDescription(new RTCSessionDescription(message.answer));

3.9、处理ICE候选

在步骤3.5中创建RTCPeerConnection对象是指定了handleIceCandidate和handleRemoteStreamAdded两个方法。一个是指定如果接收到了远程的视频流后如何处理，另一个是如何处理本地的视频流。

// 处理远程视频流
const handleRemoteStreamAdded = (event) => {
    remoteStream= event.stream;
    smallVideo.srcObject = remoteStream;
    smallVideo.play()
}
// 处理ICE候选
const handleIceCandidate = (event) => {
    if (event.candidate) {
        ws.send(JSON.stringify(
            {
                type: 'TO_ONE',
                uid: this.getCurrentUid(),
                to: this.getCallUid(),
                content: {
                    type: "CANDIDATE",
                    callUid: this.getCurrentUid(),
                    candidate: event.candidate
                }
            }
        ))
    }
}

4、停止视频数据传输

即微信视频中时暂时停止视频画面的传输。

localStream.getVideoTracks()[0].enabled = false;

重新开启摄像头视频的传输重新设置为true即可。

5、停止音频数据传输

即微信视频中时暂停麦克风的输入。

localStream.getAudioTracks()[0].enabled = false;

重新开启麦克风的传输重新设置为true即可。

6、最终效果

"WebRTC实现效果图" style="zoom: 25%;" />![
在这里插入图片描述](https://i-blog.csdnimg.cn/direct/06548629c81d47b9b9d315a5c148f6e1.png)

完整代码请在公众号【全栈开发日记】后台回复“WebRTC”获取。

C站直链下载地址：https://download.youkuaiyun.com/download/Stand_Fast/89978217