Code Monkey home page Code Monkey logo

peer-to-peer-cue-system's Introduction

Peer-to-Peer Cue System

Cue system for simple two-way communication and visual signaling using a WebRTC peer-to-peer connection. This was initially designed for signaling on-stage actors during a theater performance.

Demo: https://jmcker.github.io/Peer-to-Peer-Cue-System

PeerJS examples

Setup

  1. Open receive.html on the receiving device.
  2. Open send.html on the sending device.
  3. Copy the ID from the receiving device to the sending device's ID field.
  4. Press Connect.
  5. Both should indicate a successful connection in the Status box.

Features

The receiver has access to large indicators for standby, go, fade, and stop signals.

The sender has access to buttons that send the standby, go, fade, and stop signals, triggering the receiver's indicators.

Both have access to a two-way messenger for additional communication.

peer-to-peer-cue-system's People

Contributors

caballerog avatar jmcker avatar jonasgloning avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

peer-to-peer-cue-system's Issues

does it work over internet?

hi there !
i checked out codes but im a beginner and i wasnt able to understand that well .
so i have a question " Does it work over internet? behind nat? different routers?"
if not how to configure that to work ?
Thanks !

issues while using in Mobile

I found peerjs able to connect but not able to send data to other peers.
here i am only include mobile related issues. It's working pretty good at laptops, pc.

Demo broke

Hi the demo isn't working since the peerserver couldn't be connected.

how can i connect more than 1 receiver?

the demo currently only allows single sender and single reciever , is it possible to connect multiple peers to this? i.e the sender can signal to say 100 receivers ?

CORS policy: Receiver can't create ID on Demo page

Unfortunately the demo currently does not work. Since the demo website is not using TLS, the user will get a CORS policy error:

Failed to load resource: the server responded with a status of 504 () receive.html:1 Access to XMLHttpRequest at 'https://0.peerjs.com/peerjs/id?ts=15438508918090.3806686527050229' from origin 'http://jackmckernan.tk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I guess there are two solutions to this:

  1. Add a certificate to the website and serve it via https (preferred) or
  2. Add secure: false to the new Peer()call

chrome on MacOS

hi, cool system.
I tried to run the demo on Chrome (latest) in MacOS and was not successful (even though the same works on Safari and Firefox).
The problem was that the sender issues a peer connect command, server receives the command (and thought it is connected). but the sender never saw that the connection was established and get stuck there.

image

Sender Send button not doing anything

after making successful connect, On sender.html send button is not working. Even i try to log the event sendButton.onclick but no log is showing.

via PHP?

Hello

Is it possible to send data with PHP?

Thanks

PeerJS id pool

Because this system was only designed for a single active pair of users, the identifiers used for inital connection and handshake are hand-assigned. For a multi-user system, this would need to be adapted to generate random ids that could be communicated prior to inital connection. This could be achieved through a centralized database (i.e. username linked with a randomly generated key at each login), any pre-existing two-way communication protocol, or simply with local generation and instructions to communicate to the second party. For ideas and implementation, take a look at this.

Should either identifier indicate that it is already in use, nothing can be done until the hold should expires on the server within two days or so. In this projects current state and with only a single active pair of users, the only option to rectify this is to manually change the indentifiers on both the sending and recieving page.

This error is especially prevalent when one user momentarily loses network connection. PeerJS (handles indentifier pool and initial handshake before dropping to direct peer-to-peer) has documentation suggesting a method to recover from this. At the time that this project was under active development, however, this method was unsuccessful at restoring connection or removing the "in use" status of the identifier on the PeerJS servers. There were several reports that error was on PeerJS's end of things. The PeerJS Repository no longer appears to be under active development, so chances this issue will not be resolved by them.

9000+ lines of code to do what?

I think you went overboard.
Sorry, about what I have to say.

I've been trying to decorticate your code for hours.
Why so much repetitions? This not coding. Never repeat, write once and reuse.
That's beside the useless one. You don't need a function to just return {};
Use a global if you have to.
And why does it loose connection every 5 mins?

All I need, is just this, sending small amount of data between web page in browsers.
I'm not gonna 9000+ lines of code for that.
I have made an entire Video and cache processor in less than 1200 JS lines.
Can't you make something simpler? So I can figure out what needs to be done (Easily).
Unless, that was your intend. In that case, You know what that makes you.

Here, give you an idea how this is done:
Replace your "EventEmitter" with a real event object.
Notice that you may pass as many parameters as you want.
Beside I think it is more useful in the event handler than the trigger.
But, If it must be; the correct way would be "TheseParameters.details" as an object passed through the event.
You could have an object handler Handling the extra argument in the handleEvent of the object.
You don't need: emit(event, a1, a2, a3, a4, a5)
Just use emit(event, ...args)

https://github.com/DCWizard/Class-EventObject/tree/main

The demo is not working between peers on completely different networks

Steps to reproduce:

  1. take you mobile phone and ensure you are connected using operator, e.g. 4G network, and not local network
  2. open browser on our mobile, make it as receiver, so visit https://jmcker.github.io/Peer-to-Peer-Cue-System/receive.html
  3. PC: open browser on your PC, make it as sender, so visit https://jmcker.github.io/Peer-to-Peer-Cue-System/send.html
  4. PC: type proper ID from receiver part and finish connection
  5. PC: try to send some message

Expected result: the chat is working, you can send and read messages
Current result: it works only if receiver and sender are on the same or nearby network

The issue is very probably caused by TURN/STUN server.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.