temasys / getaroom

Simple WebRTC audio/video conferencing demo using SkylinkJS and React.

Temasys Developers on GitHub

Info center for developers wanting to use Skyway and other Temasys Open Source web projects. Thanks to Luke Maciak for getting us started with his Jekyll Sample App.

Requirements to modify this site:

Development time dependencies:

• Ruby
• Gems
• Jekyll
• Rdiscount (optional - comment out in _confing.yaml to use Maroku)
• Node.js & Grunt.js (optional - only if you wish to use GruntJS)

getaroom's Issues

"Status: Room is Locked"

I cloned getaroom.io at http://Click2.Biz.

I didn't change any code. I only changed the 2 API keys and host name. But I always met the problem of "Status: Room is Locked" once I opened the website.

I tried to use 1 app key and 1 its alias key and also I tried 2 API keys in the mentioned configs.jsx file. But I always met the same problem.

At the end I will try to connect an Android APP with the web site.

Please help.

Thank you in advance,

Ying

Deploying via S3

First and foremost great example, thank you.

I have deployed a staging version of the react site to a S3 bucket, and it seems to be working fine with the exception of getting the video and audio started. The deployed instance (on S3) is able to connect to a room successfully, however I never get the video/audio permission request and the following UI.

Can this be because I don't have SSL fully configured?

How to add dependencies

In an attempt to try and parse query strings using this project I am not sure exactly how to import dependencies. I've added the dependency via npm however import. How can I go about importing new dependencies?

404 - favicon.png

macOS X 10.7.5
safari 6.1.4
plugin 0.8.780

http://getaroom.io/img/favicon.png - 404

Is grunt-react deprecated?

According to https://github.com/ericclemmons/grunt-react it seems it is deprecated. If so is there a quick way to remove grunt without breaking everything? Thanks in advance.

Unable to reconnect in getaroom.io UI after stopping screensharing session using MCU

What was the issue:
After screensharing, there is no reconnection and here's the error message:

SkylinkJS - <> (peerJoined) Exception occurred in event: Error: Invariant Violation: flattenChildren(...): Encountered two children with the same key, .$Oauo5iGCRkdgJ4-KAAmp. Children keys must be unique.
at invariant (react.js:15915)
at flattenSingleChildIntoContext (react.js:15158)
at traverseAllChildrenImpl (react.js:17115)
at traverseAllChildrenImpl (react.js:17094)
at traverseAllChildren (react.js:17170)
at flattenChildren (react.js:15179)
at Constructor._updateChildren (react.js:10985)
at Constructor.updateChildren (react.js:10965)
at Constructor._updateDOMChildren (react.js:7007)
at Constructor. (react.js:6860)
_logFn @ skylink.debug.js:7912
error @ skylink.debug.js:7952
Skylink._trigger @ skylink.debug.js:8883
Skylink._welcomeHandler @ skylink.debug.js:10444
Skylink._processSingleMessage @ skylink.debug.js:9770
Skylink._processSigMessage @ skylink.debug.js:9731
(anonymous) @ skylink.debug.js:9440
Emitter.emit @ socket.io.js:5652
Socket.onevent @ socket.io.js:5178
Socket.onpacket @ socket.io.js:5136
(anonymous) @ socket.io.js:5517
Emitter.emit @ socket.io.js:5652
Manager.ondecoded @ socket.io.js:4663
(anonymous) @ socket.io.js:5517
Emitter.emit @ socket.io.js:2551
Decoder.add @ socket.io.js:6151
Manager.ondata @ socket.io.js:4653
(anonymous) @ socket.io.js:5517
Emitter.emit @ socket.io.js:2551
Socket.onPacket @ socket.io.js:459
(anonymous) @ socket.io.js:276
Emitter.emit @ socket.io.js:2551
Transport.onPacket @ socket.io.js:892
Transport.onData @ socket.io.js:884
ws.onmessage @ socket.io.js:1998
skylink.debug.js:8884 Uncaught Error: Invariant Violation: flattenChildren(...): Encountered two children with the same key, .$Oauo5iGCRkdgJ4-KAAmp. Children keys must be unique.
at invariant (react.js:15915)
at flattenSingleChildIntoContext (react.js:15158)
at traverseAllChildrenImpl (react.js:17115)
at traverseAllChildrenImpl (react.js:17094)
at traverseAllChildren (react.js:17170)
at flattenChildren (react.js:15179)
at Constructor._updateChildren (react.js:10985)
at Constructor.updateChildren (react.js:10965)
at Constructor._updateDOMChildren (react.js:7007)
at Constructor. (react.js:6860)

