Skip to content

Instantly share code, notes, and snippets.

@digitallysavvy

digitallysavvy/audience.html

Created May 7, 2020 20:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save digitallysavvy/be3cb93362aed07d521b0701182120fe to your computer and use it in GitHub Desktop.
Save digitallysavvy/be3cb93362aed07d521b0701182120fe to your computer and use it in GitHub Desktop.
Download ZIP
A WebAR audience UI using Afame.io, AR.js and Agora.io
Raw
audience.html
<!doctype HTML>
<html>
<head>
<title>Agora AR.js - Live Streamed WebAR</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script src="js/AgoraRTCSDK-3.0.2.js" type="text/javascript"></script>
<script src="js/agora-rtm-sdk-1.2.2.js" type="text/javascript"></script>
<script src="js/agora-audience.js" type="text/javascript"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<a-assets>
<a-asset-item id="broadcaster" src="/assets/broadcaster.glb"></a-asset-item>
</a-assets>
<a-marker type='barcode' value='6'>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment