primera version de mensajes

AlvaroRamirezCastillo · Feb 9, 2024 · 9a3b548 · 9a3b548
1 parent 8913a58
commit 9a3b548
Show file tree

Hide file tree

Showing 5 changed files with 305 additions and 362 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <meta charset="utf-8">
+    <meta name="description" content="WebRTC code samples">
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
+    <meta itemprop="description" content="Client-side WebRTC code samples">
+    <meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
+    <meta itemprop="name" content="WebRTC code samples">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta id="theme-color" name="theme-color" content="#ffffff">
+
+    <base target="_blank">
+
+    <title>Transmit text</title>
+
+    <link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
+
+</head>
+
+<body>
+
+    <div id="container">
+
+        <div id="buttons">
+            <button id="startButton">Start</button>
+            <button id="sendButton">Send</button>
+            <button id="closeButton">Stop</button>
+        </div>
+
+        <div id="sendReceive">
+            <div id="send">
+                <h2>Send</h2>
+                <textarea id="dataChannelSend" disabled
+                    placeholder="Press Start, enter some text, then press Send."></textarea>
+            </div>
+            <div id="receive">
+                <h2>Receive</h2>
+                <textarea id="dataChannelReceive" disabled></textarea>
+            </div>
+        </div>
+
+    </div>
+
+    <script src="main.js" async></script>
+
+</body>
+
+</html>
diff --git a/demo/main.js b/demo/main.js
@@ -0,0 +1,151 @@
+/*
+ *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+
+'use strict';
+
+let localConnection;
+let remoteConnection;
+let sendChannel;
+let receiveChannel;
+const dataChannelSend = document.querySelector('textarea#dataChannelSend');
+const dataChannelReceive = document.querySelector('textarea#dataChannelReceive');
+const startButton = document.querySelector('button#startButton');
+const sendButton = document.querySelector('button#sendButton');
+const closeButton = document.querySelector('button#closeButton');
+
+startButton.onclick = createConnection;
+sendButton.onclick = sendData;
+closeButton.onclick = closeDataChannels;
+
+function enableStartButton() {
+  startButton.disabled = false;
+}
+
+function disableSendButton() {
+  sendButton.disabled = true;
+}
+
+function createConnection() {
+  localConnection = new RTCPeerConnection();
+  sendChannel = localConnection.createDataChannel('sendDataChannel');
+  localConnection.onicecandidate = e => {
+    console.log(1, 'local')
+    onIceCandidate(localConnection, e);
+  };
+  sendChannel.onopen = onSendChannelStateChange;
+  sendChannel.onclose = onSendChannelStateChange;
+
+  remoteConnection = new RTCPeerConnection();
+  console.log('Created remote peer connection object remoteConnection');
+
+  remoteConnection.onicecandidate = e => {
+    console.log(1, 'remote')
+    onIceCandidate(remoteConnection, e);
+  };
+  remoteConnection.ondatachannel = receiveChannelCallback;
+
+  localConnection.createOffer().then(
+    gotDescription1,
+    onCreateSessionDescriptionError
+  );
+}
+
+function onCreateSessionDescriptionError(error) {
+  console.log('Failed to create session description: ' + error.toString());
+}
+
+function sendData() {
+  const data = dataChannelSend.value;
+  sendChannel.send('hola mundo');
+  console.log('Sent Data: ' + data);
+}
+
+function closeDataChannels() {
+  // console.log('Closing data channels');
+  // sendChannel.close();
+  // console.log('Closed data channel with label: ' + sendChannel.label);
+  // receiveChannel.close();
+  // console.log('Closed data channel with label: ' + receiveChannel.label);
+  // localConnection.close();
+  // remoteConnection.close();
+  // localConnection = null;
+  // remoteConnection = null;
+  // console.log('Closed peer connections');
+  // startButton.disabled = false;
+  // sendButton.disabled = true;
+  // closeButton.disabled = true;
+  // dataChannelSend.value = '';
+  // dataChannelReceive.value = '';
+  // dataChannelSend.disabled = true;
+  // disableSendButton();
+  // enableStartButton();
+}
+
+function gotDescription1(desc) {
+  localConnection.setLocalDescription(desc);
+  // console.log(`Offer from localConnection\n${desc.sdp}`);
+  remoteConnection.setRemoteDescription(desc);
+  remoteConnection.createAnswer().then(
+    gotDescription2,
+    onCreateSessionDescriptionError
+  );
+}
+
+function gotDescription2(desc) {
+  remoteConnection.setLocalDescription(desc);
+  // console.log(`Answer from remoteConnection\n${desc.sdp}`);
+  localConnection.setRemoteDescription(desc);
+}
+
+function getOtherPc(pc) {
+  return (pc === localConnection) ? remoteConnection : localConnection;
+}
+
+function getName(pc) {
+  return (pc === localConnection) ? 'localPeerConnection' : 'remotePeerConnection';
+}
+
+function onIceCandidate(pc, event) {
+  getOtherPc(pc)
+    .addIceCandidate(event.candidate)
+    .then(
+      onAddIceCandidateSuccess,
+      onAddIceCandidateError
+    );
+}
+
+function onAddIceCandidateSuccess() {
+  console.log('AddIceCandidate success.');
+}
+
+function onAddIceCandidateError(error) {
+  console.log(`Failed to add Ice Candidate: ${error.toString()}`);
+}
+
+function receiveChannelCallback(event) {
+  console.log('Receive Channel Callback');
+  receiveChannel = event.channel;
+  receiveChannel.onmessage = onReceiveMessageCallback;
+  receiveChannel.onopen = onReceiveChannelStateChange;
+  receiveChannel.onclose = onReceiveChannelStateChange;
+}
+
+function onReceiveMessageCallback(event) {
+  console.log('Received Message', event.data);
+  dataChannelReceive.value = event.data;
+}
+
+function onSendChannelStateChange() {
+  const readyState = sendChannel.readyState;
+  console.log('Send channel state is: ' + readyState);
+}
+
+function onReceiveChannelStateChange() {
+  const readyState = receiveChannel.readyState;
+  console.log(`Receive channel state is: ${readyState}`);
+}