`
haoningabc
  • 浏览: 1483345 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

webrtc学习笔记八(datachannnel同步textarea)

阅读更多
2020年5月12日更新
出现错误
websocket Failed to execute 'send' on 'WebSocket': Still in CONNECTING state
参考:https://blog.csdn.net/bossxu_/article/details/102977802

原因是
pc.createOffer 的时候websocket还没建立完,socket.send出现问题,
把这段代码加到websocket.onopen事件里就好了:
去掉jquery的版本,直接使用textare的input事件

2020年5月13日更新:
node的server 改成 map的方式,
webrtc6.html
交互原理:https://www.cnblogs.com/cther/p/myPeerConnection.html

<html>
<head></head>
<body>
this connection is :<span id="conn"></span>
<div id="conn_show">
  <a  id="conn_link" href="#">call me</a>
</div></br>
<textarea id="dataChannelSend" >please change me</textarea>
<script>
		window.onload = function () {//dont use jquery
			console.log("onload---->");
			var el = document.getElementById('dataChannelSend');
			el.addEventListener('input',function () {
				console.log("input");
				sendData();
      	  	});
			el.addEventListener('propertychange',function () {//兼容IE
				console.log("property");
				sendData();
      		});
		}
		function getQueryVariable(variable)
		{
		       var query = window.location.search.substring(1);
		       var vars = query.split("&");
		       for (var i=0;i<vars.length;i++) {
		               var pair = vars[i].split("=");
		               if(pair[0] == variable){return pair[1];}
		       }
		       return(false);
		}
		var this_conn = parseInt(Math.random() * 10);
		console.log("connnnnn:"+this_conn);
		console.log("getQueryVariable:"+getQueryVariable('c'));
        var isCaller =getQueryVariable("c");
        var socket = new WebSocket("ws://127.0.0.1:3000");
		var myrole = "callee";
		if(isCaller){//第一个链接显示可以拨打我,第二个链接显示我在拨打
			myrole = "caller";
			this_conn=isCaller;
			document.getElementById("conn_show").innerText="I am a caller";
		}else{
			document.getElementById("conn_link").href="http://localhost:3000?c="+this_conn;
	        document.getElementById("conn_link").target="_blank";
		}
		document.getElementById("conn").innerText=this_conn;
		socket.onopen = function(){ // modify by hao 2020.05.12
			console.log("websocket opening --->");
			socket.send(JSON.stringify({
                        //"name":"123",
                        "name":this_conn,
                        "role":myrole,
                        "event": "connect",//add by hao
                        "data": {}
            }));
		    if(isCaller){
        	    console.log("------->createOffer");
        	    pc.createOffer(function(desc){
        	    	//  console.log(desc);
        	        pc.setLocalDescription(desc);
        	        console.log("---------------->pc.setLocal");
        	        socket.send(JSON.stringify({
						"name":this_conn,
						"role":myrole,
        	            "event": "_offer",
        	            "data": {
        	                "sdp": desc
        	            }
        	        }));
        	    }, function (error) {
        	        console.log('Failure callback: ' + error);
        	    });
        	}else{
			}
		}
        socket.onmessage = function(event){
            var json = JSON.parse(event.data);
            //console.log('onmessage: ', json);
            //如果是一个ICE的候选,则将其加入到PeerConnection中,否则设定对方的session描述为传递过来的描述
            if( json.event === "_ice_candidate" ){
                pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
            } else {
                pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
                console.log("---------------->pc.setRemote");
                // 如果是一个offer,那么需要回复一个answer
                if(json.event === "_offer") {
                	console.log("------->createAnswer");
                    pc.createAnswer(function(desc){
			            pc.setLocalDescription(desc);
			            console.log("---------------->pc.setLocal");
			            socket.send(JSON.stringify({
//							"name":"123",
							"name":this_conn,
							"role":myrole,
			                "event": "_answer",
			                "data": {
			                    "sdp": desc
			                }
			            }));
			        }, function (error) {
                        console.log('Failure callback: ' + error);
                    });
                }else{
                	console.log("------->receive Answer---('"+json.event+"')");
                }

            }
        };
        var iceServer = null;
        var pc = new webkitRTCPeerConnection(iceServer,{optional: [{RtpDataChannels: true}]});
        try {
		    sendChannel = pc.createDataChannel('sendDataChannel',{reliable: true});
		} catch (e) {
		    alert('createDataChannel() failed with exception: ' + e.message);
		}
		sendChannel.onopen = console.log('--Send channel open state is : ' +sendChannel.readyState);
  		sendChannel.onclose = console.log('--Send channel close  state is: ' +sendChannel.readyState);
        // 发送ICE候选到其他客户端
        pc.onicecandidate = function(event){
        	console.log("onicecandidate----------->");
            if (event.candidate !== null) {
            	console.log("event.candidate   !=   null");
                socket.send(JSON.stringify({
				//	"name":"123",
					"name":this_conn,
					"role":myrole,
                    "event": "_ice_candidate",
                    "data": {
                        "candidate": event.candidate
                    }
                }));
            }else{
            	console.log("event.candidate   == null");
            }
        };
    	sendChannel.onmessage = function(event) {
    		  console.log("-sendChannel.onmessage--★★★★★");
   			  document.getElementById('dataChannelSend').value = event.data;
		};
//		pc.ondatachannel = function(event) {
//            console.log("-ondatachannel--★★★★★---ondatachannel");
//      };
        function sendData() {
		  var data = document.getElementById('dataChannelSend').value;
		  console.log("---->>>>sendData():"+data);
		  sendChannel.send(data);
		}
    </script>
</body>
</html>


server.js
//http://www.blogjava.net/linli/archive/2014/10/21/418910.html
var express = require('express'),
app = express(),
server = require('http').createServer(app);
server.listen(3000);
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/webrtc6.html');
});
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({server: server});
ws_map = new Map(),
wss.on('connection', function(ws) {
 //   console.log('connection:');
    console.log('connection:\t'+JSON.stringify(ws,null,'\t'));
    ws.on('message', function(message) {
        var json = JSON.parse(message);
        console.log('conn map length: ' + ws_map.size );
        console.log("json:"+json.event+",name:"+json.name+",role:"+json.role);
        var thisrole = "callee";
        var wsname;
        if(json.role!=null && json.role == "caller"){
            wsname=json.name+"callee";
        }else{
            wsname=json.name+"caller";
        }
        if(json.event != 'connect'){
            console.log("wsname:"+wsname);
            var otherwx = ws_map.get(wsname);
            if(otherwx){
                otherwx.send(message, function (error) {
                    if (error) {
                        console.log('Send message error (' + desc + '): ', error);
                    }
                });
            }else{
                console.error("error:not find the connection:"+wsname);
            }
        }else{
            console.log("will add "+json.name+json.role);
            ws_map.set(json.name+json.role,ws)
        }
    });
});



测试:
node server.js

一个浏览器打开:http://localhost:3000/
如果 看到connect的数字为 6

另一个浏览器打开:http://localhost:3000/?c=6

体验互相更改的文本

类似www.showmebug.com
分享到:
评论

相关推荐

    WebRTC学习笔记_Demo收集 .docx

    ### WebRTC学习笔记_Demo收集 #### 一、WebRTC现状与历史背景 WebRTC(Web Real-Time Communication)是一项开放的、免费的技术框架,旨在使Web浏览器能够在无需插件的情况下进行实时音视频通信。该技术最初由...

    webrtc学习笔记一 (视频流)

    这篇“webrtc学习笔记一”主要关注的是视频流处理,是WebRTC技术中的核心部分。在深入讨论之前,先了解一下WebRTC的基本架构和组成部分。 1. **基础概念**: - **Peer Connection**: 是WebRTC的核心组件,负责...

    Webrtc学习笔记-V1

    WebRTC(Web Real-Time Communication)是一项核心技术,允许网页浏览器实现实时的音频、视频通信,无需用户安装额外的插件。这项技术源自谷歌对GlobalIP Solutions公司的收购,它包含了一系列的组件,旨在构建一个...

    WebRTC学习笔记01-最简单实现一对一视频通讯代码

    在"WebRTC学习笔记01-最简单实现一对一视频通讯代码"中,我们将探讨WebRTC的基础知识以及如何通过简单的代码实现一对一视频通话。 首先,WebRTC的核心组件包括: 1. **RTCPeerConnection**:这是WebRTC中最关键的...

    WebRTC学习之三:录音和播放

    使用WebRTC进行录音和播放可能会遇到的问题包括:网络延迟、同步问题、编码解码兼容性、音频质量控制等。解决这些问题需要对网络协议、音频处理和WebRTC架构有深入了解。 8. 开发流程: 一般来说,开发这样一个...

    Webrtc源码开发笔记1 —Webrtc视频编码打包流程模块图解.zip

    Webrtc源码开发笔记1 —Webrtc视频编码打包流程模块图解 梳理webrtc从transceiver到transport流程,从而宏观上了解webrtc视频采集,编码,打包发送等相关流程与相关模块的对应关系,为开发和快速定位问题提供参考。

    WebRTC学习之四:最简单的语音聊天

    使用WebRTC实现了最简单的语言聊天 详见博客:http://blog.csdn.net/caoshangpa/article/details/53889057

    WebRTC 学习资源

    WebRTC 学习资源

    WebRTC API 的纯 Rust 实现

    赶上 pion/rtp v1.6.2RTCP:webrtc-rs/rtcp同步到pion/rtcp/v1.2.4完成:赶上 pion/rtcp v1.2.6SRTP:webrtc-rs/srtp同步到pion/srtp/v1.5.2完成:赶上 pion/srtp/v2 v2.0.2DTLS:webrtc-rs/dtls同步到pion/dtls/v...

    webrtc源码之八

    webrtc 272489源码系列(27之7),内含depot_tools、vs2013工程文件。 自解压文件,需要下载此系列其他26个文件后解压。

    webrtc基于webrtc-streamer推流实现直播

    WebRTC(Web Real-Time Communication)是一种开放的网络通信框架,允许网页浏览器进行实时通信,无需插件或额外软件。在本项目中,我们将探讨如何利用WebRTC-Streamer来实现直播功能,前端则采用Vue3技术栈。 ...

    webrtc.rar_webRTC AEC实例_webrtc_webrtc arm_webrtc resample_webrtc

    webRTC的AEC实例,可直接运行,便于初学者学习了解webRTC。

    Learning WebRTC中文版-用WebRTC开发交互实时通信应用

    WebRTC 是一个支持网络浏览器进行实时语音对话或视频对话的软件架构。...《Learning WebRTC 中文版》适合有一定HTML 和JavaScript 经验,希望了解WebRTC 并想学习实时通信工作原理的开发者参考阅读。

    中文版WebRTC教程

    总的来说,这份“中文版WebRTC教程”将带你走进WebRTC的世界,通过详细的学习和实践,你可以掌握实时通信技术,为开发互动性强、体验优秀的Web应用打下坚实的基础。无论是在线教育、远程医疗还是实时协作工具,...

    webRTC的直播播放器

    WebRTC(Web Real-Time Communication)是一种开放的网络标准,它允许在浏览器之间进行实时通信,无需插件或第三方软件。这个技术广泛应用于视频聊天、在线会议、直播播放等领域。在这个场景下,我们讨论的是一个...

    webRtc的示例代码

    学习并使用"SimpleWebRTC-master"这个示例,开发者可以更好地理解WebRTC的工作原理,从而快速地开发出自己的音视频应用。通过阅读和调试代码,你可以了解如何整合上述各个组件,实现端对端的通信功能,尤其在内网...

    基于webrtc的视频会议系统源码.zip

    2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于...

    WebRTC零基础开发者教程

    **正文** WebRTC(Web Real-Time Communication)是Google推出的...通过阅读《WebRTC零基础开发者教程.pdf》这份文档,你可以系统地学习WebRTC的各个方面,并通过实例操作加深理解,逐渐成为一名熟练的WebRTC开发者。

    windows下webRTC服务器及测试环境搭建

    WebRTC(Web Real-Time Communication)是一种开放的网络通信框架,用于实现浏览器之间的实时音视频通信。在Windows操作系统下搭建WebRTC...同时,学习和理解WebRTC的交互报文机制对于开发和调试WebRTC应用至关重要。

Global site tag (gtag.js) - Google Analytics