100mslive / 100ms-web Goto Github PK

make a UI component to take user feedback after leave page. For now, this will only be printing the feedback to console. Design mockup for the component -

In above leave page is already there, the send feedback button is required in center bottom, which when clicked opens the below modal.

We could allow customization of the app title by setting an env var and default to the current logic in case it is not defined.

I can work on this myself if I have the ok.

Describe the bug
Hi, I'm currently using @100mslive/react-sdk in my next js app and everything is working great on desktop and mobile browsers, but i'm now trying to create a mobile app using https://capacitorjs.com/. I've got everything working in the mobile app on both iOS and Android except for the 100ms integration.

When I start live streaming, I am being prompted for camera/video permissions, which I'm granting, but in the mobile app I only see this grey screen with a play button image:

For Android, these are the permissions and features I'm setting in my AndroidManifest.xml file:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>“
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <uses-feature android:name="android.hardware.audio.output" android:required="true" />
    <uses-feature android:name="android.hardware.camera.any" android:required="true" />
    <uses-feature android:name="android.hardware.camera" android:required="true" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="true" />
    <uses-feature android:name="android.hardware.camera.front" android:required="false" />
    <uses-feature android:name="android.hardware.camera.level.full" android:required="false" />
    <uses-feature android:name="android.hardware.camera.flash" android:required="false" />

Also, if i use the developer console i see this error, even though i have granted permission:

I realize you have Android and iOS SDKs of 100ms, but as a non-mobile developer, I'm not entirely sure how I would instead use those SDKs on mobile and whether or not they will work with the existing @100mslive/react-sdk library I'm using on the client.

Any information would be greatly appreciated, thanks! 🙏🏼

To Reproduce
Steps to reproduce the behavior:

1. Install @100mslive/react-sdk in a react or next js app
2. Install capacitor to generate a mobile app
3. Attempt to start a livestream from within an Android or iOS app
4. See that only a grey screen with a playhead image is shown and the livestream never starts

Expected behavior
The video stream should start properly and use the mobile device's camera

Screenshots

Smartphone (please complete the following information):

• Device: Pixel 7, Pixel 6 pro and Pixel 4
• OS: Android/Tiramisu

Additional context
I'm not sure if this is the correct repo to create this issue in, so please let me know if there is a better place to put it

headerView has the above components. Right now, all three are independent. Take up lot of space.

When recording, Audio only screenshare, Audioplaylist are on, they overlap with active speaker. They also don't look good in mobile. They need to be combined into one dropdown menu like UI.

Note: share some screenshots of the ideas before getting into implementation.

Describe the bug
I have 3 roles for my 100ms meeting (admin, guest, and waiting room).

For public meetings, the admin has an useEffect hook that monitors HMSNotificationTypes.PEER_JOINED in the waiting room. It automatically calls actions.changeRole upon getting the notifications.

Periodically (3/10 times) waiting room users upgraded to guest users will have their audio track not changeRoles with them.

They will still appear to have an audio track on their side, but on the admin side, it will look like they are muted and have no audio track.

To Reproduce
Steps to reproduce the behavior:

1. Go create 3 roles
2. For the admin role, have a useEffect that immediately calls actions.changeRole
3. See that the audio track on the guests role does not transfer roles

Expected behavior
The audio works as expected.

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• Version latest.

in large rooms, notifications on peer join, leave new message etc. can be bothering. It would be nice to have a configuration in the UI settings where one can select what types of notifications they want.

Task -

• Rename Layout Settings above to UI Settings
• Rename title from Participant in View to UI settings and make participant text to left of the slider.
• Add new section for Notifications with checkboxes for Peer Join/Peer Leave/New Message/Errors
• Make sure only the selected notifications are sent from here - https://github.com/100mslive/100ms-web/blob/main/src/views/components/notifications/Notifications.jsx

I received this email addressed to "Brett jitsi/docker-jitsi-meet`:

Reaching out to see if 100ms can help with in-app video conferencing/streaming,

100ms is a SaaS platform that allows devs to add video conferencing & streaming to your Web, Android and iOS apps. We are used by Circle, Byjus, Kutumb, Circle and dozens of enterprises because:

1. Native SDK -- Easy to use conferencing, recording, streaming, chat, interactivity in a single SDK
2. Works everywhere - Built by ex-Disney team to ensure it works seamlessly for across conditions
3. Quick integration - Go live within days using pre-built apps, roles and components
4. No maintenance - Our team is in charge of scaling, security, upgrades and reliability

