Repository navigation
Expand file tree
/
Copy pathbasic-multi-streams.html
More file actions
159 lines (146 loc) · 5.29 KB
/
Copy pathbasic-multi-streams.html
File metadata and controls
159 lines (146 loc) · 5.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Multi Streams Example — Networked-Aframe</title>
<meta name="description" content="Multi Streams Example — Networked-Aframe" />
<script src="https://aframe.io/releases/1.8.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
<script src="/easyrtc/easyrtc.js"></script>
<script src="/dist/networked-aframe.js"></script>
<script>
// see issue https://github.com/networked-aframe/networked-aframe/issues/267
NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
NAF.schemas.getComponents = (template) => {
if (!NAF.schemas.hasTemplate('#avatar-template')) {
NAF.schemas.add({
template: '#avatar-template',
components: [
{
component: 'position',
requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)
},
{
component: 'rotation',
requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)
}
]
});
}
const components = NAF.schemas.getComponentsOriginal(template);
return components;
};
</script>
<script src="https://cdn.jsdelivr.net/npm/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-environment-component@1.5.0/dist/aframe-environment-component.min.js"></script>
<script src="/js/spawn-in-circle.component.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<a-scene
networked-scene="
room: basic-multi-streams;
debug: true;
adapter: easyrtc;
audio: false;
video: true;
"
>
<a-assets>
<!-- Templates -->
<!-- Avatar -->
<template id="avatar-template">
<a-entity class="avatar">
<a-plane
color="#FFF"
width="4"
height="3"
position="0 .6 0"
material="side: back"
networked-video-source
></a-plane>
<a-plane
color="#FFF"
width="2"
height="1"
position="0 .7 -0.001"
rotation="0 -180 0"
material="side: front"
networked-video-source="streamName: screen"
></a-plane>
</a-entity>
</template>
<!-- /Templates -->
</a-assets>
<a-entity id="rig">
<a-entity
id="player"
networked="template:#avatar-template;attachTemplateToLocal:false;"
camera
position="0 1.6 0"
spawn-in-circle="radius:3"
wasd-controls
look-controls
>
<a-sphere class="head" visible="false" random-color></a-sphere>
</a-entity>
</a-entity>
<a-entity environment="preset:arches"></a-entity>
</a-scene>
<div class="actions">
<button id="camera-btn" type="button" class="button">Hide Camera</button>
<button id="screen-btn" type="button" class="button">Share screen</button>
</div>
<script>
// Camera status
let cameraEnabled = true;
// Camera button element
const cameraBtnEle = document.getElementById('camera-btn');
// Screen share status
let screenEnabled = false;
// Screen share button element
const screenBtnEle = document.getElementById('screen-btn');
// On mobile remove elements that are resource heavy
const isMobile = AFRAME.utils.device.isMobile();
if (isMobile) {
const particles = document.getElementById('particles');
particles.parentNode.removeChild(particles);
}
// Called by Networked-Aframe when connected to server
function onConnect() {
console.log('onConnect', new Date());
// Handle camera button click (Off and On)
cameraBtnEle.addEventListener('click', function () {
NAF.connection.adapter.enableCamera(!cameraEnabled);
cameraEnabled = !cameraEnabled;
cameraBtnEle.textContent = cameraEnabled ? 'Hide Camera' : 'Show Camera';
});
// Handle screen button click (Off and On)
screenBtnEle.addEventListener('click', function () {
if (screenEnabled) {
NAF.connection.adapter.removeLocalMediaStream('screen');
screenEnabled = false;
screenBtnEle.textContent = 'Share screen';
} else {
navigator.mediaDevices.getDisplayMedia().then((stream) => {
NAF.connection.adapter.addLocalMediaStream(stream, 'screen');
stream.getVideoTracks().forEach((track) => {
track.addEventListener(
'ended',
() => {
NAF.connection.adapter.removeLocalMediaStream('screen');
screenEnabled = false;
screenBtnEle.textContent = 'Share screen';
},
{ once: true }
);
});
screenEnabled = true;
screenBtnEle.textContent = 'Stop Screen';
});
}
});
}
</script>
</body>
</html>