Networked aframe dynamic rooms not working with easy rtc

Issue

Hi, I’ve remixed a template for networked aframe dynamic rooms using a form:

https://glitch.com/edit/#!/power-lily-pancake?path=public%2Fscene.html%3A41%3A0

For some reason whenever I add these lines of code to the <a-scene> tag, the entire project breaks:

networked-scene="
      room: audio;
      adapter: easyrtc;
      audio: true;
      video: true;
      debug: true;
      inspector=https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector@master/dist/aframe-inspector.min.js"

I’m wondering if there is a way too add those lines of the code to the <a-scene> tag so it looks like this:

    <a-scene dynamic-room networked-scene="
      room: audio;
      adapter: easyrtc;
      audio: true;
      video: true;
      debug: true;
      inspector=https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector@master/dist/aframe-inspector.min.js"
>

But have it so the dynamic rooms are still working. Meaning if two people are in different rooms they will not see each other, but if they are in the same room they will be able to see each other. How can this be done?

Links

A-frame website: https://aframe.io

Networked A-frame documentation: https://www.npmjs.com/package/networked-aframe

Project containing my current code: https://glitch.com/edit/#!/power-lily-pancake?path=public%2Fscene.html%3A41%3A0

Answer

afaik the dynamic-room component is designed to attach the networked-scene, not update it (since it doesn’t handle updates). That’s why the dynamic-room example scene does only have a dynamic-room component, and also why the dynamic-room is not working with networked-scene.

I’d throw all the networked-scene attributes to the dynamic-room setup, but it’s also possible to make the two work together pretty much like you want it:

<a-scene dynamic-room networked-scene>

One way of solving this, would be using the connectOnLoad property of the networked-scene – let the dynamic-room change the room, and then decide when to connect.

Since networked-scene checks the connectOnLoad in init – it will always use the default value. We need to make sure the default is false instead of true.


So two things need to be made:

  1. change networked-scene defaults before the scene is initialized:

    <script>
      // This is hacky, another way would be copying the component and make it react to updates
      AFRAME.components["networked-scene"].schema.connectOnLoad.default = false;
    </script>
    
    <a-scene dynamic-room networked-scene>
    
  2. emit connect when the room id is set:

    // set the room id
    el.setAttribute("networked-scene", "room", roomID);    
    
    // notify `networked-scene` that you're ready to connect 
    el.emit("connect", null, false);
    

Check it out in this glitch