Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@laurentdibiase
laurentdibiase authored Aug 12, 2020
0 parents commit 30372b8
Show file tree
Hide file tree
Showing 29 changed files with 12,049 additions and 0 deletions.
48 changes: 48 additions & 0 deletions ReadMe.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@


EARTHLOOP PROJECT

From Laurent Di Biase

2020


Collaboratif web platform for networked Music



This project use WebRTC API from the RTCMulticonnection Library of Muaz Khan
https://github.com/muaz-khan.
The audio plugins come form Faust code and are embeded in a Web Audio API


//To launch the program file from terminal :

node server.js


//////////////////////////
RTCMultiConnection
//////////////////////////

from last Github repository


https://github.com/muaz-khan/RTCMultiConnection/blob/master/docs/how-to-use.md


/*

The idea is to receive into the "listen" page, the opening connection data form the "Play" page at the moment of the opening session by a player.


*/









90 changes: 90 additions & 0 deletions about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<!--
*
https://www.w3schools.com/howto/howto_make_a_website.asp
-->
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="EarthLoop, web platform for networked music performance">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta itemprop="description" content="Client-side EarthLoop session code samples">
<meta itemprop="image" content="imgs/visual.png">
<meta itemprop="name" content="EarthLoop session">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#ffffff">
<meta name="keywords" content="WebRTC, WebAudio, FAUST,RTCMultiConnection,EartLoop,Networked Performance,Sound Experimentation" />

<title>EarthLoop About</title>
<meta name="description" content="EarthLoop is a collaborative platform for sound and music experimentation using real-time communication and audio processes">
<link rel="shortcut icon" href="imgs/favicon.ico" />


<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="./css/main.css">
<script src="js/jquery.min.js"></script>

<script src="dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

<style type="text/css">

html, body, section, ul, li, nav, a, h1, h2 {
padding: 0;
margin: 0;
outline: none;
text-shadow: none;
box-shadow: none;
border-radius: 0;
text-decoration: none;
}

body {
font-family: Arial, Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 17px;
line-height: 1.5em;
}
</style>

</head>

<body>


<div class="header" style="text-align: center;">
<h1><a class="logo" href="/" style="position: right;"><img src="imgs/logo.png" alt="EarthLoop"></a>
<span>EarthLoop</span>
</h1>
<p>Connected People for Networked Music</p>
</div>

<div class="navbar">
<a href="home.html">Home</a>
<a href="play.html">Play</a>
<a href="listen.html">Listen</a>
<a class="right">About</a>
</div>

<section id="Instruction" style="text-align:left; margin-top: 100px; margin-left: 20px" class="no-mobile">
<h2>
<p>Links:</p>
</h2>
<div>
<h4 style="margin-top: 10px;">
<ul style="list-style-type: none; margin-left: 20px ">
<li><a href="http://laurentdibiase.free.fr" rel="noopener noreferrer" target="_blank">Visit my Website</a></li>
<li><a href="mailto:[email protected]">Send me an Email</a></li>
<li><a href="https://github.com/laurentdibiase">Go to my GitHub</a></li>
</ul>
</h4>
</section>

<section>
<footer style="text-align: right; font-size: 10px; margin-right: 10px ">© Laurent Di Biase - 2020</footer>
</section>
</body>
</html>
208 changes: 208 additions & 0 deletions assets/listen-broadcast.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
// ......................................................
// .......................UI Code........................
// ......................................................


document.getElementById('join-room').onclick = function() {
//disableInputButtons();

connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: false
};
connection.join(roomid);
};

document.getElementById('leave-room').onclick = function() {
document.getElementById('join-room').disabled = false;
connection.getAllParticipants().forEach(function(participantId) {
connection.disconnectWith(participantId);
});
// close the URL display
document.getElementById('room-urls').style.display = "none";
// close socket.io connection
connection.closeSocket();
};

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


var connection = new RTCMultiConnection();

connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';



// keep room opened even if owner leaves
connection.autoCloseEntireSession = true;

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

connection.mediaConstraints = {
audio: {
sampleRate: 48000,
channelCount: 2,
volume: 1.0,
echoCancellation:false,
autoGainControl:false,
noiseSuppression:false,
highPassFilter:false
},
video: false
};

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

// 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.audiosContainer = document.getElementById('audios-container');

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

event.mediaElement.removeAttribute('src');
event.mediaElement.removeAttribute('srcObject');
event.mediaElement.muted = true;
event.mediaElement.volume = 0;

var audio = document.createElement('audio');

if(event.type === 'local') {
audio.volume = 0;
try {
audio.setAttributeNode(document.createAttribute('muted'));
} catch (e) {
audio.setAttribute('muted', true);
}
}
audio.srcObject = event.stream;

var mediaElement = getHTMLMediaElement(audio, {
title: event.userid,
showOnMouseEnter: false
});

connection.audiosContainer.appendChild(mediaElement);

setTimeout(function() {
mediaElement.media.play();
}, 5000);

mediaElement.id = event.streamid;
};

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

if(event.userid === connection.sessionid && !connection.isInitiator) {
alert('Broadcast is ended. We will reload this page to clear the cache.');
location.reload();
}
}
};


///*************Socket.io*****************
/*var socket = connection.getSocket();
socket.on('buttonEvent', roomid );
Storage();
*/

// ......................................................
// ......................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();
}

function Storage() {
localStorage.setItem(connection.socketMessageEvent, roomid);
};

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) {
localStorage.setItem(connection.socketMessageEvent, roomid);

// auto-join-room
(function reCheckRoomPresence() {
connection.checkPresence(roomid, function(isRoomExist) {
if (isRoomExist) {
connection.join(roomid);
return;
}

setTimeout(reCheckRoomPresence, 5000);
});
})();

}


Loading

0 comments on commit 30372b8

Please sign in to comment.