Troubleshooting a connected A-frame problem involving dynamic room configurations and video streaming

Question

Troubleshooting a connected A-frame problem involving dynamic room configurations and video streaming

I have been developing a project utilizing A-frame () along with the networked A-frame component (https://www.npmjs.com/package/networked-aframe)

(project located at: )

I have encountered an issue with the video feed in my project. Currently, the video feed functions properly; however, when 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">

Upon testing my code by opening two tabs, instead of the video feed, there is only a blank white plane displayed. It's puzzling because simply exchanging networked-scene="" with dynamic-room="" causes the video feed to stop functioning, showing a white screen on other tabs instead.

This unexpected behavior has left me perplexed as changing from networked-scene to dynamic-room should not result in such issues. Despite attempting various code modifications, the root cause of this problem eludes me. My suspicion is that the error lies within

public/js/dynamic-room.component.js

, although I could be mistaken.

If you possess any insights on how to resolve this dilemma, your assistance would be greatly appreciated.

Here is the link to my project:

javascript network-programming three.js aframe aframe-networked

Answer 1

Answer №1

Regarding the question posted here, here is a follow-up.

In your code, the dynamic-room component only sets the room id and emits a connect event for the networked-scene 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);

It's important to note that the dynamic-room complements the networked-scene, rather than being an alternative. If you disable auto-connect before loading the scene like this:

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

The video should display correctly (you can see it working in this Glitch project)

If you prefer the dynamic-room component to handle all the setup that the networked-scene does, then Michael's answer is also valid.

Answer 2

Regarding the question posted here, here is a follow-up.

In your code, the dynamic-room component only sets the room id and emits a connect event for the networked-scene 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);

It's important to note that the dynamic-room complements the networked-scene, rather than being an alternative. If you disable auto-connect before loading the scene like this:

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

The video should display correctly (you can see it working in this Glitch project)

If you prefer the dynamic-room component to handle all the setup that the networked-scene does, then Michael's answer is also valid.

Answer 3

Answer №2

You are definitely heading in the right direction.

It seems like you are interested in utilizing dynamic-room to fetch a custom room name from the URL. (This functionality is specifically designed for that purpose, so if it doesn't align with your needs, dynamic-room may not be suitable.)

In the example provided for dynamic room, the script scans the URL and automatically generates the "networked-scene" component, attaching it to your HTML tag.

This sample code was created prior to video support being integrated, hence why there's no validation 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('Initializing networked-aframe with these settings:', networkedComp);
el.setAttribute('networked-scene', networkedComp);

I suggest transferring your parameters to dynamic-room.component.js (located on line 18).

Only the room name will be fetched from the URL. (In case it's unspecified, it will default to 'audio,' similar to how the networked-scene parameter functions.)

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('Initializing networked-aframe with these settings:', networkedComp);
el.setAttribute('networked-scene', networkedComp);

Answer 4

You are definitely heading in the right direction.

It seems like you are interested in utilizing dynamic-room to fetch a custom room name from the URL. (This functionality is specifically designed for that purpose, so if it doesn't align with your needs, dynamic-room may not be suitable.)

In the example provided for dynamic room, the script scans the URL and automatically generates the "networked-scene" component, attaching it to your HTML tag.

This sample code was created prior to video support being integrated, hence why there's no validation 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('Initializing networked-aframe with these settings:', networkedComp);
el.setAttribute('networked-scene', networkedComp);

I suggest transferring your parameters to dynamic-room.component.js (located on line 18).

Only the room name will be fetched from the URL. (In case it's unspecified, it will default to 'audio,' similar to how the networked-scene parameter functions.)

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('Initializing networked-aframe with these settings:', networkedComp);
el.setAttribute('networked-scene', networkedComp);

Troubleshooting a connected A-frame problem involving dynamic room configurations and video streaming

Answer №1

Answer №2

Similar questions

Tips for parsing form values using jQuery AJAX:

Buttons in Laravel are shifting unexpectedly

Action of the Floater Button in Material UI

Restrict the height of posts created in the summernote editor

Explore Silverlights assortment using JavaScript

What is the process for updating the list to retrieve fresh data from the service?

I am encountering difficulty in printing multiple documents from FireStore

Having trouble with the "foreach" binding in knockout where the "html" binding buttons are not functioning properly in Javascript

Issue with PassportJS and Express 4 failing to properly store cookies/session data

Managing date fields retrieved from a REST Api in AngularJS

Issue with rendering components list in React.js

Manipulate a value using JavaScript

Using SCSS to apply a class in Next.js

Close button for body

Enhancing Perspective Transformation in Three.js with Postprocessing

Using Vuejs to iterate over nested data

Using TypeScript to pass uniforms to a custom shader in React-Three-Fiber

Implementing validation and displaying fields with v-model in vue.js

SystemJS could not locate the root directory for RxJS

The error "Unable to create an instance of mssql.Schema" indicates that the