stream to openfire

update orinayo client
igniterealtime · Jan 1, 2025 · 68394f6 · 68394f6
1 parent bede508
commit 68394f6
Show file tree

Hide file tree

Showing 29 changed files with 945 additions and 112 deletions.
diff --git a/classes/jsp/assets/bass/gospel-latin-1_98_9796_9796_2.bass b/classes/jsp/assets/bass/gospel-latin-1_98_9796_9796_2.bass
diff --git a/classes/jsp/assets/bass/gospel-latin-2_98_9796_9796_2.bass b/classes/jsp/assets/bass/gospel-latin-2_98_9796_9796_2.bass
diff --git a/classes/jsp/assets/chords/gospel-latin-1_98_9796_9796_2.chord b/classes/jsp/assets/chords/gospel-latin-1_98_9796_9796_2.chord
diff --git a/classes/jsp/assets/chords/gospel-latin-2_98_9796_9796_2.chord b/classes/jsp/assets/chords/gospel-latin-2_98_9796_9796_2.chord
diff --git a/classes/jsp/assets/drums/gospel-latin-1_98_2449_9796_2449_2449_4898.drum b/classes/jsp/assets/drums/gospel-latin-1_98_2449_9796_2449_2449_4898.drum
diff --git a/classes/jsp/assets/drums/gospel-latin-2_98_2449_9796_2449_2449_4898.drum b/classes/jsp/assets/drums/gospel-latin-2_98_2449_9796_2449_2449_4898.drum
diff --git a/classes/jsp/assets/drums/midtempo6_100_2402_9600_2400_2400_4800.drum b/classes/jsp/assets/drums/midtempo6_100_2402_9600_2400_2400_4800.drum
diff --git a/classes/jsp/assets/drums/rock-hop_85_2824_11294_2824_2823_5647.drum b/classes/jsp/assets/drums/rock-hop_85_2824_11294_2824_2823_5647.drum
diff --git a/classes/jsp/audio-publisher.html b/classes/jsp/audio-publisher.html
@@ -0,0 +1,70 @@
+<!--
+  This example demonstrates how to publish a stream without libraries or dependencies.
+-->
+
+<html>
+  <head>
+    <title>publisher</title>
+    <script src="./js/stophe.min.js"></script>  	
+  </head>
+
+  <body>
+    <button onclick="window.publishStream()"> Publish Stream </button>
+
+    <h3> Video </h3>
+    <audio id="audioPlayer" autoplay muted controls style="width: 500"> </audio>
+
+    <h3> Connection State </h3>
+    <div id="connectionState"></div> <br />
+  </body>
+
+  <script>
+	window.publishStream =  async () => {	
+		window.connection = new Strophe.Connection(location.protocol.replace("http", "ws") + "//" + location.host + "/ws/");	
+
+		window.connection.connect(location.hostname, null, async function (status) {
+			console.debug("XMPPConnection.connect", status);
+
+			if (status === Strophe.Status.CONNECTED)  {
+				window.connection.send($pres());
+
+				let mediaOptions = {audio: true, video: false}
+
+				let peerConnection = new RTCPeerConnection();
+
+				peerConnection.oniceconnectionstatechange = () => {
+					document.getElementById('connectionState').innerText = peerConnection.iceConnectionState;
+				}
+
+				const stream = await navigator.mediaDevices.getUserMedia(mediaOptions);
+				document.getElementById('audioPlayer').srcObject = stream;
+
+				stream.getTracks().forEach(t => {
+					if (t.kind === 'audio') {
+					  peerConnection.addTransceiver(t, {direction: 'sendonly'})
+					}
+				})		
+
+				const offer = await peerConnection.createOffer();
+				peerConnection.setLocalDescription(offer);
+
+				window.connection.sendIQ($iq({type: 'set', to: window.connection.domain}).c('whip', {xmlns: 'urn:xmpp:whip:0'}).c('sdp', offer.sdp), 
+					function (res)  {
+						const answer = res.querySelector('sdp').innerHTML;
+						peerConnection.setRemoteDescription({sdp: answer,  type: 'answer'});	
+						console.debug('whip answer', answer);			
+
+					}, function (err) {
+						console.warn('whip failed', err);
+					}
+				);								
+			}
+			else
+
+			if (status === Strophe.Status.DISCONNECTED)  {
+
+			}
+		});			
+	}
+  </script>
+</html>
diff --git a/classes/jsp/audio-watcher.html b/classes/jsp/audio-watcher.html
@@ -0,0 +1,77 @@
+<!--
+  This example demonstrates how to watch a stream without libraries or dependencies.
+  With this HTML you can add a 'Broadcast Box Player' to any site you want
+-->
+
+<html>
+  <head>
+    <title>audio-watcher</title>
+    <script src="./js/stophe.min.js"></script>  	
+  </head>
+
+  <body>
+    <b> Stream Key </b> <input type="text" id="streamKey" /> <br />
+    <button onclick="window.watchStream()"> Watch Stream </button>
+
+    <h3> Audio </h3>
+    <audio id="audioPlayer" autoplay controls style="width: 500"> </audio>
+
+    <h3> Connection State </h3>
+    <div id="connectionState"></div> <br />
+  </body>
+
+  <script>
+	window.watchStream = () => {
+		window.connection = new Strophe.Connection(location.protocol.replace("http", "ws") + "//" + location.host + "/ws/");
+
+		window.connection.connect(location.hostname, null, function (status) {
+			console.debug("XMPPConnection.connect", status);
+
+			if (status === Strophe.Status.CONNECTED)  {
+				window.connection.send($pres());
+
+				setTimeout(() => {
+					const streamKey = document.getElementById('streamKey').value
+
+					if (streamKey === '') {
+						return window.alert('Stream Key must not be empty')
+					}	
+
+					let peerConnection = new RTCPeerConnection()
+					peerConnection.addTransceiver('audio', { direction: 'recvonly' })
+
+					peerConnection.ontrack = function (event) {
+						document.getElementById('audioPlayer').srcObject = event.streams[0]
+					}
+
+					peerConnection.oniceconnectionstatechange = () => {
+						document.getElementById('connectionState').innerText = peerConnection.iceConnectionState;
+					}
+
+					peerConnection.createOffer().then(offer => {
+						peerConnection.setLocalDescription(offer);
+						console.debug('whep offer', offer.sdp);					
+
+						window.connection.sendIQ($iq({type: 'set', to: window.connection.domain}).c('whep', {id: streamKey, xmlns: 'urn:xmpp:whep:0'}).c('sdp', offer.sdp), 
+							function (res)  {
+								console.debug('whep response', res);						
+								const answer = res.querySelector('sdp').innerHTML;
+								peerConnection.setRemoteDescription({sdp: answer,  type: 'answer'});	
+								console.debug('whep answer', answer);			
+
+							}, function (err) {
+								console.warn('whep failed', err);
+							}
+						);				
+					})
+				});
+			}
+			else
+
+			if (status === Strophe.Status.DISCONNECTED)  {
+
+			}
+		});
+    }
+  </script>
+</html>
diff --git a/classes/jsp/index.html b/classes/jsp/index.html
@@ -32,6 +32,7 @@
 				<fluent-button appearance="accent" title='Display song lyrics' id="show_lyrics">Lyrics</fluent-button>				
 				<fluent-button appearance="accent" title='Save all settings as a registration (1-7)' id="save_reg">Save</fluent-button>
 				<fluent-button appearance="accent" title='Record performance as video or audio file' style="display: none;" id="record_song">Record</fluent-button>				
