touchdesigner / webrtc-remote-panel-web-demo Goto Github PK

A simple React project that can receive a WebRTC video stream from TouchDesigner and send back mouse and keyboard events.

License: Other

HTML 3.18% JavaScript 96.82%

react signaling touchdesigner webrtc websocket

webrtc-remote-panel-web-demo's People

Contributors

Stargazers

Watchers

Forkers

kyeshmz scs-joel

webrtc-remote-panel-web-demo's Issues

Use react hooks instead of class Components

The web is pretty clear about it. Component classes should not be used in React anymore.
https://usehooks.com/
https://dev.to/video-sdk/build-video-calling-app-using-react-hooks-1a79

Review signaling strategy

With Google's and Mozilla's exemples and guidelines.

Fix audit warning with CRA update

Users might notice when installing the project or deploying (dependabot) that they are "security warnings".

Those security warnings can be safely ignored as they affect backend code which the project doesn't rely on. This backend code is used to build the project.

It is widely reported @ Create-React-App / Facebook folks and is awaiting the following pr to be merged facebook/create-react-app#12172

Similar issues were already reported by React users:
facebook/create-react-app#11801

This issue goes extensively into why it can be ignored:
facebook/create-react-app#11174

ESLint recommendations

WARNING in [eslint]
src\App.js
Line 1:17:    'useEffect' is defined but never used                                         no-unused-vars
Line 1:28:    'useState' is defined but never used                                          no-unused-vars
Line 9:10:    'getOrDefaultTo' is defined but never used                                    no-unused-vars
Line 235:3:   Expected a default case                                                       default-case
Line 296:24:  Expected '===' and instead saw '=='                                           eqeqeq
Line 648:29:  Array.prototype.some() expects a value to be returned at the end of function  array-callback-return
Line 688:35:  Array.prototype.some() expects a return value from function                   array-callback-return

Add comments everywhere

Review in comment TODOs

Rename unclear classes and props

Specify LICENSE

@jetXS what license are you planning on using? It would be set in the package.json file and in the repo.

https://docs.npmjs.com/cli/v8/configuring-npm/package-json

NPM Dependency vulnerabilities

npm install complains about potential vulnerabilities.

9 high severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

List and remove dead code using the unimported tool

https://github.com/smeijer/unimported

     summary               unimported v1.22.0 (node)
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────       entry file          : src/index.js

       unresolved imports  : 0
       unused dependencies : 7
       unimported files    : 2


─────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────     │ 7 unused dependencies
─────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────   1 │ @mui/icons-material
   2 │ @testing-library/jest-dom
   3 │ @testing-library/react
   4 │ @testing-library/user-event
   5 │ express
   6 │ react-scripts
   7 │ webrtc-adapter
─────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

─────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────     │ 2 unimported files
─────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────   1 │ src/adapter.js
   2 │ src/setupTests.js
─────┴─────────────────────

Use JSX syntax instead of React.createElement()

Code splitting

All the classes currently live in src/App.js

There are currently four classes in the project:

TDClient
WebRTC
Signaling
App

First step is to split those into separate files.

Review use of the Mozilla "adapter.js" WebRTC shim

It's downloaded as a file in src/ and is listed in webrtc-adapter.
It should be used to ensure crossbrowser compatibility, since the WebRTC specs are forever evolving.

adapter.js is a shim to insulate apps from spec changes and prefix differences in WebRTC. The prefix differences are mostly gone these days but differences in behaviour between browsers remain.

Better documentation

Hi, a clearer explanation would be nice: i can't make this connect to nothing, there is no log, no error messages, just nothing that helps to make a working connection.

Is the certificate needed? the port should be set as 443 in the signaling server in touchdesigner?
Can i use 9980 port in the web page?
the project must run on the same machine? do i need a touchdesigner with a signaling client running together?
using the official demo do i need to open ports on the router?

Having a more precise explanation would be better, since i can make a WebRTC between two Touchdesigner machines without issues.

Migrate to using webrtc-react premade modules

JS newcommers comming from a standard TD use probably have no interest in understanding the WebRTC negotiation tactics.
This demo should be as simple as possible and use less code.