If you see it relevant, can we schedule a quick 20 mins intro meeting?

Thanks in advance,
Jay Kanakiya,
Account Executive, 100ms

Please don't use GitHub stars from Jitsi repositories to target spam.

jitsi/docker-jitsi-meet#1589

Can Whiteboard be applied to Vue frameworks?

add go to docs option in center menu which takes to docs.100ms.live

Describe the bug
Not able to join a scheduled call

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Dashboard'
2. Click on 'Call'
3. Click on 'Join Call'
4. See error

Expected behavior
Should be able to join call

Screenshots

Desktop (please complete the following information):

• Browser Chrome

Additional context
High Priority - Giving a bad experience to Mentors, Might effect my profile

Describe the bug
I made a video call app in react and when someone joining the call from ios device.first time voice not coming if ios user connect headshet and disconnect it then sound coming in the speaker..
To Reproduce

Expected behavior
i want if user join the meeting sound should come to speaker at first

Smartphone (please complete the following information):

• Device: [e.g. iPhone5s]

it should be possible to fullscreen a screenshare

We have it for video playlist already and the button looks like this -

The way to do this would be changing the VideoTile here - https://github.com/100mslive/hms-video-react/blob/main/src/components/VideoTile/VideoTile.tsx to add a small fullscreen icon which acts similar to video playlist screenshare button. Here is the function which is used by the video playlist component which can be traced back to learn more - https://github.com/100mslive/hms-video-react/blob/c90fb6a62e7532a6e7dabe006b015c8e056c0f7e/src/utils/index.ts#L643

save UI settings in local storage and remember them for next join.

Describe the bug
If you call hmsActions.changeName with the same name that the peer already has, the SDK errors.

To Reproduce
Video demo: https://www.loom.com/share/12d905e00cf24f3cafb066c4e83968a8

Expected behavior
The sdk should noop under the hood and not error. Or, throw a more helpful/clear, error message.

Describe the bug
Google pixel 6a
Samsung Flip 4
Samsung Note10+

In this device, the volume button doesn't directly adjust the call sound. Instead, it controls a progress bar that visually increases or decreases, but it doesn't affect the call volume. The call volume is adjusted independently through the media volume controls.

export const VideoPlayer = React.forwardRef((props: React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, ref: any) => (
  <video ref = {ref} {...props}  />
))

Screenshot

SDK Version:

"@100mslive/hms-noise-suppression": "^0.9.19",
 "@100mslive/react-sdk": "^0.8.19",

Replace the select for roles with multi select where multiple roles can be selected.

click on mute all from above menu to open the following modal

Describe the bug
While I follow the steps mentioned in the Readme.md to set up the application locally for enhancement, found following issues:

• In the actual application the code const envPolicyConfig = JSON.parse(process.env.REACT_APP_POLICY_CONFIG || "{}"); . was present as const envPolicyConfig = JSON.parse(process.env.REACT_APP_POLICY_CONFIG || false); which caused an error while parsing, so I was able to see only a blank screen.

• A closing curly brace was missing in the example of REACT_APP_POLICY_CONFIG REACT_APP_POLICY_CONFIG = "{"trainer":{"center": ["student"],"sidepane":["trainer"]}"

To Reproduce
Steps to reproduce the behavior:

1. Just follow the steps one by one and try to run the app locally and you'll face this issue.

ServerErrors: urls missing
Wrapper vendors~main.chunk.js:15262
HMSException HMSException.ts:16
ServerErrors ErrorFactory.ts:210
_callee$ index.ts:81
Babel 10
_callee12$ index.ts:254
Babel 8
_callee26$ index.ts:462
Babel 8
_callee19$ index.ts:646
Babel 8
_callee26$ HMSSDKActions.ts:445
Babel 8
stream Room.js:21
React 14
unstable_runWithPriority scheduler.development.js:468
React 15
js index.js:8
js main.chunk.js:1495
Webpack 7
index.js:1

Here is how my params is :

await hmsActions.startRTMPOrRecording({
    meetingUrl: "https://t***.app.100ms.live/meeting/***/host",
    rtmpUrls: [
              "rtmp://a.rtmp.youtube.com/live2/******",
              "rtmp://b.rtmp.youtube.com/live2/******?backup=1"
            ],
    record: false
  })

