Networked A-frame issue with dynamic-room and video

Question

I am creating a project using A-frame (https://aframe.io) and the networked A-frame component (https://www.npmjs.com/package/networked-aframe)

(project at: https://glitch.com/edit/#!/networkedtest?path=public%2Fscene.html%3A44%3A0)

and I've run into an issue with the video feed. Currently in my project, video feed is working perfectly fine, but whenever I switch this line of code in scene.html on line 202:

   <a-scene moving-sun vr-mode-ui="enabled: false;" physics 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">

With this code:

<a-scene moving-sun vr-mode-ui="enabled: false;" physics dynamic-room="
  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">

If I test my code by pulling up two tabs, where the video feed should be there is just a blank white plane. I'm not sure why, but whenever I exchange the part of the line networked-scene="" with dynamic-room="" the video feed stops working and when you join on another tab, all you see is a white screen where the video feed should be.

I'm not sure why this is happening since all I'm changing is networked-scene for dynamic-room. I've tried fixing this error by modifying some code but still can't find an answer to this issue. I have a feeling that the issue is somewhere in public/js/dynamic-room.component.js but I may be mistaken.

If you know how to solve this problem, help would be very much appreciated.

Link to my project: https://glitch.com/edit/#!/networkedtest?path=public%2Fscene.html%3A44%3A0

score 2 · Answer 1 · answered Sep 30 '21 at 19:22

This is a follow up to this question.

Your dynamic-room only sets the room id, and emits connect so the networked-scene attempts to connect to the server:

// public/js/dynamic-room.component.js

// Setup networked-scene
var networkedComp = {
  room: params.room
};
// set the room
el.setAttribute("networked-scene", networkedComp);    
// emit connect
el.emit("connect", null, false);

in this case, its not an alternative to networked-scene, they work together. If you disable auto-connect before the scene:

<script>
AFRAME.components["networked-scene"].schema.connectOnLoad.default = false;
</script>
<a-scene dynamic-room networked-scene>

The video shows up as expected (glitch here)

If you want the dynamic-room to do all setup which is in the networked-scene, then Michaels answer is also correct.

btw check out the console warnings / errors, there are multiple things to clean up, which sooner or later may lead to serious bugs — Piotr Adam Milewski, Sep 30 '21 at 20:04

score 1 · Accepted Answer · edited Oct 01 '21 at 09:48

You are on the right track.

I assume you want to use dynamic-room to load a custom room name from the URL. (That is all it is for. If that is not what you want, then dynamic-room is not what you are looking for.)

The dynamic room example reads the URL, then creates the "networked-scene" component for you and attaches it to your tag.

It is an old example, written before video support, so it does not check for video: true:

var isMultiuser = params.hasOwnProperty('room');
var webrtc = params.hasOwnProperty('webrtc');
var adapter = webrtc ? 'easyrtc' : 'wseasyrtc';
var voice = params.hasOwnProperty('voice');

var networkedComp = {
    room: params.room,
    adapter: adapter,
    audio: voice //<--Only setting the audio property here
};
console.info('Init networked-aframe with settings:', networkedComp);
el.setAttribute('networked-scene', networkedComp);

I recommend copying your parameters into dynamic-room.component.js (at line 18).

Only the room name will load from the URL. (And will default to 'audio' if not specified, just like your networked-scene parameter.)

var roomNameFromURL = params.hasOwnProperty('room');
//We won't check for these:
//var webrtc = params.hasOwnProperty('webrtc');
//var adapter = webrtc ? 'easyrtc' : 'wseasyrtc';
//var voice = params.hasOwnProperty('voice');

var networkedComp = {
    //if there is no name in the URL, default to 'audio',
    //  like your networked-scene
    room: roomNameFromURL ? params.room : 'audio',
    adapter: 'easyrtc',
    audio: true,
    video: true,
    debug: true
};
console.info('Init networked-aframe with settings:', networkedComp);
el.setAttribute('networked-scene', networkedComp);

Networked A-frame issue with dynamic-room and video

2 Answers2

Linked