动态房间和视频的联网 A 帧问题

Question

我正在使用 A-frame (https://aframe.io) and the networked A-frame component (https://www.npmjs.com/package/networked-aframe)

创建一个项目

（项目位于：https://glitch.com/edit/#!/networkedtest?path=public%2Fscene.html%3A44%3A0）

我运行遇到了视频源问题。目前在我的项目中，视频源工作得很好，但是每当我在第 202 行的 in scene.html 中切换这行代码时：

   <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">

使用此代码：

<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">

如果我通过拉出两个选项卡来测试我的代码，视频源应该在的地方只有一个空白的白色平面。我不确定为什么，但每当我交换行的一部分时 networked-scene="" dynamic-room="" 视频源停止工作，当您在另一个选项卡上加入时，您看到的只是一个白色屏幕，而视频源应该在那里。

我不确定为什么会这样，因为我要更改的只是 networked-scene 对应 dynamic-room。我已经尝试通过修改一些代码来修复这个错误，但仍然找不到这个问题的答案。我感觉问题出在 public/js/dynamic-room.component.js 的某个地方，但我可能弄错了。

如果您知道如何解决这个问题，将不胜感激。

Link 到我的项目：https://glitch.com/edit/#!/networkedtest?path=public%2Fscene.html%3A44%3A0

Answer 1

你走在正确的轨道上。

我假设您想使用动态房间从 URL 加载自定义房间名称。（仅此而已。如果那不是您想要的，那么动态房间不是您要找的。）

动态房间示例读取 URL，然后为您创建“联网场景”组件并将其附加到您的标签。

这是一个老例子，在视频支持之前写的，所以它不检查 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);

我建议将您的参数复制到 dynamic-room.component.js（第 18 行）。

只有房间名称将从 URL 加载。（如果未指定，将默认为 'audio'，就像您的网络场景参数一样。）

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);

Answer 2

这是的跟进。

您的 dynamic-room 仅设置房间 ID，并发出 connect 因此 networked-scene 尝试连接到服务器：

// 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);

在这种情况下，它不是 networked-scene 的替代品，它们一起工作。如果在场景之前禁用自动连接：

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

视频按预期显示 (glitch here)

如果您希望 dynamic-room 执行 networked-scene 中的所有设置，那么 Michaels 的回答也是正确的。

动态房间和视频的联网 A 帧问题

Networked A-frame issue with dynamic-room and video

javascript

networking

three.js

aframe

aframe-networked