nimbleape / dana-the-stream-gatekeeper Goto Github PK
View Code? Open in Web Editor NEWReact based front-end demo for Asterisk's SFU
License: MIT License
React based front-end demo for Asterisk's SFU
License: MIT License
The sidebar should be moved to the right side of the UI so it doesn't conflict with the chat sidebar.
The chat sidebar should persist until the user clicks the toggle button again and shouldn't dim the rest of the UI
Shouldn't need one due to the fact Asterisk is 99% going to be public facing IP but could happen
An option (defaulting to off) could be created to send the transcript live to all participants via sendMessage(). You could create a header so the incoming message is redirected to the transcript sidebar instead of the chat sidebar.
Low Priority.
And make things actually check it
currently we try to subscribe to an undefined mqtt object on a call function call for example
Asterisk can now support multiple tracks in a webrtc streams
Support putting the screen share into the existing PeerConnection rather than making a new one with silent audio
The display should be more compact. Not so much whitespace.
When I'm the only person in a conference, waiting for others to join, I see a random audio mute/video mute button in the middle of the screen, but only when I mouse-over a particular region of the screen.
Please see the attached screencast.
I want the screenshare to be bigger than the others, maybe move to two columns instead of two rows. and make the screenshare the sole thing in the left column?
The toggle button should have a tooltip.
Join should make sure that a wssServerUri, extension and password before it allows you to join a room and if you dont have those setup, force you over to the setup page
Add option to limit video resolution to various common values... 480p, 720p, 1080p, etc.
Dana assumes that it's running at the root of the web server (https://example.com/) and doesn't support running under a sub-path (https://example.com/dana/ or https://example.com/something/dana/) for example.
The time should be displayed with each message (maybe with an option to turn it on/off)
The "ENTER" key should be bound to the send button.
How to deal with the one Audio stream from Asterisk.... ?
List it as it's own thing? Just have a mute/unmute button up next to the screenshare button?
in a drawer
Currently it'll give you two rows and place everything inside them. if you have the wrong window size things aren't going to work well. We can do better - just need a bit of time.
The toggle button should have a tooltip.
Fix it so that old media streams/tracks are removed from the view
When I'm sending a screenshare I don't want to show it in remote streams. This happens because I have to make a separate session for the screenshare due to Asterisk's limitations
I know im sending a screenshare, so compare the ID of the mediastream to the remote and make sure I don't show it in remote streams
Please add a LICENSE file with the text of the license you wish to use for this project.
react doesnt handle mediaStreams going into state very well.....
don't use it
To be able to pass in a name etc
Add video element titlebar with display name to video element. Could also have talking indicator, mute status, etc.
into the drawer
try to also do this using true html5 subtitles
Dana doesn't seem to work anymore, due to the following JavaScript error happening quite a few times when trying to join a conference.
The application seems to think all is well, but the connection to the Asterisk server doesn't happen and errors of this nature are in the JS console:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'on')
at VideoRoom._callee5$ (VideoRoom.js:470:19)
at tryCatch (runtime.js:64:1)
at Generator.invoke [as _invoke] (runtime.js:281:1)
at Generator.next (runtime.js:117:1)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:25:1)
VideoRoom.js:410 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'on')
at VideoRoom._callee4$ (VideoRoom.js:410:23)
at tryCatch (runtime.js:64:1)
at Generator.invoke [as _invoke] (runtime.js:281:1)
at Generator.next (runtime.js:117:1)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:25:1)
at asyncToGenerator.js:32:1
at new Promise (<anonymous>)
at VideoRoom.<anonymous> (asyncToGenerator.js:21:1)
at VideoRoom._call (main.8f8d9f05.chunk.js:360:297)
Occurs in both Chromium 70 and Chromium 101.
Similar equivalent errors in Firefox:
Uncaught (in promise) TypeError: this._sip is undefined
_callee4$ VideoRoom.js:410
Babel 8
React 12
unstable_runWithPriority scheduler.production.min.js:309
React 3
Uncaught (in promise) TypeError: this._sip is undefined
_callee5$ VideoRoom.js:470
tryCatch runtime.js:64
invoke runtime.js:281
defineIteratorMethods runtime.js:117
Babel 2
The transcript sidebar should persist until the user clicks the toggle button again and shouldn't dim the rest of the UI.
It became a little bit of a mess during development, refactor it and split it out a bit
Bonus:
There should be an option to save the contents of the transcript sidebar to a file.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.