networked-aframe
Version:
A web framework for building multi-user virtual reality experiences.
87 lines (75 loc) • 2.71 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Dev Example — Networked-Aframe</title>
<meta name="description" content="Dev Example — Networked-Aframe" />
<script src="https://aframe.io/releases/1.6.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 src="https://cdn.jsdelivr.net/npm/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
<script src="/js/spawn-in-circle.component.js"></script>
<style>
.fail {
background-color: red;
color: white;
padding: 0 5px;
}
.success {
background-color: green;
color: white;
padding: 0 5px;
}
</style>
<script>
NAF.connection.subscribeToDataChannel('reliableBroadcast', function () {
var label = document.getElementById('reliable-broadcast');
label.innerHTML = 'success';
label.className = 'success';
});
NAF.connection.subscribeToDataChannel('unreliableBroadcast', function () {
var label = document.getElementById('unreliable-broadcast');
label.innerHTML = 'success';
label.className = 'success';
});
NAF.connection.subscribeToDataChannel('reliableSend', function () {
var label = document.getElementById('reliable-send');
label.innerHTML = 'success';
label.className = 'success';
});
NAF.connection.subscribeToDataChannel('unreliableSend', function () {
var label = document.getElementById('unreliable-send');
label.innerHTML = 'success';
label.className = 'success';
});
</script>
</head>
<body>
<div>
<p>Broadcast reliable test result: <span id="reliable-broadcast" class="fail">waiting</span></p>
<p>Broadcast unreliable test result: <span id="unreliable-broadcast" class="fail">waiting</span></p>
<p>Send reliable test result: <span id="reliable-send" class="fail">waiting</span></p>
<p>Send unreliable test result: <span id="unreliable-send" class="fail">waiting</span></p>
</div>
<!-- Uncomment the block corresponding to the network adapter you want to test -->
<a-scene
embedded
networked-scene="
room: dev;
debug: true;
adapter: wseasyrtc;
"
renderer="physicallyCorrectLights: true;"
>
</a-scene>
<!-- <a-scene
embedded
networked-scene="
room: dev;
debug: true;
adapter: easyrtc;
"
></a-scene> -->
</body>
</html>