JSDK-2770 Mobile Friendly Quickstart Examples

[PikaJoyce]

JIRA Ticket

BUG FIX : Remote Reconnection LocalParticipant is not showing video on mobile.

Mobile Friendly Examples UI. This is WIP but I will update as I finish styling!

• [x] Bandwidth Constraints

• [x] Local Video Filter

• [x] Local Video Snapshot

• [x] Media Device Selection

• [x] Codec Preferences

• [x] Share Your Screen Gif of Screenshare example on Chrome

• [x] Dominant Speaker

• [x] Reconnection States and Events

• [x] Network Quality

• [x] Enabling and Disabling Tracks

• [x] Remote Reconnection States and Events - Done in another PR and is now merged

Contributing to Twilio

All third-party contributors acknowledge that any contributions they provide will be made under the same open-source license that the open-source project is provided under.

• [x] I acknowledge that all my contributions will be made under the project's license.

[PikaJoyce]

Requested Changes :

• [x] ALL EXAMPLES : Add gap between columns so there is small gap between app column and show code button
• [x] Bandwidth Constraint : Make audio graph append to top left corner of video instead of center.
• [x] Enable & Disable Tracks :
  • [x] Append audio icon to top left of video
  • [x] BUG FIX : Detach video from DOM, this is buggy.
  • [x] Rename buttons to enable/disable audio/video
• [ No Fix ] Network Quality, Codec Preferences, Media Device Selection, Local Video Filter, Bandwidth Constraint : The select arrow is no longer visible on mobile emulator. Filed ticket, this seems like a common issue. If I open the page on my phone, the arrows are there. However, only not available when I open the chrome mobile emulator.

CHECK. ALL. EXAMPLES. ON. IOS SAFARI + ANDROID CHROME DEVICES.

• [ ] Triple check everything to make sure it is all hunky dory Checked on :

• [x] iOS Safari

• [x] Microsoft Edge

• [x] Mozilla Firefox

• [x] Chrome

• [ ] Android Chrome

[PikaJoyce]

@manjeshbhargav here's what the new enable disable example looks like!