Пытаюсь сделать проект на ar.js
Я нашел код на глюке, который воспроизводит видео при сканировании маркера, но проблема в том, что он работает только на рабочем столе, на хром-андроиде видео не появляется, слышен только звук.. пожалуйста, помогите мне, так как я не т знаю много кодирования. Вот исходный код:
<html>
<head>
<!-- AR.js by @jerome_etienne - github: https://github.com/jeromeetienne/ar.js - info: https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf -->
<script src = "https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src = "https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.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>
<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;
this.vid.play();
}
}else{
this.toggle = false;
this.vid.pause();
}
}
});
</script>
<body style='margin : 0px; overflow: hidden;'>
<div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
<a href = "https://github.com/jeromeetienne/AR.js/" target = "_blank">AR.js</a> - Check out the repository !
</div>
<a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180' >
<a-assets>
<video id = "vid" src = "https://cdn.glitch.com/b62367d1-ceab-454b-b664-b032f995ed86%2FBig_Buck_Bunny_Trailer_1080p.ogv.720p.webm?1532370072191" loop = "true" crossorigin>
</a-assets>
<a-marker id = "memarker" preset = "hiro" vidhandler>
<a-plane position='1 2 -2' scale = "2 2 2" width = "2" rotation = "-90 0 0" material='transparent:true;opacity: 0.7;src:#vid'></a-plane>
</a-marker>
</a-scene>
</body>
</html>если бы кто-нибудь мог сказать мне, что делать, это было бы очень полезно
Просто убедитесь, что у вас есть надлежащая поддержка Chrome для Android.
по крайней мере, измените заголовок, чтобы описать проблему, чтобы любой, у кого есть подобные проблемы, мог наткнуться на этот вопрос.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема здесь в положении видео - оно видно, но далеко. Если вы измените плоскость на <a-box> и установите ее положение на 0 0 0, то видео будет отображаться как в Chrome, так и в Firefox для Android.
Проверьте это здесь.
Один совет: если код какой-то странный ответ переполнение стека не работает должным образом - попробуйте максимально упростить его:
- Выбросьте ненужные включения (например, aframe-extras)
- Максимально упростите сцену. Любые лишние геометрии, компоненты - просто чтобы было понятно.
Если не поможет, то наверняка облегчит отладку.
можно ли это решить с помощью самого <a-plane>.. я пытался установить положение 0 0 0.. все еще не работает.. он работает на <a-box>, как вы сказали..
@ fhk231 работает с коробкой, не работает с самолетом? Дома проверю, а вы не пробовали настроить материальную сторону material = "side: both" ?
да.. я хочу, чтобы он играл в самом самолете.. он действительно хорошо работает на рабочем столе.. единственная проблема в том, что он не работает в Android.
можете вы помочь мне..?
Пожалуйста, уточните вашу проблему.