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

@Utopiah, thank you a lot for the code!

To make it work I changed:
networkedEl.object3D.rotation.y = povCam.object3D.rotation.y + yCamOffset + 1.57
otherwise the video was penetrating the chest.

Also, when you look up and down the video position moves relative to the chest mesh and sometimes gets inside it. I found it

In my opinion the ability to attach webcam or just an image or LinkedIn link to the chest is the must-have feature for Hubs.

@Utopiah Have you tried this on a deployed instance yet? I think this will work locally which can be verified by looking at oneself in a dropped camera object, but when trying on a deployed instance there are some difficulties with the networked schema.

We are working on something similar and found that with two people in a hubs room, if Person A drops a "video chest" and looks in a camera they see expected behavior. However when Person B views Person A, Person B views the "video chest" at Person A's feet. We are looking at how to solve this right now, but would appreciate direction if you've seen this issue!

@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