| Server IP : 162.214.74.102 / Your IP : 216.73.216.139 Web Server : Apache System : Linux dedi-4363141.lrsys.com.br 3.10.0-1160.119.1.el7.tuxcare.els25.x86_64 #1 SMP Wed Oct 1 17:37:27 UTC 2025 x86_64 User : lrsys ( 1015) PHP Version : 5.6.40 Disable Function : exec,passthru,shell_exec,system MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/lrsys/www/lrsys_apps/marisol/AR/aframe/examples/ |
Upload File : |
<meta http-equiv="refresh" content="120">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript ,webcam, Video">
<!-- A-FRAME -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
<!-- <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.4/dist/aframe-extras.min.js"></script> -->
<script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- start the body of your page -->
<script>
AFRAME.registerComponent('vidhandler', {
// ...
init: function() {
// Set up initial state and variables.
this.toggle = false;
this.vid = document.querySelector("#vid");
this.vid.pause();
},
tick: function() {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
document.querySelector("#vid").style.backgroundColor = 'transparent';
this.vid.play();
}
} else {
this.toggle = false;
this.vid.pause();
}
}
});
function refrespage() {
location.reload();
}
</script>
</head>
<body>
<div class="header">
<div class="row">
<div class="col-lg-12 col-md-6 col-sm-6 col-xs-6 pull-left">
<div class="oneleft">
<div class="imgon">
<img class="imgss img-responsive" src="../../data/marcas/tigor1.png">
<span class="imgname"> Lilica AR</span>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-right">
<div class="onebright">
<a href="https://marisol.lrsys.com.br/AR/aframe/examples/teste_lilica.html" class="btn btnskips">Youtube</a>
</div>
</div>
</div>
</div>
<a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 268; canvasHeight: 480'>
<a-assets>
<video preload="auto" id="vid" onerror="failed(event)" loop="true" crossorigin webkit-playsinline playsinline controls>
<source type="video/mp4" src="../../data/videos/tigor.mp4">
<h3>Error : Your browser does not support.</h3>
</video>
</a-assets>
<a-marker id="memarker" type="pattern" url="../../data/marcas/tigor1.patt" vidhandler>
<a-plane position='0 0.1 0' scale="1 1 1" rotation="0 0 0" material='transparent:true;alphaTest:0;src:#vid'></a-plane>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
<div class="footer">
<div class="row">
<!-- <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-left">
<div class="onebleft">
<button onclick="vid.pause();vid.style.backgroundColor = 'transparent';vid.hide();" class="btn btnskips">Play (CHROME)</button>
</div>
</div>-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-right">
<div class="onebright">
<button onclick="refrespage()" class="btn btnskips">Refresh</button>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-right">
<div class="onebright">
<a href="https://marisol.lrsys.com.br/AR/aframe/examples/teste_lilica.html" class="btn btnskips"><img class="imgss img-responsive" src="../../data/marcas/lilica.png"></a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 pull-left">
<div class="onebright">
<a href="https://www.facebook.com/lilicaetigor/" class="btn btnskips">Facebook</a>
</div>
</div>
</div>
</div>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
}
.onebleft {
padding: 5px 5px 5px 5px;
margin: 5px 15px 5px 5px;
float: left;
z-index: 900000000000;
}
.onebright {
padding: 5px 5px 5px 5px;
margin: 5px 15px 5px 5px;
float: right;
z-index: 900000000000;
}
.imgon {
width: 55px;
height: 55px;
background-color: white;
padding: 3px 2px 2px 2px !important;
}
.imgss {
width: 50px !important;
height: 50px !important;
}
.imgname {
font-size: 10px;
}
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
color: white;
}
.oneleft {
padding: 5px 5px 5px 5px;
margin: 5px 15px 5px 5px;
float: left;
z-index: 900000000000;
}
body {
margin: 0px;
overflow: hidden;
}
.resets {
background-color: rgba(51, 51, 51, 0.529);
color: #fff;
text-align: center;
border-radius: 2px;
height: 50px;
padding: 10px 10px 10px 10px;
position: fixed;
top: 10px;
text-align: center;
z-index: 9000000000;
bottom: 10px;
}
.btnskips {
background: rgba(0, 0, 0, 0.433);
color: white !important;
}
.btnskips:hover {
background: rgb(197, 197, 197);
}
#arjsDebugUIContainer {
display: none;
}
.a-enter-vr-button {
display: none !important;
}
#vid {
backgroundColor: transparent !important;
}
</style>
</body>
</html>