概述上节完成webrtc基本实例这节详细讲解webrtc通信。将其复杂的交互分解逐步梳理便于日后维护对其兼容部分予以说明。webrtc建立之前需交互sdk与ice。sdk关于音视频编码内容ice是关于设备网络信息。嘟妈发起通信嘟妈采用vue3嘟宝Android java原生。首先嘟妈发起信息向嘟宝建立连接。嘟妈发起信息之前创建RTCPeerConnection对象peerConnection并指定Coturn服务器Coturn搭建第三章。通过对象peerConnection创建offer将设置offer将offer通过MQTT协议发送嘟宝peerConnection监听事件如icecandidate交互ice事件track音视频事件const configuration{iceServers:[{urls:stun:192.168.1.10:3478},]}// 2. 创建Offerconst offerawait peerConnection.createOffer({offerToReceiveAudio:true,offerToReceiveVideo:true});await peerConnection.setLocalDescription(offer);// 3. 通过MQTT服务发送Offer给嘟宝该函数实现略。pushmsg(offer,JSON.stringify(offer));asyncfunctionpushmsg(code,d){let msg{};msg.dubaoId8206aa74-69c5-483e-83b5-16616e3030eb;msg.dumaIdf1122aeb-f2b0-400d-9919-eddd2eaebaa2;msg.dumaName天使嘟妈;msg.codecode;msg.datad;let sJSON.stringify(msg)client.publish(/dubao/8206aa74-69c5-483e-83b5-16616e3030eb,s)}pushmsg函数封装了嘟妈向嘟宝发送数据的格式。设置嘟宝与嘟妈身份识别码固定。其中code是信令data是信令具体内容。嘟宝收到offer信令嘟宝通过MQTT收到offer信令后通过类PeerConnection开始创建对象peerConnection。创建peerConnection前需要先初始化webrtc环境创建peerConnection指定coturn服务器地址peerConnection创建设置回调事件如onIceCandidate交互事件onAddTrack流媒体事件peerConnection添加音视频流该音视频在建立连接时候发送给嘟妈peerConnection设置嘟妈offer并创建自己的answer发送嘟妈设置offerpublic voidcreatePeerConnection(String remoteSdp){ListPeerConnection.IceServericeServersnewArrayList();iceServers.add(PeerConnection.IceServer.builder(stun:192.168.1.10:3478).createIceServer());PeerConnection.RTCConfiguration confignewPeerConnection.RTCConfiguration(iceServers);peerConnectionfactory.createPeerConnection(config,newPeerConnection.Observer(){Override public voidonIceCandidate(IceCandidate iceCandidate){}Override public voidonAddTrack(RtpReceiver rtpReceiver,MediaStream[]mediaStreams){}});peerConnection.addTrack(getAudioTrack());peerConnection.addTrack(getVideoTrack());SessionDescription offerJSONSessionDescription(remoteSdp);peerConnection.setRemoteDescription(newSdpObserver(){Override public voidonSetSuccess(){print(onSetSuccess);createAnswer();}},offer);}JSONSessionDescription函数将嘟妈发送的offer转换成本地offerpeerConnection 设置offer并设置回调函数设置成功将触发onSetSuccess函数创建自己的answer创建answer嘟宝设置完成嘟妈传来的offer创建answer并发送给嘟妈peerConnection.createAnswer(newSdpObserver(){Override public voidonCreateSuccess(SessionDescription sessionDescription){peerConnection.setLocalDescription(this,sessionDescription);pushmsg(answer,(SessionDescriptionJSON(sessionDescription)));}},newMediaConstraints());pushmsg函数封装了发给嘟妈数据格式其中code是信令data是信令具体内容。嘟宝与嘟妈身份识别码是固定。private voidpushmsg(String code,String data){Msg msgnewMsg();msg.dubaoIdMyService.dubaoId;msg.dumaIdf1122aeb-f2b0-400d-9919-eddd2eaebaa2;msg.dumaName天使嘟妈;msg.codecode;msg.datadata;Gson gsonnewGson();String jsongson.toJson(msg);myMqttClient.publish(/duma/msg.dumaId,json);}嘟妈收到嘟宝answer嘟妈收到嘟宝answer通过peerConnection设置answer如下代码await peerConnection.setRemoteDescription(newRTCSessionDescription(JSON.parse(answer)));嘟妈设置answer后完成sdk交互。此时嘟妈在起初创建peerConnection设置onIceCandidate将被触发此时将ice发送给嘟宝。嘟妈将ice发送嘟宝嘟宝收到ice并设置ice后触发自己的onIceCandidate事件嘟宝在onIceCandidate事件中将ice发给嘟妈至此webrtc交互完成开始相互连接。嘟妈触发onIceCandidate函数peerConnection.addEventListener(icecandidate,(event){// console.log(event)if(event.candidate){// console.log(event.candidate);pushmsg(ice,JSON.stringify(event.candidate));}});嘟宝触发onIceCandidate函数Override public voidonIceCandidate(IceCandidate iceCandidate){Gson gsonnewGson();String sgson.toJson(iceCandidate);pushmsg(ice,s);}webrtc交互完成webrtc交互完成后将自动建立点对点连接通过peerConnection的connectionstatechange事件查看连接结果// 连接状态变化监听peerConnection.addEventListener(connectionstatechange,(){console.log(Connection state:,peerConnection.connectionState);});在track获取到远端音视频流// 监听远程流视频通话场景peerConnection.addEventListener(track,(event){const remoteVideodocument.getElementById(remoteVideo);if(remoteVideo.srcObject){remoteVideo.srcObject.addTrack(event.track);}else{remoteVideo.srcObjectnewMediaStream(event.streams[0]);}});具体代码在上节