Is your feature request related to a problem? Please describe.
Roles currently allow individuals to control remote audio and video settings. However, they do not allow a role to control a remove user's screenshare. It looks like the demo application uses a custom event workaround as seen here:

https://github.com/100mslive/100ms-web/blob/f67d7aabf39595234a8f60a96becb874250104ce/src/plugins/RemoteStopScreenshare.jsx

Describe the solution you'd like
It would be great if this was a top-level feature just like muting a remote peers audio/video

Describe alternatives you've considered
I could use the custom event method.

Installing dependencies with npm requires the --legacy-peer-deps flag to be passed, which is not ideal. This is the error message without the flag:

npm/node versions for reference (using active LTS):

arjun@Arjuns-MacBook-Pro ~/r/100ms-web (main) [9]> node -v
v16.4.2
arjun@Arjuns-MacBook-Pro ~/r/100ms-web (main)> npm -v
7.18.1

Is your feature request related to a problem? Please describe.
I am doing config SimulcastLayers live but 2 variable get from 100ms always false


I want config enabled=true and degraded = true in 100ms
What should I do?

Thankiu,

Steps to reproduce the behavior:

1. Go to the conference view
2. Open a dialog (end room confirmation, change name, settings)
3. Close the dialog

After closing a dialog the user should be able to continue to click buttons.

Desktop:

• OS: Windows & Mac
• Browser: Mozilla & Chrome

the user needs to enter their name everytime in order to join the room, this is tedious and the information can be remembered for next time to auto populate

Overview

Request the addition of Breakout Rooms in our Video Conf App, which will enable meeting organizers to divide participants into smaller groups for various purposes like workshop sessions, networking, or group discussions. Breakout Rooms would significantly improve user experience and cater to the growing needs of educational institutions and businesses.

Features

1. User-Friendly Interface and Configuration:

   To make the Breakout Rooms experience seamless, a user-friendly interface should be developed, enabling organizers to configure, monitor, and manage the rooms with ease. This feature should also allow participants to join and move between rooms smoothly.

2. Flexible Room Setup:

   The organizer should have the ability to set up rooms with varying capacities, customize each room's name, and restrict access to specific groups, such as inviting only specific participants. This feature will provide additional control and make each session more targeted.

3. Random and Manual Room Assignment

   Organizers should be able to divide participants into Breakout Rooms either manually or automatically, following customizable rules such as equal group sizes or entirely randomized assignment.

4. Time-Limited Sessions:

   Enable organizers to set a countdown timer for each Breakout Room session. This feature will ensure timely completion of group activities and prompt all participants to rejoin the main meeting when the time's up.

5. Recording Capability:

   Each Breakout Room should have the option for recording sessions, which could be accessed later by participants and organizers for future reference or performance evaluations.

6. Moderation Tools:

   Provide organizers with moderation tools to facilitate Breakout Room management, such as muting/unmuting participants, sending announcements/broadcast messages to all rooms, and overseeing group activities.

7. Private Chat and Shared Documents:

   Enable participants to collaborate effectively by providing features like private chat within the Breakout Rooms and the ability to share documents, whiteboards, or screens with other members.

By implementing these features, the 100ms web App will provide users with an enhanced experience, ideal for collaboration in various fields. Breakout Rooms will meet the diverse requirements of users, helping to facilitate effective communication and teamwork.

The app is littered with deeply nested ternaries and if else statements. Both are super tough to reason about and it feels like when reading the code that new features are just being added to a never ending list of if else statements mixed with deeply nested ternaries.. I would suggest that no-nested-ternary is added to your eslint rules at the very least to stop this from continuing.

Describe the bug
Not able to join the call. It says: An error occurred while fetching the app token. Please look into logs for more details. If you think this is a mistake on our side, please create an issue or reach out over Discord.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
I was expecting to be able to join the call

Screenshots

Desktop (please complete the following information):

• OS: [macOS]
• Browser [Chrome]

Describe the bug
Websocket connection being lost

Project
react project sample adapted to next.js

To Reproduce
Steps to reproduce the behavior:

1. After leaving the previewScreen.jsx.
2. When joining entering the conference in the react app sample.
3. The websocket connection is lost.

Expected behavior
Should connect to the room.

Screenshots

Desktop (please complete the following information):

