feat: [VID-160] call inspector page

[myandrienko]

This is the call inspector page:

It shows device encoding and decoding capabilities (inspector does its best to show capabilities in human-readable format), as well as available media input devices.

When connected to a call, it shows a little bit more.

Joining a call

To join an existing call, enter call type, id, API key and user token, and press Enter.

Copy-pasting four values can be annoying. Luckily, inspector supports a special "connection string" format. Every call instance has the call.getConnectionString() method. Grab the connection string, paste it into the first input, and press Enter:

Connection string can also passed as the conn= query parameter.

Pronto has a Go to Inspector option in the dev menu:

Finally, you can press Join demo call, and a new test call will be created and joined on the current pronto environment. After you leave the test call, its credentials will remain entered, so you can reconnect.

In call

When in-call, a few more options become available.

Header shows call cid and current calling state. A little call connection log appears. If there were any problems while joining the call they will be displayed in the log.

Media input device dashes become interactive, allowing to select and toggle devices.

And a couple more dashes appear:

Connectivity dash shows current connection state to Coordinator and SFU. Little heartbeats show when status was last polled. There's a button to force close connection - it can be used to emulate network drop or server error.

When publishing, it also features a transport diagram that visualizes the selected candidate pair for the RTC connection. Re-ICE button forces forces renegotiation.

Codecs in use dash list codecs that are currently used in the call. That depends on other call participants, so there's a button to force subscribing to video from all call participants.

Markdown report

At any point you can press the little clipboard button in the top right to copy full report contents in Markdown format.

Client and call instance

Current client and call instances are exposed via the _inspector global variable, so you can inspect it using developer console.