本文共 2707 字,大约阅读时间需要 9 分钟。
准备局域网内两台设备(Peer A、Peer B)用最新版本浏览器(demo未适配低版本)分别打开demo页面(也可以是同一浏览器打开两个标签)。
勾选页面中的H5版语音通话聊天,在Peer A中点击新建连接。
把Peer A的本机信手动复制传输给Peer B,粘贴到远程信息中,并点击确定连接。
把Peer B自动生成的本机信息手动复制传输给Peer A,粘贴到远程信息中,并点击确定连接。
双方P2P连接已建立,使用页面上方的录音功能,随时开启录音,音频数据会实时发送给对方。
/******Peer A(本机)******/var peerA=new RTCPeerConnection(null,null)//开启会话,等待远程连接peerA.createOffer().then(function(offer){ peerA.setLocalDescription(offer); peerAOffer=offer;});var peerAICEList=[......] //通过peerA.onicecandidate监听获得所有的ICE连接信息候选项,如果有多个网络适配器,就会有多个候选//创建连接通道对象,A端通过这个来进行数据发送var peerAChannel=peerA.createDataChannel("RTC Test");/******Peer B(远程)******/var peerB=new RTCPeerConnection(null,null)//连接到Peer ApeerB.setRemoteDescription(peerAOffer);//开启应答会话,等待Peer A确认连接peerB.createAnswer().then(function(answer){ peerB.setLocalDescription(answer); peerBAnswer=answer;});//把Peer A的连接点都添加进去peerB.addIceCandidate(......peerAICEList)var peerBICEList=[......] //通过peerB.onicecandidate监听获得所有的ICE连接信息候选项,如果有多个网络适配器,就会有多个候选var peerBChannel=... //通过peerB.ondatachannel得到连接通道对象,B端通过这个来进行数据发送/*******最终完成连接********///连接到Peer BpeerA.setRemoteDescription(peerBAnswer);//把Peer B的连接点都添加进去peerA.addIceCandidate(......peerBICEList)/*peerA peerB分别等待peerA/BChannel.onopen回调即完成P2P连接,然后通过监听peerA/BChannel.onmessage获得对方发送的信息,通过peerA/BChannel.send(data) 发送数据。*/
实时解码播放
双Audio轮换播放
数据传输改成WebSocket,做个仿微信语音通话H5版还是可以的(受限于Recorder浏览器支持)
局域网H5版对讲机(前端玩具)
......没有想到
转载地址:http://wufpi.baihongyu.com/