Time-to-first-frame metrics benchmarking and timeline chart

[niyatim23]

Issue #, if available:

What was changed?
Introduced a new feature which allows receiving master-side metrics in the JS viewer

Why was it changed?
It would be easier to understand the time-to-first-frame and which process on both sides is time-consuming and how much time does each API call take

How was it changed?

• The master-side (KVS WebRTC C SDK) metrics are sent to the viewer in multiple JSON messages via the datachannel opened by the viewer
• The datachannel first sends a message of the following format with t1 attached, to which the master responds back with the same message attaching t2. In response to this, the viewer sends the same message back with t3 and so on until t5. The viewer is responsible for attaching t1, t3, t5. The master is responsible for t2 and t4. (Master e2e time: t4 - t2, Viewer e2e time: t3 - t1):

let dataChannelLatencyCalcMessage = {
    content: 'Opened data channel by viewer',
    t1: '',
    t2: '',
    t3: '',
    t4: '',
    t5: ''
}

What testing was done for the changes?
Tested the changes locally by running the master first and the viewer first to see that the plot had all the relevant values

Viewer is started first

Master is started first

Tooltip

Datachannel messages from master

Checkbox

Timer

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[sirknightj]

We'll merge this in at the same time as awslabs/amazon-kinesis-video-streams-webrtc-sdk-c#1846