From 7b9e872662f8475afa32a29e4e0183ef97342112 Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Thu, 20 Jun 2024 13:22:37 +0200 Subject: [PATCH 1/2] Add audio to simple example --- examples/simple-app/index.html | 477 +++++++++++++------------- examples/simple-app/package-lock.json | 2 + examples/simple-app/src/main.ts | 38 +- 3 files changed, 265 insertions(+), 252 deletions(-) diff --git a/examples/simple-app/index.html b/examples/simple-app/index.html index adb001f8..79f65d33 100644 --- a/examples/simple-app/index.html +++ b/examples/simple-app/index.html @@ -1,271 +1,272 @@ - - - - - Simples Fishjam Client - + + + + + Simples Fishjam Client + - + +
+ - + - + +
-
- - + -
- - - - - -
+
+
+
+
+
+ +
-
-
-
-

Canvas track

-
- - -
-
- -
+ +
+ +
-
-
-

Screen sharing

-
-
+
+ + + + +
-
-
-
- -
- -
+
+
+
+

Canvas track

+
+ + +
+
+
+
- +
+
+
+ +
+ +
+
+
+ + +
- - + + diff --git a/examples/simple-app/package-lock.json b/examples/simple-app/package-lock.json index be7cac0a..0ea965de 100644 --- a/examples/simple-app/package-lock.json +++ b/examples/simple-app/package-lock.json @@ -44,6 +44,8 @@ "eslint-config-prettier": "^9.1.0", "eslint-plugin-react-hooks": "^4.6.0", "fake-mediastreamtrack": "^1.2.0", + "husky": "^9.0.11", + "lint-staged": "^15.2.5", "prettier": "^3.1.0", "prettier-plugin-tailwindcss": "^0.5.7", "react": "^18.2.0", diff --git a/examples/simple-app/src/main.ts b/examples/simple-app/src/main.ts index cddc6f18..a2b68de7 100644 --- a/examples/simple-app/src/main.ts +++ b/examples/simple-app/src/main.ts @@ -141,7 +141,8 @@ client.on('authSuccess', () => { toastSuccess('Auth success'); }); -client.on('authError', () => { +client.on('authError', (e) => { + console.log({ e }); toastAlert('Auth error'); }); @@ -248,31 +249,35 @@ client.on('trackReady', (ctx) => { const peerId = ctx.endpoint.id; const peerComponent = document.querySelector(`div[data-peer-id="${peerId}"`)!; - const videoPlayerTemplate = document.querySelector( - '#remote-peer-template-video', + const playerTemplate = document.querySelector( + '#remote-peer-template', ); - if (!videoPlayerTemplate) throw new Error('Remote video template not found'); + if (!playerTemplate) throw new Error('Remote video template not found'); - const videoWrapper = ( - videoPlayerTemplate.content.cloneNode(true) + const playerWrapper = ( + playerTemplate.content.cloneNode(true) ); const tracksContainer: HTMLDivElement | null = - videoWrapper.querySelector(`.remote-track-container`); + playerWrapper.querySelector(`.remote-track-container`); if (!tracksContainer) throw new Error('Remote track container not found'); tracksContainer.dataset.trackId = ctx.trackId; const videoPlayer: HTMLVideoElement | null = - videoWrapper.querySelector(`video`); + playerWrapper.querySelector(`video`); if (!videoPlayer) throw new Error('Video element not found'); + const audioPlayer: HTMLAudioElement | null = + playerWrapper.querySelector(`audio`); + if (!audioPlayer) throw new Error('Audio element not found'); + const container = peerComponent.querySelector('.remote-videos'); if (!container) throw new Error('Remote videos container not found!'); const simulcastContainer: HTMLDivElement | null = - videoWrapper.querySelector(`.simulcast-enabled`); + playerWrapper.querySelector(`.simulcast-enabled`); if (!simulcastContainer) throw new Error('Simulcast container not found'); simulcastContainer.innerHTML = ( @@ -280,7 +285,7 @@ client.on('trackReady', (ctx) => { ).toString(); const simulcastRadios: HTMLDivElement | null = - videoWrapper.querySelector(`.simulcast-radios`); + playerWrapper.querySelector(`.simulcast-radios`); if (!simulcastRadios) throw new Error('Simulcast radios not found'); if (!ctx?.simulcastConfig?.enabled) { @@ -288,25 +293,30 @@ client.on('trackReady', (ctx) => { } ENCODINGS.forEach((encoding) => { - setupSimulcastCheckbox(videoWrapper, ctx.trackId, encoding); + setupSimulcastCheckbox(playerWrapper, ctx.trackId, encoding); }); - const rawMetadata = videoWrapper.querySelector('.remote-track-raw-metadata'); + const rawMetadata = playerWrapper.querySelector('.remote-track-raw-metadata'); if (!rawMetadata) throw new Error('Raw metadata component not found'); rawMetadata.innerHTML = JSON.stringify(ctx.rawMetadata, undefined, 2); - const parsedMetadata = videoWrapper.querySelector( + const parsedMetadata = playerWrapper.querySelector( '.remote-track-parsed-metadata', ); if (!parsedMetadata) throw new Error('Parsed metadata component not found'); parsedMetadata.innerHTML = JSON.stringify(ctx.metadata, undefined, 2); - container.appendChild(videoWrapper); + container.appendChild(playerWrapper); videoPlayer.srcObject = ctx.stream; videoPlayer.onloadedmetadata = () => { videoPlayer.play(); }; + + audioPlayer.srcObject = ctx.stream; + audioPlayer.onloadedmetadata = () => { + audioPlayer.play(); + }; }); client.on('trackUpdated', (ctx) => { From 717932b675c6c31d0167217e62e06ab035f0c757 Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Thu, 20 Jun 2024 13:23:13 +0200 Subject: [PATCH 2/2] Fix foramt --- examples/simple-app/index.html | 478 ++++++++++++++++----------------- 1 file changed, 239 insertions(+), 239 deletions(-) diff --git a/examples/simple-app/index.html b/examples/simple-app/index.html index 79f65d33..888bc345 100644 --- a/examples/simple-app/index.html +++ b/examples/simple-app/index.html @@ -1,272 +1,272 @@ - - - - - Simples Fishjam Client - + + + + + Simples Fishjam Client + - -
- + id="toast-container" + class="fixed left-1/2 z-10 flex max-w-sm -translate-x-1/2 flex-col"> + - + - -
-
- - - +
+
+
+
+ + +
-
-
-
-
-
- - -
+
+ + +
+
-
- - +
+ + + + + +
+
+
+
+
+

Canvas track

+
+ + +
+
+ +
-
- - - - - +
+
+

Screen sharing

+
+
-
-
-
-

Canvas track

-
- - -
-
- +
+
+
+ +
+ +
-
-
-
-

Screen sharing

-
-
-
-
-
-
-
- + - -
-
-
- - -
- - + +