add full screen option to screenshare
triptu opened this issue · comments
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
@triptu Can I work on this?
sure. Assigned to you.
@triptu Can you explain the issue again? I have one doubt. Say, the teacher is sharing the screen and the student is watching it. Should the full screen button come to student or teacher? The teacher shouldn't get it right, because he/she would already be sharing the screen and would by default be in full screen mode.
Also can you help me reproduce the playlist fullscreen feature?
yes the full screen will be there for all screenshare video tiles. Teacher might be sharing only a chrome tab or one window. If the teacher is sharing the whole screen, they won't see the screenshare tile but a generic you're sharing your screen. You can try these out on the room link to check the behaviour.
The option to play a video is on lower left side -
You can join the same room from other tab to see how it looks on the receiving side(and the full screen button).
To try locally set the REACT_APP_VIDEO_PLAYLIST env variable with jsonified string of sth like -
Details
[
{
"name": "100ms-360P",
"id": "video1",
"metadata": {
"description": "100ms"
},
"url": "https://d2qi07yyjujoxr.cloudfront.net/webapp/playlist/100ms-360p.mp4",
"type": "video"
},
{
"name": "100ms-720P",
"id": "video2",
"metadata": {
"description": "100ms"
},
"url": "https://d2qi07yyjujoxr.cloudfront.net/webapp/playlist/100ms-720p.mp4",
"type": "video"
},
{
"name": "Big Buck Bunny",
"id": "video3",
"metadata": {
"description": "Bunny"
},
"url": "https://d2qi07yyjujoxr.cloudfront.net/webapp/playlist/video2.mp4",
"type": "video"
}
]
Is the 100ms server down? It isn't loading any data in my developer dashboard.
Can you send the link you're trying?
It seems to be working fine, can you share a screenshot?
Yeah sure
Okay. It seems it isn't working in my brave browser. But its working fine in Chrome.
@triptu We have to make changes here only right? https://github.com/100mslive/hms-video-react/blob/main/src/components/VideoTile/VideoTile.tsx
Yes, it takes in a boolean showScreenshare which can be used to decide if the full-screen option needs to be shown.
Can you copy paste your complete REACT_APP_VIDEO_PLAYLIST line of env?
@triptu I am abandoning this issue for now.
sure, assigned.