https://www.webrtc-experiment.com/DataChannel/
https://www.npmjs.com/package/datachannel.io
datachannel.io
官方：
http://www.html5rocks.com/en/tutorials/webrtc/datachannels/?redirect_from_locale=zh
本地调用的传数据的datachannel
<!DOCTYPE html>
<html>
<head><title>RTCDataChannel</title></head>
<body>
<button id="startButton" onclick="createConnection()">Start</button>
<button id="sendButton" onclick="sendData()">Send</button>
<button id="closeButton" onclick="closeDataChannels()">Stop</button>
<textarea id="dataChannelSend" >abc</textarea>
<textarea id="dataChannelReceive" ></textarea>
<script type="text/javascript">
var localPeerConnection, remotePeerConnection;//用于peer跟peer之间呼叫和建立连接以便传输音视频数据流
var sendChannel, receiveChannel;//用于peer跟peer之间传输音视频之外的一般数据。
function trace(text) {
console.log((window.performance.now() / 1000).toFixed(3) + ': ' + text);
}
function createConnection() {
var servers = null;
localPeerConnection = window.localPeerConnection =new webkitRTCPeerConnection(servers,{optional: [{RtpDataChannels: true}]});
remotePeerConnection = window.remotePeerConnection = new webkitRTCPeerConnection(servers,{optional: [{RtpDataChannels: true}]});
try {
sendChannel = localPeerConnection.createDataChannel('sendDataChannel',{reliable: false});
} catch (e) {
alert('createDataChannel() failed with exception: ' + e.message);
}
localPeerConnection.onicecandidate = function(event) {
if (event.candidate) {
remotePeerConnection.addIceCandidate(event.candidate);
trace('★★★★★Local ICE candidate: \n' + event.candidate.candidate);
}
}
remotePeerConnection.onicecandidate = function(event) {
if (event.candidate) {
localPeerConnection.addIceCandidate(event.candidate);
trace('★★★Remote ICE candidate: \n ' + event.candidate.candidate);
}
};
sendChannel.onopen = trace('--Send channel open state is : ' +sendChannel.readyState);;
sendChannel.onclose = trace('--Send channel close state is: ' +sendChannel.readyState);;
remotePeerConnection.ondatachannel = function(event) {
receiveChannel = event.channel;
receiveChannel.onmessage = function(event) {
document.getElementById('dataChannelReceive').value = event.data;
};
receiveChannel.onopen = trace('--Receive channel open state is: ' + receiveChannel.readyState);;
receiveChannel.onclose = trace('--Receive channel close state is: ' + receiveChannel.readyState);;
};
localPeerConnection.createOffer(gotLocalDescription);//
}
function sendData() {
var data = document.getElementById('dataChannelSend').value;
sendChannel.send(data);
}
function closeDataChannels() {
console.log("------close");
sendChannel.close();
receiveChannel.close();
localPeerConnection.close();
remotePeerConnection.close();
localPeerConnection = null;
remotePeerConnection = null;
}
function gotLocalDescription(desc) {
trace("createOffer gotLocalDescription--->");
localPeerConnection.setLocalDescription(desc);
// trace('------|||||----Offer from localPeerConnection \n' + desc.sdp);
remotePeerConnection.setRemoteDescription(desc);
remotePeerConnection.createAnswer(gotRemoteDescription);//
}
function gotRemoteDescription(desc) {
trace("createAnswer gotRemoteDescription--->");
remotePeerConnection.setLocalDescription(desc);
//trace('------------->>>>>>>>>>>>Answer from remotePeerConnection \n' + desc.sdp);
localPeerConnection.setRemoteDescription(desc);
}
</script>
</body>
</html>
分享到：
相关推荐
### WebRTC学习笔记_Demo收集 #### 一、WebRTC现状与历史背景 WebRTC（Web Real-Time Communication）是一项开放的、免费的技术框架，旨在使Web浏览器能够在无需插件的情况下进行实时音视频通信。该技术最初由...
这篇“webrtc学习笔记一”主要关注的是视频流处理，是WebRTC技术中的核心部分。在深入讨论之前，先了解一下WebRTC的基本架构和组成部分。 1. **基础概念**： - **Peer Connection**: 是WebRTC的核心组件，负责...
WebRTC（Web Real-Time Communication）是一项核心技术，允许网页浏览器实现实时的音频、视频通信，无需用户安装额外的插件。这项技术源自谷歌对GlobalIP Solutions公司的收购，它包含了一系列的组件，旨在构建一个...
在"WebRTC学习笔记01-最简单实现一对一视频通讯代码"中，我们将探讨WebRTC的基础知识以及如何通过简单的代码实现一对一视频通话。 首先，WebRTC的核心组件包括： 1. **RTCPeerConnection**：这是WebRTC中最关键的...
WebRTC C ++示例在C ++上使用WebRTC（DataChannel）的示例程序（README.en.md是此文件的英文翻译。） 使用C ++中的WebRTC DataChannel的示例代码。要求Mac OS X 的Ubuntu编译$ cd $ git clone --depth 1 ...
在本项目“WebRTC学习之三：录音和播放”中，我们将探讨如何利用C++来实现WebRTC的功能，特别是录音和播放操作，并结合Qt库创建用户界面。 1. WebRTC基础： WebRTC提供了包括音频、视频和数据共享在内的实时通信...
Webrtc源码开发笔记1 —Webrtc视频编码打包流程模块图解 梳理webrtc从transceiver到transport流程，从而宏观上了解webrtc视频采集，编码，打包发送等相关流程与相关模块的对应关系，为开发和快速定位问题提供参考。
使用WebRTC实现了最简单的语言聊天 详见博客：http://blog.csdn.net/caoshangpa/article/details/53889057
webrtc 272489源码系列（27之2），内含depot_tools。 自解压文件，需要下载此系列其他26个文件后解压。
WebRTC 学习资源
webrtc_vs2015,已经成功编译。内含完整webrtc源码第二部分
在本项目中，我们主要关注的是使用Vue3和NestJS构建一个1v1的WebRTC视频通话系统。WebRTC（Web Real-Time Communication）是一种开放的API标准，它允许浏览器之间进行实时通信，包括音频、视频和数据共享，无需任何...
这个“Learning WebRTC代码.rar”压缩包显然包含了与WebRTC技术相关的学习资源，特别是随书配套的代码示例，可以帮助读者深入理解WebRTC的工作机制。 WebRTC的核心功能包括音视频通信、数据共享和信令传输。以下将...
WebRTC学习之二：编译（Win10+VS2015）-附件资源
WebRTC（Web Real-Time Communication）是一种开放的网络通信框架，允许网页浏览器进行实时通信，无需插件或额外软件。在本项目中，我们将探讨如何利用WebRTC-Streamer来实现直播功能，前端则采用Vue3技术栈。 ...
WebRTC（Web Real-Time Communication）是一种开放的网络技术，它允许网页浏览器进行实时通信（RTC），无需任何插件或第三方软件。SRS（Simple Real-Time Streaming）是一个高性能、灵活的开源流媒体服务器，广泛...
webRTC的AEC实例，可直接运行，便于初学者学习了解webRTC。
WebRTC 是一个支持网络浏览器进行实时语音对话或视频对话的软件架构。...《Learning WebRTC 中文版》适合有一定HTML 和JavaScript 经验，希望了解WebRTC 并想学习实时通信工作原理的开发者参考阅读。
WebRTC（Web Real-Time Communication）是一种开放的网络标准，它允许在浏览器之间进行实时通信，无需插件或第三方软件。SRS（Simple Real-time Streaming）是一个高性能、轻量级的实时流媒体服务器，广泛应用于直播...