Skip to content

Publisher in multiple rooms #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
vincentfretin wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Publisher in multiple rooms #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
944b021
copy index.html to 1.html 2.html 12.html
vincentfretin Jul 10, 2021
08c7a3a
modify room and transport
vincentfretin Jul 10, 2021
d1d3418
subscribe to users of main room, handle join and leave events for oth…
vincentfretin Jul 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions examples/1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<html>

<head>
<meta charset="utf-8">
<title>Audio Example — naf-janus-adapter</title>
<meta name="description" content="Audio Example — naf-janus-adapter">

<script src="https://aframe.io/releases/1.2.0/aframe.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/networked-aframe/networked-aframe@master/dist/networked-aframe.min.js" crossorigin="anonymous"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js" crossorigin="anonymous"></script>
<script src="/dist/naf-janus-adapter.js"></script>

<script src="https://unpkg.com/aframe-randomizer-components@^3.0.1/dist/aframe-randomizer-components.min.js" crossorigin="anonymous"></script>
</head>

<body>
<a-scene networked-scene="
room: 1;
debug: true;
adapter: janus;
connectOnLoad: true;
serverURL: wss://preprod-janus.example.com/janus;
">
<a-assets>

<img id="grid" src="assets/grid.png" />
<img id="sky" src="assets/sky.jpg" />

<!-- Templates -->

<!-- Avatar -->
<template id="avatar-template" type="text/html">
<a-entity class="avatar" networked-audio-source>
<a-sphere class="head" color="#5985ff" scale="0.45 0.5 0.4"></a-sphere>
<a-entity class="face" position="0 0.05 0">
<a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
<a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
</a-entity>
</a-entity>
</template>

<!-- /Templates -->
</a-assets>

<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" camera position="0 1.6 0" wasd-controls
look-controls>
<a-entity class="head" random-color></a-entity>
</a-entity>

<a-entity position="0 0 0" geometry="primitive: plane; width: 10000; height: 10000;" rotation="-90 0 0" material="src: #grid; repeat: 10000 10000; transparent: true; metalness:0.6; roughness: 0.4; sphericalEnvMap: #sky;"></a-entity>

<a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible=""></a-entity>
<a-entity light="color: #ffaaff; intensity: 1.5" position="5 5 5"></a-entity>

<a-sky src="#sky" rotation="0 -90 0"></a-sky>
</a-scene>

<!-- GitHub Corner. -->
<a href="https://github.com/networked-aframe/naf-janus-adapter" class="github-corner">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}

@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>

<script>
function genClientId() {
let num = '';
for (let i = 0; i < 16; i++) {
num += Math.floor(Math.random() * 10).toString();
}
return num;
}

// Prompt for audio.
document.addEventListener('DOMContentLoaded', () => {
const scene = document.querySelector('a-scene');
scene.addEventListener('adapter-ready', ({ detail: adapter }) => {
adapter.unreliableTransport = "websocket";
adapter.reliableTransport = "websocket";
// We don't use the syncOccupants API, set requestedOccupants to be the same array instance as availableOccupants
adapter.requestedOccupants = adapter.availableOccupants;
const clientId = genClientId(); // generate a random 16 characters string, but you can use a uuid4 for example
adapter.setClientId(clientId);
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
adapter.setLocalMediaStream(stream).then(() => {
// Note that networked-scene audio:true option has no effect with the janus adapter
adapter.enableMicrophone(true); // set it to false if you want to be muted initially.
});
}).catch(err => {
console.warn("Microphone access not allowed. This client will not broadcast audio.");
});
});
});
</script>

<script>
// Define custom schema for syncing avatar color, set by random-color
NAF.schemas.add({
template: '#avatar-template',
components: [
'position',
'rotation',
{
selector: '.head',
component: 'material',
property: 'color'
}
]
});
// Called by Networked-Aframe when connected to server
function onConnect() {
console.log("onConnect", new Date());
}
</script>
</body>

</html>
154 changes: 154 additions & 0 deletions examples/12.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<html>

<head>
<meta charset="utf-8">
<title>Audio Example — naf-janus-adapter</title>
<meta name="description" content="Audio Example — naf-janus-adapter">

<script src="https://aframe.io/releases/1.2.0/aframe.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/networked-aframe/networked-aframe@master/dist/networked-aframe.min.js" crossorigin="anonymous"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js" crossorigin="anonymous"></script>
<script src="/dist/naf-janus-adapter.js"></script>

<script src="https://unpkg.com/aframe-randomizer-components@^3.0.1/dist/aframe-randomizer-components.min.js" crossorigin="anonymous"></script>
</head>

<body>
<a-scene networked-scene="
room: 1-2;
debug: true;
adapter: janus;
connectOnLoad: true;
serverURL: wss://preprod-janus.example.com/janus;
">
<a-assets>

<img id="grid" src="assets/grid.png" />
<img id="sky" src="assets/sky.jpg" />

<!-- Templates -->

<!-- Avatar -->
<template id="avatar-template" type="text/html">
<a-entity class="avatar" networked-audio-source>
<a-sphere class="head" color="#5985ff" scale="0.45 0.5 0.4"></a-sphere>
<a-entity class="face" position="0 0.05 0">
<a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
<a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
</a-entity>
</a-entity>
</template>

<!-- /Templates -->
</a-assets>

<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" camera position="0 1.6 0" wasd-controls
look-controls>
<a-entity class="head" random-color></a-entity>
</a-entity>

<a-entity position="0 0 0" geometry="primitive: plane; width: 10000; height: 10000;" rotation="-90 0 0" material="src: #grid; repeat: 10000 10000; transparent: true; metalness:0.6; roughness: 0.4; sphericalEnvMap: #sky;"></a-entity>

<a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible=""></a-entity>
<a-entity light="color: #ffaaff; intensity: 1.5" position="5 5 5"></a-entity>

<a-sky src="#sky" rotation="0 -90 0"></a-sky>
</a-scene>

<!-- GitHub Corner. -->
<a href="https://github.com/networked-aframe/naf-janus-adapter" class="github-corner">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}

@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>

<script>
function genClientId() {
let num = '';
for (let i = 0; i < 16; i++) {
num += Math.floor(Math.random() * 10).toString();
}
return num;
}

// Prompt for audio.
document.addEventListener('DOMContentLoaded', () => {
const scene = document.querySelector('a-scene');
scene.addEventListener('adapter-ready', ({ detail: adapter }) => {
adapter.unreliableTransport = "websocket";
adapter.reliableTransport = "websocket";
// We don't use the syncOccupants API, set requestedOccupants to be the same array instance as availableOccupants
adapter.requestedOccupants = adapter.availableOccupants;
const clientId = genClientId(); // generate a random 16 characters string, but you can use a uuid4 for example
adapter.setClientId(clientId);
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
adapter.setLocalMediaStream(stream).then(() => {
// Note that networked-scene audio:true option has no effect with the janus adapter
adapter.enableMicrophone(true); // set it to false if you want to be muted initially.
});
}).catch(err => {
console.warn("Microphone access not allowed. This client will not broadcast audio.");
});
});
});
</script>

<script>
// Define custom schema for syncing avatar color, set by random-color
NAF.schemas.add({
template: '#avatar-template',
components: [
'position',
'rotation',
{
selector: '.head',
component: 'material',
property: 'color'
}
]
});
// Called by Networked-Aframe when connected to server
function onConnect() {
console.log("onConnect", new Date());
}
</script>
</body>

</html>
Loading