A-frame examples connected to network experiencing issue with toggling video functionality

I have been experimenting with the Networked A-frame examples project and created a remix of it. I encountered an issue where the toggle video button at the bottom left corner of the screen is not functioning properly in the video example.

Although the function is being triggered, the video is not switching from on to off or vice versa. I am unsure of the reason behind this issue and am seeking advice on how to modify it so that when the button is clicked, it will toggle the video on if it's off, and off if it's on. How can I achieve this? The specific code snippet causing the problem can be found in public/examples/index.html at line 106 of this project:

Code snippet that needs fixing:

// Handle camera button click (Off and On)
        cameraBtnEle.addEventListener('click', function() {
          NAF.connection.adapter.enableCamera(!cameraEnabled);
          cameraEnabled = !cameraEnabled;
          cameraBtnEle.textContent = cameraEnabled ? 'Hide Camera' : 'Show Camera';
        });
      }

Answer №1

After reviewing the file you provided, it seems that the code snippet in there does not match what you have posted here. It refers to the mic element in the linked file. I recommend checking out the example file named basic-video.html. You will find the correct setup for video sharing in a VR space there. Make sure to test it on two tabs or windows as video sharing won't work with only one "player."

If you need a detailed guide on video sharing using networked-aframe, follow this link: https://github.com/networked-aframe/networked-aframe#video

Here is the example demonstrating video sharing:

Access the source code here:

Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

One particular item in the list does not conform to the same formatting as the others

Having a formatting issue with the indexLink when populating an unordered list with links. Can't seem to dedent it properly no matter what I try. Here's the javascript snippet: function addCrumb() { /* reads from localStorage and determines wh ...

How do I access values in my factory after the deviceready event in AngularJS/Cordova?

I am currently utilizing the Cordova Device plugin to retrieve information about the device being used by the user. According to the documentation, it can only be invoked AFTER the deviceready function. Therefore, in my .run function, I have implemented th ...

Ajax implementation for handling URL action parameters

I am currently facing challenges in passing data from a view to a controller using parameters. My goal is to pass these parameters when I select a row from a table and click on a button that triggers the ShowTasks() function. Here is the C# controller cod ...

Creating a React Native project without the use of TypeScript

Recently I dived into the world of React Native and decided to start a project using React Native CLI. However, I was surprised to find out that it uses TypeScript by default. Is there a way for me to create a project using React Native CLI without TypeS ...

Attempted to load Angular multiple times

I recently developed an app using the Yeoman scaffolded app (specifically, the Angular Fullstack generator). While grunt serve works perfectly fine, I encountered a problem when running grunt build which results in the distribution locking up memory. This ...

Say goodbye to colors and different design elements as you make the switch to Angular Material 1.1.1

Last week, I made the switch in my project from Angular Material 1.0.8 to Angular Material 1.1.1. However, after completing this update, I encountered some styling issues, such as: The hues feature is not functioning properly. For instance, the use of m ...

Retrieve information from ngResource and then connect the output to the display

I am currently working on a project using AngularJS. At the moment, I am using ngResource to retrieve JSON data from a static file, with plans to potentially switch to a database in the future. In my approach, I have set up a controller to call the servic ...

Stop the spread - Touch to choose - React with Material Design

I am currently utilizing ReactJS along with the library @material-ui/core. In my code, I am seeking to halt event propagation on Click. Here is the snippet: <NumPad.Number onChange={val => { this.setPrice(val) } }> <TextField ...

How to extract selected value from a dropdown menu in a React component

Is there a way for me to retrieve the chosen value from the dropdown menu? The select dropdown contains 12 options. My goal is to capture the selected value and then utilize it in handlecolumnchange to manipulate the number of columns added or removed. Des ...

Importing a form input as a constant in an API endpoint script

Recently stepping into the realm of React, I'm encountering difficulties in my Next.js app related to imports and exports. My goal is to export a const from a form component to an API endpoint for use within a function. While I can see the form compo ...

Cycle through an array of elements and generate a fresh object

Here is an array of objects: [ {id:1,val: 5,name: 'Josh'}, {id:2,val: 7,name: 'John'}, {id:3,val: 6,name:'mike'}, {id:4,val: 7,name: 'Andy'}, {id:5,val: 8,name: 'Andrew'}, {id:6,val: 7,name: &a ...

`The error "mockResolvedValue is not recognized as a function when using partial mocks in Jest with Typescript

Currently, I am attempting to partially mock a module and customize the return value for the mocked method in specific tests. An error is being thrown by Jest: The error message states: "mockedEDSM.getSystemValue.mockResolvedValue is not a function TypeEr ...

What is the best way to ensure blocking on an AJAX call?

When it comes to Ajax, callbacks are used due to its asynchronous nature. I desire my request to the remote URL to wait until a response is received, akin to how Ajax operates, but without the asynchrony. In other words, I seek to create a JAX call. Is t ...

Tips for extracting data from a website that dynamically updates its content as the user scrolls

This is a link that I am trying to extract data from. The website alters its product display after scrolling to the 8th element. It seems like there are over 200 products listed after a search query, but only 8 are visible in the page source. When scroll ...

Executing multiple Ajax requests on CodeIgniter 3 from two separate pages

I am facing a critical need for a code review and unfortunately, I am unsure of where else to seek assistance besides here. Let me outline my current task: I am working on a user profile page that is designed to showcase users' comments. Users have t ...

javascript categorize data by key and display in a tabular format

I have a Client ID and gender information available. Shown below is a JSON response along with a JavaScript function to display the data in a table format. The JSON response structure is as follows: studies = [{ "id": { "Value&qu ...

What is the best way to share variable values between different components in React?

I initially assumed that setting a prop would handle the value within the receiving component, but now I realize that I want to export the value to other components. For example, consider this reusable component: RegionButtons.jsx file import React, { us ...

The non-null value retrieval function is malfunctioning while attempting to save data into MongoDB

After retrieving an array of objects from an API call, I apply filtering based on two keys: story_title and title. If both values are null, the object gets filtered out. Subsequently, I iterate through the filtered array to store specific data in mongodb u ...

How can a button be linked directly to a particular list item?

I currently have a HTML tag within my React application that looks something like this: <ul> <li> Item 1 <button> Delete </button> </li> <li> Item 2 <button> ...

What is the best way to choose the current Div's ID, as well as its Width and Height properties?

Within this section, there are four div elements with varying widths, heights, and colors that appear and disappear when their respective buttons are clicked. I am adding an "activeDiv" class to the visible div in order to easily select it using that class ...