How did we reproduced it:

1. Peer A joins MCU room.
2. Peer B joins MCU room.
3. Peer A and Peer B gets connected.
4. Peer A starts screensharing.
5. Peer B sees Peer A screensharing stream.
6. Peer B stops screensharing.
7. See error above.

not work in Firefox 43+?

https://getaroom.io/

trying to connect firefox (43.0.1) with chrome (49.0.2623.110)
an error occurred "ICE failed, see about:webrtc for more details"

log cut:

SkylinkJS [ovq_Vzb6C-zhgmItAADE] - Adding local stream
skylink.debug.js (line 7992)
SkylinkJS [ovq_Vzb6C-zhgmItAADE] - <> Sending stream LocalMediaStream { endedInterval=126, recordedTime=31.98548752834467, id="{433762ae-5923-406d-812d-68421ee41095}", more...}
skylink.debug.js (line 7990)
SkylinkJS [ovq_Vzb6C-zhgmItAADE] - Sending restart message to signaling server
skylink.debug.js (line 7992)
SkylinkJS [ovq_Vzb6C-zhgmItAADE] - Sending to peer -> Object { type="restart", mid="uTAWMCBKXNrvh-DVAADD", rid="3db97d5114b01cbf7e561fca...0bd48c05380c_api_1c54c3", more...}
skylink.debug.js (line 7990)
SkylinkJS - <> (peerRestart) Event is triggered
skylink.debug.js (line 7992)
SkylinkJS [ovq_Vzb6C-zhgmItAADE] - <> Initializing check for peer's connection health
skylink.debug.js (line 7992)
ICE failed, see about:webrtc for more details
SkylinkJS - <> Received message
skylink.debug.js (line 7992)
SkylinkJS - <> (channelMessage) Event is triggered
skylink.debug.js (line 7992)
SkylinkJS [ovq_Vzb6C-zhgmItAADE] - Received from peer -> offer
skylink.debug.js (line 7990)
SkylinkJS [ovq_Vzb6C-zhgmItAADE] - (offer) Received offer from peer. Session description:

v=0

Cannot join a room when user's audio device is disabled.

Expected : Even when the audio device is disabled, If the video device(webcam) is enabled, User should be able to see the video feed.

Present : When the Audio device is disabled, Even thought the webcam is working, User is not able to join a session.

Environment : Windows 10 as a Standard user where microphone/Input device is disabled.
Google chrome, Version 46.0.2490.86 m

Error in console shown below

SkylinkJS - <<MediaStream>> Failed retrieving stream: Error: Expected audio tracks length with 1 and video tracks length with 1 but received audio tracks length with 0 and video tracks length with 1 at https://cdn.temasys.com.sg/skylink/skylinkjs/0.6.x/skylink.debug.js:13273:38_logFn @ skylink.debug.js:7878 skylink.debug.js:7880 SkylinkJS - <<Event>> (mediaAccessError) Condition is met. Firing event

the original prompt stays on (my face) during the call

it stays on top of the video renderers , the middle one if there are 3 people in the call, and it s kind of on the way of a good experience. Screenshot available of the new macbook pro to illustrate.

I need help to get started

Hello how are you? I'm new to this and I need help to start using the tool. I just registered in Temasys and I already have my API KEY. I downloaded the files of this GIT and I uploaded them to my server but when I open the web it says that there are missing files: "loader.js" and I can not make it work. Can someone give me a hand? Thank you

Safari cpu load

CPU load on Safari is too high:

It's almost unusable. Even for 5 min sessions it overheats.

OS: El Cap, Safari: 9.0.1, hardware: MacBook Pro (Retina, 15-inch, Mid 2015)

Combined audio/video mute on getaroom.io on Safari does not reflect on UI

Steps to reproduce.

1. Open https://getaroom.io
2. Press mute video followed by mute audio

Env : MacOs 10.10.5 Safari 9

Expected :
UI to reflect Video/Audio Muted

Actual :
UI reflects only the first stream that is muted.

Additional Information:
The following error is thrown on the dev console

Error: Invariant Violation: findComponentRoot(..., .0.0.0.0.$0.0.1.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables or nesting <p> or <a> tags. Try inspecting the child nodes of the element with React ID``.

Could you create a more modern example using react and webpack ?

Much of tooling in this is very exotic and tough to use. Could you use a more modern stack for example ? React + Webpack ? Create React App ?