Skip to content

Commit

Permalink
the thing
Browse files Browse the repository at this point in the history
  • Loading branch information
mobalife committed Aug 23, 2024
1 parent d39aed4 commit 3ca2dd2
Show file tree
Hide file tree
Showing 1,235 changed files with 235,713 additions and 105 deletions.
90 changes: 75 additions & 15 deletions demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,90 @@
<html>

<body>
<input id="message" placeholder="Type your message" />
<button onclick="sendMessage()">Send</button>
<h1>Group Chat</h1>

<form id="sign">
<input id="alias" placeholder="username">
<input id="pass" type="password" placeholder="passphrase">
<input id="in" type="submit" value="sign in">
<input id="up" type="button" value="sign up">
</form>

<form id="room">
<input id="roomName" placeholder="Enter room name">
<input id="joinRoom" type="submit" value="Join Room">
</form>

<h2>Room: <span id="currentRoom">None</span></h2>

<ul id="messages"></ul>

<form id="said">
<input id="say" placeholder="Type your message">
<input id="speak" type="submit" value="Send">
</form>

<script src="https://cdn.jsdelivr.net/npm/gun/examples/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/gun/lib/webrtc.js"></script> -->
<script>
// const gun = Gun(['https://gun.eco/gun']);
// const gun = Gun(['https://themeticus.github.io/fengui/'])
// const gun = Gun(['https://your-relay-server-url.com/gun']);
const gun = Gun(['http://127.0.0.1:5500/gun']);
var gun = Gun(['http://localhost:8765/gun']);
var user = gun.user();
var currentRoom = '';

$('#up').on('click', function (e) {
user.create($('#alias').val(), $('#pass').val(), function (ack) {
if (ack.err) {
console.error('Sign-up error:', ack.err);
} else {
console.log('User created:', ack);
}
});
});

$('#sign').on('submit', function (e) {
e.preventDefault();
user.auth($('#alias').val(), $('#pass').val(), function (ack) {
if (ack.err) {
console.error('Authentication error:', ack.err);
} else {
console.log('User authenticated:', ack);
}
});
});

const messages = gun.get('messages');
$('#room').on('submit', function (e) {
e.preventDefault();
if (user.is) {
currentRoom = $('#roomName').val();
$('#currentRoom').text(currentRoom);
$('#said').show();
$('#room').hide();
user.get('rooms').get(currentRoom).map().on(function (data, id) {
UI(data, id);
});
}
});

