使用帧检测标记时增强现实中的视频播放 [英] Video Playback in Augmented Reality On Detecting Marker Using A Frames
问题描述
我想在使用网络摄像头检测到标记(HIRO)时播放视频.当我删除它时，它应该暂停，并且当检测到标记时，视频应该使用A帧播放.我已经编写了代码，但是没有用.谁能帮我? 我尝试了所有可能的方法，但无法正常工作，任何人都可以张贴代码或发送示例.
I want to Play A video when the marker(HIRO) is detected using the webcam. When I remove it should be paused and when the marker is detected the video should play using A-Frame. I had written the code but it's not working. Can anyone help me? I tried all possible way but it's not working so, Can Anyone post the code or send an example.
看到标记时-播放视频. 丢失标记后-暂停视频
When you see the marker - play the video. Once you lose the marker - pause the video
例如:视频增强
AFRAME.registerComponent('vidhandler', {
init: function () {
this.toggle = false;
document.querySelector("#vid").pause(); //reference to the video
},
tick:function(){
if(document.querySelector("a-marker").object3D.visible == true){
if(!this.toggle){
this.toggle = true;
document.querySelector("#vid").play();
}
}else{
this.toggle = false;
document.querySelector("#vid").pause();
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>Video AR</title>
</head>
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <script src="vendor/aframe/build/aframe.min.js"></script> -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!-- <script src="vendor/aframe/build/aframe.js"></script> -->
<!-- include for artoolkit trackingBackend -->
<script src='aframe_lib/artoolkit.min.js'></script>
<script src='aframe_lib/artoolkit.api.js'></script>
<!-- include for aruco trackingBackend -->
<script src='aframe_lib/svd.js'></script>
<script src='aframe_lib/posit1.js'></script>
<script src='aframe_lib/cv.js'></script>
<script src='aframe_lib/aruco.js'></script>
<script src='aframe_lib/threex-arucocontext.js'></script>
<script src='aframe_lib/threex-arucodebug.js'></script>
<!-- include for tango trackingBackend -->
<script src='aframe_lib/THREE.WebAR.js'></script>
<!-- include ar.js -->
<script src='aframe_lib/signals.min.js'></script>
<script src='aframe_lib/threex-artoolkitprofile.js'></script>
<script src='aframe_lib/threex-artoolkitsource.js'></script>
<script src='aframe_lib/threex-artoolkitcontext.js'></script>
<script src='aframe_lib/threex-arbasecontrols.js'></script>
<script src='aframe_lib/threex-armarkercontrols.js'></script>
<script src='aframe_lib/threex-arsmoothedcontrols.js'></script>
<script src='aframe_lib/threex-hittesting-plane.js'></script>
<script src='aframe_lib/threex-hittesting-tango.js'></script>
<script src='aframe_lib/threex-armarkerhelper.js'></script>
<script src='aframe_lib/arjs-utils.js'></script>
<script src='aframe_lib/arjs-session.js'></script>
<script src='aframe_lib/arjs-anchor.js'></script>
<script src='aframe_lib/arjs-hittesting.js'></script>
<script src='aframe_lib/arjs-tangovideomesh.js'></script>
<script src='aframe_lib/arjs-tangopointcloud.js'></script>
<script src='aframe_lib/arjs-debugui.js'></script>
<script src='aframe_lib/threex-armultimarkerutils.js'></script>
<script src='aframe_lib/threex-armultimarkercontrols.js'></script>
<script src='aframe_lib/threex-armultimarkerlearning.js'></script>
<!-- include aframe-ar.js -->
<script src="aframe_lib/system-arjs.js"></script>
<script src="aframe_lib/component-anchor.js"></script>
<script src="aframe_lib/component-hit-testing.js"></script>
<body>
<a-scene embedded arjs='trackingMethod: best;'>
<a-anchor hit-testing-enabled='true'>
<a-assets>
<video type="video/mp4" id="vid" loop="false" src="https://ucarecdn.com/bb90f1f8-134e-4eb2-9688-38721ee7e9ad/" webkit-playsinline >
</video>
</a-assets>
<a-marker type="pattern" url="https://ucarecdn.com/80ba69d9-96f2-46e7-aa62-8168f2ac06a5/">
<a-video vidhandler position="0 0.2 0" src="#vid" rotation="90 180 0"></a-video>
</a-marker>
</a-anchor>
<a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible=""></a-entity>
</a-scene>
</body>
推荐答案
1)确保将视频正确加载到资产中-放入crossorigin: anonymous并确保可以访问视频.
1) make sure you load the video properly in the assets - throw in the crossorigin: anonymous and make sure you can access the video.
<a-assets>
<video id="vid" src="buckBunny.mp4" loop="true" crossorigin>
</a-assets>
2)设置标记
<a-marker preset="hiro" vidhandler>
<a-plane position='1 2 0' scale="2 2 2" width="2" rotation="-90 0 0"
material='transparent:true; opacity: 0.7; src:#vid'></a-plane>
</a-marker>
3)制作一个可以/仅当标记可见时播放视频的组件
3) Make a component which will play the video, once / only when the marker is seen
AFRAME.registerComponent('vidhandler', {
init: function () {
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();
}
}
});
4)在您的客厅里享受 Big Buck兔子
4) enjoy Big Buck bunny in your living room
5)查看我的小故障.
这篇关于使用帧检测标记时增强现实中的视频播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
