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

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

<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>

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

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

<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));
},

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
                }
            }
        ));
    })
}

// createPeerConnection方法和上面的一样
this.createPeerConnection();
// message.offer就是被呼叫方发送过来的
peer.setRemoteDescription(new RTCSessionDescription(message.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
            }
        }
    ))
}

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

// 处理远程视频流
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
                }
            }
        ))
    }
}

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

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