How do I use a Webcam feed as an A-Frame texture? - webrtc

Question

I'd like to attach a webcam stream as a texture to an entity within an aframe, is this possible and how would I do that?
An example of the effect I'm going for include:
Projecting my webcam feed onto a TV within the vr
"Face timing" someone within VR
Seeing yourself within the VR for debugging purposes

Answer 1

https://media.giphy.com/media/cJjZg8kXSUopNzZP4V/giphy.gif
Adding the Asset
The first step is to add the video as an asset:
<a-assets>
<video id="webcam" playsinline></video>
</a-assets>
Note the playsinline directive which prevents the page from entering full screen mode, particularly on mobile devices. It’s just a little detail I like to add, because while our app will be run fullscreen anyways I want the app to decide that and not some random video element!
Create the Stream
Next we create the stream with:
<!-- Start the webcam stream and attach it to the video element -->
<script>
// You can also set which camera to use (front/back/etc)
navigator.mediaDevices.getUserMedia({audio: false, video: true})
.then(stream => {
let $video = document.querySelector('video')
$video.srcObject = stream
$video.onloadedmetadata = () => {
$video.play()
}
})
</script>
Apply the Texture
Finally, we apply the stream as a material onto any entity with: material="src: #webcam"
Working Demo
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<!-- Create an empty video tag to hold our webcam stream -->
<a-assets>
<video id="webcam" playsinline></video>
</a-assets>
<!-- Creates -->
<a-scene background="color: #ECECEC">
<a-box position="-1 0.5 -3" rotation="0 45 0" shadow material="src: #webcam"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
<!-- Start the webcam stream and attach it to the video element -->
<script>
// You can also set which camera to use (front/back/etc)
// #SEE https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
navigator.mediaDevices.getUserMedia({audio: false, video: true})
.then(stream => {
let $video = document.querySelector('video')
$video.srcObject = stream
$video.onloadedmetadata = () => {
$video.play()
}
})
</script>
If the Code Runner doesn't work, you can also play with it here: https://glitch.com/~webcam-as-aframe-texture