Using the camera feed as the avatar?

[jkenne000]

I was given a snippet of code to enable me to use my camera feed act as my avatar. Can someone give me an idea of where that goes in the client?

[Aaron-E-Walsh]

I too would like to know! That is a feature I've been hoping would come along.

[ocularvr]

Would be nice to see your code here

[1000times1000]

The following code was given to my son. I'm a java developer and I've had occasional exposure to JavaScript. I'm trying to teach myself JS by learning the hubs client. I'm able to run the client on my laptop but I'm looking for tips on how to turn on debug logging.

---

var yCamOffset = 1.6
var attachCamInterval
var camHash = "vide"

var camEl = getFirstElementFromHash(camHash)

if (camEl){
attachCamInterval = setInterval(attachCam, 100)
} else {
console.warn("You need to active your webcam first")
}

camEl.object3D.scale.setScalar(0.2)
var selfEl = AFRAME.scenes[0].querySelector("#avatar-rig")

var povCam = selfEl.querySelector("#avatar-pov-node")

function attachCam(){ attachObjToAvatar(camEl, selfEl) }

function attachObjToAvatar(obj, avatar){
NAF.utils.getNetworkedEntity(obj).then(networkedEl => {
const mine = NAF.utils.isMine(networkedEl)
if (!mine) var owned = NAF.utils.takeOwnership(networkedEl)
networkedEl.object3D.position.copy( avatar.object3D.position )
networkedEl.object3D.rotation.y = povCam.object3D.rotation.y + yCamOffset
networkedEl.object3D.rotation.x = 0
networkedEl.object3D.rotation.z = 0
networkedEl.object3D.position.y += 1.32
})
}

function getFirstElementFromHash(hash){
var g = AFRAME.scenes[0].querySelectorAll("[media-loader]")
var matches = []
for (let e of g){
var m = e.components["media-loader"].attrValue.src.match(hash)
if (m && m.length) matches.push(e)
}
return matches[0]
}

[1000times1000]

If you know where to put it can you let me know?

[robinkwilson]

When I'm coding JS, I use console logs: console.log("example"); console.log(exampleArray); to debug. There are in browser debug tools that I assume are similar to Eclipse when debugging Java or maybe in your text editor. Debugging would be a google search.

Where to place this code is a broad question. In the codebase, we split up the chunks like the networked component + selecting the camera in different places.

To keep your code in one place, you could wrap it in <script></script> tags in the .html file that defines all of a-frame components with a event listener for DOMContentLoaded since your code traverses the DOM, you need the DOM to have loaded before you start messing with it. Example in: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
^^ Though with this approach, I'm worried you may not have access to the NAF variable.

Let me know how it goes! If that doesn't work, mention me in the next comment.

[johnshaughnessy]

Linking Robin's response and marking this as the answer so that we remove this from our unanswered discussions list, but feel free to un-mark it if further action is required.