messages.map().on(function (data, id) {
const li = document.createElement('li');
li.textContent = data;
document.getElementById('messages').appendChild(li);
$('#said').on('submit', function (e) {
e.preventDefault();
if (user.is && currentRoom) {
user.get('rooms').get(currentRoom).set({ text: $('#say').val(), user: user.is.alias });
$('#say').val("");
}
});

function sendMessage() {
const msg = document.getElementById('message').value;
messages.set(msg);
document.getElementById('message').value = '';
function UI(message, id) {
var li = $('#' + id).get(0) || $('<li>').attr('id', id).appendTo('#messages');
$(li).text(message.text + ' (' + message.user + ')');
}

gun.on('auth', function () {
$('#sign').hide();
$('#room').show();
$('#said').hide();
});
</script>
</body>

Expand Down
7 changes: 7 additions & 0 deletions demos/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
You can test all demos LIVE here:

* https://muazkhan.com:9001/

## License

[RTCMultiConnection](https://github.com/muaz-khan/RTCMultiConnection) is released under [MIT licence](https://github.com/muaz-khan/RTCMultiConnection/blob/master/LICENSE.md) . Copyright (c) [Muaz Khan](https://MuazKhan.com/).
218 changes: 218 additions & 0 deletions demos/SSEConnection.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>SSE+PHP Signaling using RTCMultiConnection</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="shortcut icon" href="/demos/logo.png">
<link rel="stylesheet" href="/demos/stylesheet.css">
<script src="/demos/menu.js"></script>
</head>
<body>
<header>
<a class="logo" href="/"><img src="/demos/logo.png" alt="RTCMultiConnection"></a>
<a href="/" class="menu-explorer">Menu<img src="/demos/menu-icon.png" alt="Menu"></a>
<nav>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/demos/">Demos</a>
</li>
<li>
<a href="https://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
</li>
<li>
<a href="https://www.rtcmulticonnection.org/FAQ/">FAQ</a>
</li>
<li>
<a href="https://www.youtube.com/playlist?list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl">YouTube</a>
</li>
<li>
<a href="https://github.com/muaz-khan/RTCMultiConnection/wiki">Wiki</a>
</li>
<li>
<a href="https://github.com/muaz-khan/RTCMultiConnection">Github</a>
</li>
</nav>
</header>

<h1>
SSE+PHP Signaling using RTCMultiConnection
<p class="no-mobile">This demo is using SSE (Server Sent Events) to setup WebRTC one-to-one connection. <a href="https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/SSEConnection">Check PHP Source Codes</a></p>
</h1>

<section class="make-center">
<input type="text" id="room-id" value="abcdef" autocorrect=off autocapitalize=off size=20>
<button id="open-room">Open Room</button>
<button id="join-room">Join Room</button>
<button id="open-or-join-room">Open or Join Room</button>

<div id="room-urls" style="text-align: center;display: none;background: #F1EDED;margin: 15px -10px;border: 1px solid rgb(189, 189, 189);border-left: 0;border-right: 0;"></div>

<div id="videos-container"></div>
</section>

<script src="/node_modules/webrtc-adapter/out/adapter.js"></script>
<script src="/dist/RTCMultiConnection.min.js"></script>
<script src="/dev/SSEConnection.js"></script>
<script>
window.enableAdapter = true; // enable adapter.js

// ......................................................
// .......................UI Code........................
// ......................................................
document.getElementById('open-room').onclick = function() {
disableInputButtons();
connection.open(document.getElementById('room-id').value, function() {
showRoomURL(connection.sessionid);
});
};

document.getElementById('join-room').onclick = function() {
disableInputButtons();
connection.join(document.getElementById('room-id').value);
};

document.getElementById('open-or-join-room').onclick = function() {
disableInputButtons();
// connection.openOrJoin(document.getElementById('room-id').value);
connection.checkPresence(document.getElementById('room-id').value, function(isRoomExist, roomid) {
console.info('checkPresence', isRoomExist, roomid);

if(isRoomExist) {
connection.join(roomid);
}
else {
connection.open(roomid);
}
});
};

// ......................................................
// ..................RTCMultiConnection Code.............
// ......................................................

var connection = new RTCMultiConnection();

// Using SSE (Server Sent Events) for signaling
connection.socketURL = 'https://muazkhan.com/SSE/';
connection.setCustomSocketHandler(SSEConnection);

connection.session = {
audio: true,
video: true
};

connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};

// https://www.rtcmulticonnection.org/docs/iceServers/
// use your own TURN-server here!
connection.iceServers = [{
'urls': [
'stun:stun.l.google.com:19302',
'stun:stun1.l.google.com:19302',
'stun:stun2.l.google.com:19302',
'stun:stun.l.google.com:19302?transport=udp',
]
}];

connection.videosContainer = document.getElementById('videos-container');
connection.onstream = function(event) {
event.mediaElement.id = event.streamid;
connection.videosContainer.appendChild(event.mediaElement);

if (event.type === 'remote') {
connection.socket.close(); // release SSE connection
}
};

connection.onstreamended = function(event) {
var mediaElement = document.getElementById(event.streamid);
if (mediaElement && mediaElement.parentNode) {
mediaElement.parentNode.removeChild(mediaElement);
}
};

function disableInputButtons() {
document.getElementById('open-room').disabled = true;
document.getElementById('join-room').disabled = true;
document.getElementById('open-or-join-room').disabled = true;
document.getElementById('room-id').disabled = true;
}

// ......................................................
// ......................Handling Room-ID................
// ......................................................

function showRoomURL(roomid) {
var roomHashURL = '#' + roomid;
var roomQueryStringURL = '?roomid=' + roomid;

var html = '<h2>Unique URL for your room:</h2><br>';

html += 'Hash URL: <a href="' + roomHashURL + '" target="_blank">' + roomHashURL + '</a>';
html += '<br>';
html += 'QueryString URL: <a href="' + roomQueryStringURL + '" target="_blank">' + roomQueryStringURL + '</a>';

var roomURLsDiv = document.getElementById('room-urls');
roomURLsDiv.innerHTML = html;

roomURLsDiv.style.display = 'block';
}

(function() {
var params = {},
r = /([^&=]+)=?([^&]*)/g;

function d(s) {
return decodeURIComponent(s.replace(/\+/g, ' '));
}
var match, search = window.location.search;
while (match = r.exec(search.substring(1)))
params[d(match[1])] = d(match[2]);
window.params = params;
})();

var roomid = '';
if (localStorage.getItem(connection.socketMessageEvent)) {
roomid = localStorage.getItem(connection.socketMessageEvent);
} else {
roomid = connection.token();
}
document.getElementById('room-id').value = roomid;
document.getElementById('room-id').onkeyup = function() {
localStorage.setItem(connection.socketMessageEvent, this.value);
};

var hashString = location.hash.replace('#', '');
if (hashString.length && hashString.indexOf('comment-') == 0) {
hashString = '';
}

var roomid = params.roomid;
if (!roomid && hashString.length) {
roomid = hashString;
}

if (roomid && roomid.length) {
document.getElementById('room-id').value = roomid;
localStorage.setItem(connection.socketMessageEvent, roomid);

// auto-join-room
connection.join(roomid);

disableInputButtons();
}
</script>

<footer>
<small id="send-message"></small>
</footer>

<script src="https://www.webrtc-experiment.com/common.js"></script>
</body>
</html>
18 changes: 18 additions & 0 deletions demos/SSEConnection/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
Live Demo: https://muazkhan.com:9001/demos/SSEConnection.html

Server Sent Events (SSE) are used to setup WebRTC peer-to-peer connections.

1. Download above directory
2. Upload to your PHP webserver
3. Give the directory both read-and-write permissions
4. Go to [`dev/SSEConnection.js`](https://github.com/muaz-khan/RTCMultiConnection/blob/master/dev/SSEConnection.js) and replace [`sseDirPath`](https://github.com/muaz-khan/RTCMultiConnection/blob/master/dev/SSEConnection.js#L6) with `sseDirPath='https://php-server.com/SSEConnection/';`
5. Try [`demos/SSEConnection.html`](https://github.com/muaz-khan/RTCMultiConnection/blob/master/demos/SSEConnection.html) demo on HTTPs or localhost.

Relevant files:

1. https://github.com/muaz-khan/RTCMultiConnection/blob/master/dev/SSEConnection.js
2. https://github.com/muaz-khan/RTCMultiConnection/blob/master/demos/SSEConnection.html

PHP Source:

* https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/SSEConnection
29 changes: 29 additions & 0 deletions demos/SSEConnection/SSE.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<?php
// Muaz Khan - www.MuazKhan.com
// MIT License - https://www.webrtc-experiment.com/licence/
// Documentation - https://github.com/muaz-khan/RTCMultiConnection

require('write-json.php');
require('get-param.php');
require('enableCORS.php');

// date_default_timezone_set("America/New_York");
header("Content-Type: text/event-stream\n\n");

// "me" stands for "Current User Unique ID"
$me = getParam('me');

$json = file_get_contents('./rooms/' . $me . '.json');
$json = json_decode($json, true);

echo 'data: ' . json_encode($json) . "\n\n";

foreach ($json as $receiver => $val) {
// skip duplicate entries for future requests
// todo: find a better solution to clear only entries; NOT the entire JSON.
removeJSON($me, $receiver);
}

ob_flush();
flush();
?>
Loading

0 comments on commit 3ca2dd2

Please sign in to comment.