hubs_avatar_chest_webcam.js

/* How to use this script :

To play with it "as is" try it in the console of your browser first.
If you do like and want to make it permanent then a bit of UI integration is needed 
(e.g. could add an icon, chat command, etc).
That would be done by using https://hubs.mozilla.com/docs/hubs-cloud-custom-clients.html


So that your integration remains easy to merge and maintainable over time it is recommended to 
touch Hubs Cloud code itself as little as possible. For example having separate components for
AFrame or React or both and loading them whenever required (e.g. in a specific room).

For discussion just the Hubs Cloud Discord server and channels #extensibility and #hubs-cloud
*/

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]
}

@lue with pleasure, thanks for trying. So the yCamOffset variable is that was supposed to be changed. So far I didn't find a way to detect it automatically. I might be a local/world coordinate problem. Yes looking up/down changes the position of the body mesh, maybe sticking to it rather than the avatar rig would be better. It could indeed be a feature from Hubs directly but it's arguable since it might not improve presence. Regarding attached a LinkedIn link that's interesting. I started to play with link that on another test https://twitter.com/utopiah/status/1258303637648015365

@ngarg1 no I only tried on hubs.mozilla.com and did work networked. I joined with another avatar who did see it cf https://twitter.com/utopiah/status/1257944507955412992 . Consequently assume if it works there it should work in more permissive custom environment.

In the example you give with person A and person B you have 2 ways to make it work :

1. the script is run on person A device and moves both cameras. For that you have to modify the targets and avatars entities.
2. the script is run on A and B devices. For that you can keep the avatar entity but you have to clarify the hash of the cameras since they most likely collide.

I suggest adding a slight offset to the webcam so that it doesn't glitch into your avatar:
networkedEl.object3D.position.z -= 0.05