Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Not able to Drag-Drop when webcam image as background - mobile #168

Open
evaristoc opened this issue Dec 23, 2019 · 0 comments
Open

Not able to Drag-Drop when webcam image as background - mobile #168

evaristoc opened this issue Dec 23, 2019 · 0 comments

Comments

@evaristoc
Copy link

evaristoc commented Dec 23, 2019 •
edited
Loading

Hi @wmurphyrd

I am experimenting with aframe-super-hands-components for AR on telephone devices.

Specifically I have a plane floating in an specific point around me (a-camera look-controls-enabled set to true). Ideally:

  • When the user finds the plane, he/she would be able to drag-drop the plane across the XY axes of the screen (adjust position).
  • The plane should stay in its last position in relation to the user reference frame whenever the user moves the device/scene-camera away.

So far I have found super-hands working properly with clicking/touching on an scene where no video stream is displayed as background, even when using a phone. However when the background is a video stream I can find and raycast the plane but after touching it the plane stays stick to my screen no matter where I move. In other words, it loses completely its orbit settings.

Here a quick view of an example code:

<head>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/super-hands.min.js"></script>
  <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
    <script>
        const WIDTH = window.innerWidth;
        const HEIGHT = window.innerHeight;

        const width = Math.round(60 * WIDTH / HEIGHT);
        const height = 60;
        
        
        AFRAME.registerComponent('myvideo-track',{
            init: function(){
            const sceneEl = this.el;
        
            const video = document.createElement('video');
            sceneEl.insertAdjacentElement('beforebegin', video);
        
            this.video = video;
        
            if (navigator.mediaDevices) {
              navigator.mediaDevices
                .getUserMedia({
                  audio: false,
                  video: { width: WIDTH, height: HEIGHT },
                })
                .then((stream) => {
                  const video = document.querySelector('video');
                  video.srcObject = stream;
                  video.onloadedmetadata = function() {
                    video.play();
                  };
                })
                .catch((err) => {
                  console.log("The following error occurred: " + err.name);
                });
            }
            }
        });

    </script>
</head>

<body>
    <a-scene
           myvideo-track
           touch-to-click-converter
           vr-mode-ui="enabled:false"
           keyboard-shortcuts="enterVR:false;resetSensor:false"
             >
      <a-assets>
        <a-mixin id="img"
                 geometry="primitive: plane"
                 hoverable grabbable stretchable draggable droppable
                 event-set__dragdrop="_event: drag-drop; material.opacity: 1"
                 event-set__hoveron="_event: hover-start; material.opacity: 0.7; transparent: true"
                 event-set__hoveroff="_event: hover-end; material.opacity: 1; transparent: false"
                 event-set__dragon="_event: dragover-start; material.wireframe: true"
                 event-set__dragoff="_event: dragover-end; material.wireframe: false">
        </a-mixin>
     <!-- take the camera out of example and add a camera as part of the scene so you can rotate around and still drag --> 
      <a-entity id="target" class="img" mixin="img" position="0 2 -3" rotation="0 0 0"></a-entity>
     <a-camera look-controls-enabled=true></a-camera>
    </a-scene>
    <script>
    </script>
</body>

Any advice? Thanks for this component!
@evaristoc evaristoc changed the title Not able to Drag-Drop when webcam image as background Not able to Drag-Drop when webcam image as background - mobile Dec 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@evaristoc