+				<fluent-button appearance="accent" title='Stream performance to hosted server' style="display: none;" id="stream_song">Start Stream</fluent-button>					
 				<fluent-button appearance="accent" title='Refresh application for new settings to take effect' id="reset_app">Refresh</fluent-button>			
 			</center><div>	
 			<div id="sequencer2" style="margin:10px">
@@ -99,6 +100,9 @@
 					</tr>
 				</table>
 			</div>
+			<div id="lavagenie" style="display:none;">
+				<div><center><h3>Lava Genie Ready</h3></center></div>
+			</div>			
 		</td>
 	</tr>
 	<tr><td><b>Song Sequence</b></td><td><select id="songSequence" type="text" class="form-control input"></select></td><td></td></tr>	
@@ -133,7 +137,7 @@
   <script src='./js/0253_Acoustic_Guitar_sf2_file.js'></script>
   <script src='./js/0341_Aspirin_sf2_file.js'></script>  
   <script src='./js/0260_JCLive_sf2_file.js'></script>
-  <script src="./assets/pedalboard.js" type="module"></script>  
+  <script src="./assets/pedalboard.js" type="module"></script>   
   <script src="./js/basic-pitch.js"></script>    
   <script src="./js/tonal.min.js"></script>    
   <script src="./js/stream-deck.js"></script>  

diff --git a/classes/jsp/js/audio_looper.js b/classes/jsp/js/audio_looper.js
@@ -49,6 +49,7 @@ function AudioLooper(styleType) {
 
 		this.gainNode.connect(this.audioContext.destination);		
 		if (recorderDestination) this.gainNode.connect(recorderDestination);		
+		if (streamDestination) this.gainNode.connect(streamDestination);			
 		this.source.connect(this.gainNode);			
 
 		try {

diff --git a/classes/jsp/js/background.js b/classes/jsp/js/background.js
@@ -105,7 +105,7 @@ const createOrinAyoWindow = () => {
 	chrome.windows.create(data, async (win) => {
 		//await chrome.offscreen.closeDocument();
 		chrome.storage.local.set({orinAyoWin: win.id});			
-		chrome.windows.update(win.id, {width: 1060, height: 1040});
+		chrome.windows.update(win.id, {width: 1090, height: 1040});
 	});
 }