webrtc 局域网内文本通信

2024-04-27 15:10:30

字体：大中小

来源：转载

供稿：网友

环境

Microsoft Windows [版本 10.0.14393] Google Chrome 版本 55.0.2883.87 m (64-bit)

主要流程

简单通信流程：

代码

传输Description 和 Candidate 需要通过其他通信通道进行,例如Ajax,websocket,这里采用手动复制粘贴内容代替

index.html

<html><head><meta charset='utf-8' ><title>WEBRTC</title><style>#log{ border:2px solid red; width:500px; height:500px;}.tip{color:blue;}.message{color:green;}</style></head><body><div class="container"> <div><input id="callBtn" value="请求呼叫" type="button"/><input id="myDescription" type="text" placeholder="我的Description" /><input id="myCandidate" type="text" placeholder="我的Candidate" /></div> <div><input id="anDescription" type="text" placeholder="对方的Description" /><input id="anCandidate" type="text" placeholder="对方的Candidate" /><input id="anBtn" value="确定" type="button"/></div> <div><input id="answerBtn" value="接听" type="button"/><input id="hangBtn" value="挂机" type="button"/></div> <div><input id="contentInput" type="text" placeholder="发送文字内容" /><input id="sendBtn" value="发送" type="button"/></div> <div id="log"> <div class="tip">1.呼叫方点击请求呼叫 </div> </div></div> <script>/****操作提示*/function tip(msg){ var d=document.createElement("div"); d.className="tip"; d.innerHTML=msg; log.appendChild(d);}/****操作提示*/function message(msg){ var d=document.createElement("div"); d.className="message"; d.innerHTML=msg; log.appendChild(d);}</script><script src="index.js"> </script></body></html>

index.js

//主要流程，其他方式传输 Description 和 Candidate//呼叫方 createDataChannel->createOffer->获得和传输本身Description 和 Candidate ↓↓ -- >接收和设置对方传输Description 和 Candidate -->OK //接听方接收对方传输Description 和 Candidate -->createAnswer --> 获得和传输本身Description 和 Candidate ↑↑ -->OKvar RTCPeerConnection=RTCPeerConnection||webkitRTCPeerConnection;var pc; var mediaConstraints = null; var conf=null; pc = new RTCPeerConnection(conf,mediaConstraints);pc.onconnectionstatechange=function(){ console.log(arguments);}; pc.ondatachannel=function(e){ console.log("传输通道打开",arguments); channel =e.channel; channel.onopen = function() { tip("等待接收消息"); console.log("接收通道打开",arguments); }; channel.onclose = function() { tip("断开消息通道"); console.log("接收通道关闭",arguments); }; channel.onmessage = function(e) { console.log("接收通道信息",arguments); message("收到:"+e.data); };}; pc.onicecandidate=function(e){ if(e.candidate) { //这里传输candidate给对方 myCandidate.value=JSON.stringify(e.candidate); } console.log("获取ice",arguments);}; pc.oniceconnectionstatechange=function(){ console.log(arguments);}; pc.onidentityresult=function(){ console.log(arguments);}; pc.onidpassertionerror=function(){ console.log(arguments);}; pc.onidpvalidationerror=function(){ console.log(arguments);}; pc.onnegotiationneeded=function(){ console.log("需要协商",arguments); pc.createOffer().then(function(offer) { console.log("分配内容",offer); myDescription.value=JSON.stringify(offer); //这里传输Description 给接听方 , 手动复制 tip("2.将我的Description 和 Candidate复制到接听方对应的对方的Description 和 Candidate ,接听方点击接听"); return pc.setLocalDescription(offer); });}; pc.onpeeridentity=function(){ console.log(arguments);}; pc.onremovestream=function(){ console.log(arguments);}; pc.onsignalingstatechange=function(){ console.log(arguments);}; pc.ontrack=function(){ console.log(arguments);}; var channel;//请求呼叫callBtn.onclick=function(){ channel =pc.createDataChannel("hehe",mediaConstraints);//可以发送文字什么的 channel.onopen = function() { tip("可以发送消息"); console.log("hehe通道打开",arguments); }; channel.onclose = function() { tip("关闭消息通道"); console.log("hehe通道关闭",arguments); }; channel.onmessage = function(e) { console.log("hehe通道信息",arguments); message("收到:"+e.data); };};sendBtn.onclick=function(){ channel.send(contentInput.value);};//接听输入的请求地址answerBtn.onclick=function(){ //这里获取传输过来的 Description ,手动粘贴 pc.setRemoteDescription(new RTCsessionDescription(JSON.parse(anDescription.value))); pc.createAnswer().then(function(ans){ console.log("分配内容",ans); myDescription.value=JSON.stringify(ans); //这里传输Description给呼叫方 , 手动复制 tip("3.将我的Description 和 Candidate复制到呼叫方对应的对方的Description 和 Candidate ,呼叫方点击确认"); pc.setLocalDescription(ans); }); pc.addIceCandidate(JSON.parse(anCandidate.value));};//请求呼叫方确认呼叫方的地址anBtn.onclick=function(){ pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(anDescription.value))); pc.addIceCandidate(JSON.parse(anCandidate.value));};//关闭hangBtn.onclick=function(){ channel.close(); pc.close();}

上一篇：nodejs开发框架

下一篇：JQuery常用基础