• OS: Win 11
• Browser Brave and Chrome, same error on both
• Version:
  • Brave is up to date Version 1.60.118 Chromium: 119.0.6045.163 (Official Build) (64-bit)
  • Chrome Version 119.0.6045.159 (Official Build) (64-bit)

Additional context
Started today

Aditional error message in the console as well:

[HMSPerformanceTiming] join-room-654940e77978e20a415f6dc0
DOMException: Failed to execute 'measure' on 'Performance': The mark 'join-room-654940e77978e20a415f6dc0' does not exist.

rk 'join-room-654940e77978e20a415f6dc0' does not exist.
at c.log (webpack-internal:///./node_modules/@100mslive/hms-video/dist/index.js:84:4120)
at c.timeEnd (webpack-internal:///./node_modules/@100mslive/hms-video/dist/index.js:84:3690)
at Pr.eval (webpack-internal:///./node_modules/@100mslive/hms-video/dist/index.js:135:157726)
at Generator.next ()
at s (webpack-internal:///./node_modules/@100mslive/hms-video/dist/index.js:60:794)

Context:
Solution was adapted to run on next.js and was running accordingly until yesterday.

Describe the bug
On the join method the SDK loggin this error:

{
code: 401
action: "INIT"
name: "ServerErrors"
message: "[INIT]: Server error"
description: "json: cannot unmarshal number into Go struct field Claims.user_id of type string"
isTerminal: false
timestamp: Fri Oct 29 2021 18:26:03 GMT+0530 (India Standard Time)
}

The official example code sandbox is also facing this issue: https://codesandbox.io/s/hms-js-quickstart-5rmes?from-embed

if you have the permission to end room, this is how the UI currently looks when clicked on leave room

It's much easier to click on end room by mistake. Two things are required -

• Switch the order of end room and leave room, so leave is down and end is up.
• Highlight the leave button with red color instead of the endroom

Describe the bug
So i cloned this template, populated the example.env with my data, installed the dependencies via yarn and then started it. I saw the 404 page, as expected. SO i knew the server was up. Next I tried the localhost:3000/meeting/<room_id>/ URL, which should work, since the room exists and the role exists in the room. The token endpoint and room id are fine, i cross-checked them with the data in 100ms. But instead of a preview screen, i get the error message "ROOM DOES NOT EXIST"

To Reproduce
Steps to reproduce the behavior:

1. Clone this repo
2. Get your token endpoint from the 100ms developer page
3. Put it in the example.env where it asks you to
4. Install yarn dependencies, then start with yarn start. go to localhost:3000/<room_id>/, and then see the error

Expected behavior
I expected it to show me the preview screen, ask for device permissions and then let me join the room.

Screenshots
https://imgur.com/8K8WP9K.png

Desktop (please complete the following information):

• OS: Kali Linux 5.16.0-kali7-amd64
• Browser Firefox-esr
• Version 91.8.0esr

Describe the bug
The @100mslive/roomkit-react package ins't properly shipping with the HMSPrebuilt component or it isn't being picked up by Typescript

To Reproduce
Steps to reproduce the behavior:

1. Install roomkit as per docs here
2. Import the HMSPrebuilt component from the module as per link above
3. See error

Expected behavior
The component should be picked up when imported

Screenshots

Module correctly installed:

The issue:

Setup & Dependencies:

• @100mslive/roomkit-react 0.1.3
• React 18.2.0
• Next.js 13.2.1
• Typescript 4.9.5

Additional context
I've tried restarting the TS server and reinstalling the package to no avail.

When joining a room, the referenced effect hook can disconnect users with a slow connection before they finish the room enter process.
This leaves the users with the FullPageProgress component inside the conference view infinitely showing its loader due to the following lines:

To reproduce:

1. Set a low connection speed on the browser dev tools network tab.
2. Refresh the page
3. Click join as soon as possible
   

I am a beginner-level programmer. I am trying to implement an audio conference feature in my app (written in Flutter). For some reason, the token request always returns null. I don't know what I'm doing wrong. Kindly go through the screenshots and help me find what I am doing wrongly. Thanks.

we've disabled the chat button in mobile browsers currently because it breaks the UI and is not really usable on phone due to the width being small. We can increase the width on mweb conditionally, so user can participate in chat from phone, ipads etc. too.

We can make it an overlay on top of other things so it can have proper width in mobile as well.