docs/collaboration.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="2158px" preserveAspectRatio="none" style="width:3260px;height:2158px;background:#FFFFFF;" version="1.1" viewBox="0 0 3260 2158" width="3260px" zoomAndPan="magnify"><defs/><g><rect fill="#FFFFE0" height="2146.7832" style="stroke:#181818;stroke-width:0.5;" width="1204.5" x="63" y="6"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="39" x="645.75" y="18.5684">Client</text><rect fill="#ADD8E6" height="2146.7832" style="stroke:#181818;stroke-width:0.5;" width="1978.5" x="1269.5" y="6"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="43" x="2237.25" y="18.5684">Server</text><rect fill="#FFFFFF" height="1807.9434" style="stroke:#181818;stroke-width:1.0;" width="10" x="113" y="256.3516"/><rect fill="#FFFFFF" height="1778.6328" style="stroke:#181818;stroke-width:1.0;" width="10" x="242.5" y="285.6621"/><rect fill="#FFFFFF" height="1749.3223" style="stroke:#181818;stroke-width:1.0;" width="10" x="712.5" y="314.9727"/><rect fill="#FFFFFF" height="1507.8379" style="stroke:#181818;stroke-width:1.0;" width="10" x="818.5" y="556.457"/><rect fill="#FFFFFF" height="1244.043" style="stroke:#181818;stroke-width:1.0;" width="10" x="938.5" y="820.252"/><rect fill="#FFFFFF" height="1185.4219" style="stroke:#181818;stroke-width:1.0;" width="10" x="1068" y="878.873"/><rect fill="#FFFFFF" height="802.3848" style="stroke:#181818;stroke-width:1.0;" width="10" x="1198" y="1261.9102"/><rect fill="#FFFFFF" height="1972.8066" style="stroke:#181818;stroke-width:1.0;" width="10" x="1336.5" y="91.4883"/><rect fill="#FFFFFF" height="1927.1855" style="stroke:#181818;stroke-width:1.0;" width="10" x="1818.5" y="137.1094"/><rect fill="#FFFFFF" height="1897.875" style="stroke:#181818;stroke-width:1.0;" width="10" x="1924.5" y="166.4199"/><rect fill="#FFFFFF" height="1868.5645" style="stroke:#181818;stroke-width:1.0;" width="10" x="2034.5" y="195.7305"/><rect fill="#FFFFFF" height="1361.2852" style="stroke:#181818;stroke-width:1.0;" width="10" x="2166" y="703.0098"/><rect fill="#FFFFFF" height="861.0059" style="stroke:#181818;stroke-width:1.0;" width="10" x="2307" y="1203.2891"/><rect fill="#FFFFFF" height="626.5215" style="stroke:#181818;stroke-width:1.0;" width="10" x="2437" y="1437.7734"/><rect fill="#FFFFFF" height="509.2793" style="stroke:#181818;stroke-width:1.0;" width="10" x="2585" y="1555.0156"/><rect fill="#FFFFFF" height="450.6582" style="stroke:#181818;stroke-width:1.0;" width="10" x="2736.5" y="1613.6367"/><rect fill="#FFFFFF" height="421.3477" style="stroke:#181818;stroke-width:1.0;" width="10" x="2889" y="1642.9473"/><rect fill="#FFFFFF" height="362.7266" style="stroke:#181818;stroke-width:1.0;" width="10" x="3042.5" y="1701.5684"/><rect fill="#FFFFFF" height="333.416" style="stroke:#181818;stroke-width:1.0;" width="10" x="3204.5" y="1730.8789"/><rect fill="none" height="105.2422" style="stroke:#000000;stroke-width:1.5;" width="836" x="1263.5" y="98.4883"/><rect fill="none" height="134.5527" style="stroke:#000000;stroke-width:1.5;" width="1869.5" x="10" y="217.7305"/><rect fill="none" height="134.5527" style="stroke:#000000;stroke-width:1.5;" width="2083.5" x="169" y="923.1836"/><rect fill="none" height="75.9316" style="stroke:#000000;stroke-width:1.5;" width="586.5" x="2667.5" y="1863.1211"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="38" x2="38" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="118" x2="118" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="247" x2="247" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="717.5" x2="717.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="823.5" x2="823.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="943.5" x2="943.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="1072.5" x2="1072.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="1202.5" x2="1202.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="1341.5" x2="1341.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="1823.5" x2="1823.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="1929.5" x2="1929.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="2039.5" x2="2039.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="2170.5" x2="2170.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="2311.5" x2="2311.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="2441.5" x2="2441.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="2589.5" x2="2589.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="2741.5" x2="2741.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="2893.5" x2="2893.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="3047.5" x2="3047.5" y1="81.4883" y2="2073.2949"/><line style="stroke:#181818;stroke-width:0.5;stroke-dasharray:5.0,5.0;" x1="3209" x2="3209" y1="81.4883" y2="2073.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="31" x="20" y="78.5352">User</text><ellipse cx="38.5" cy="13.5" fill="#E2E2F0" rx="8" ry="8" style="stroke:#181818;stroke-width:0.5;"/><path d="M38.5,21.5 L38.5,48.5 M25.5,29.5 L51.5,29.5 M38.5,48.5 L25.5,63.5 M38.5,48.5 L51.5,63.5 " fill="none" style="stroke:#181818;stroke-width:0.5;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="31" x="20" y="2085.8301">User</text><ellipse cx="38.5" cy="2097.2832" fill="#E2E2F0" rx="8" ry="8" style="stroke:#181818;stroke-width:0.5;"/><path d="M38.5,2105.2832 L38.5,2132.2832 M25.5,2113.2832 L51.5,2113.2832 M38.5,2132.2832 L25.5,2147.2832 M38.5,2132.2832 L51.5,2147.2832 " fill="none" style="stroke:#181818;stroke-width:0.5;"/><rect fill="#E2E2F0" height="30.4883" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="102" x="67" y="50"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="88" x="74" y="70.5352">Web Browser</text><rect fill="#E2E2F0" height="30.4883" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="102" x="67" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="88" x="74" y="2092.8301">Web Browser</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="137" x="179" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="72" x="211.5" y="54.0469">Client App</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="123" x="186" y="70.5352">[html5, javascript]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="137" x="179" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="72" x="211.5" y="2092.8301">Client App</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="123" x="186" y="2109.3184">[html5, javascript]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="92" x="671.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="78" x="678.5" y="54.0469">Web Socket</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="71" x="682" y="70.5352">[socket.io]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="92" x="671.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="78" x="678.5" y="2092.8301">Web Socket</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="71" x="682" y="2109.3184">[socket.io]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="100" x="773.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="44" x="801.5" y="54.0469">Device</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="780.5" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="100" x="773.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="44" x="801.5" y="2092.8301">Device</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="780.5" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="120" x="883.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="106" x="890.5" y="54.0469">Send Transport</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="900.5" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="120" x="883.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="106" x="890.5" y="2092.8301">Send Transport</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="900.5" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="119" x="1013.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="105" x="1020.5" y="54.0469">Video Producer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="1030" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="119" x="1013.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="105" x="1020.5" y="2092.8301">Video Producer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="1030" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="121" x="1142.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="107" x="1149.5" y="54.0469">Audio Producer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="1160" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="121" x="1142.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="107" x="1149.5" y="2092.8301">Audio Producer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="1160" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="136" x="1273.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="75" x="1304" y="54.0469">Server App</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="122" x="1280.5" y="70.5352">[node.js, express]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="136" x="1273.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="75" x="1304" y="2092.8301">Server App</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="122" x="1280.5" y="2109.3184">[node.js, express]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="92" x="1777.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="78" x="1784.5" y="54.0469">Web Socket</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="71" x="1788" y="70.5352">[socket.io]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="92" x="1777.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="78" x="1784.5" y="2092.8301">Web Socket</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="71" x="1788" y="2109.3184">[socket.io]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="100" x="1879.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="49" x="1905" y="54.0469">Worker</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="1886.5" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="100" x="1879.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="49" x="1905" y="2092.8301">Worker</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="1886.5" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="100" x="1989.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="46" x="2016.5" y="54.0469">Router</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="1996.5" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="100" x="1989.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="46" x="2016.5" y="2092.8301">Router</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="1996.5" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="143" x="2099.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="129" x="2106.5" y="54.0469">WebRTC Transport</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2128" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="143" x="2099.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="129" x="2106.5" y="2092.8301">WebRTC Transport</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2128" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="119" x="2252.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="105" x="2259.5" y="54.0469">Video Producer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2269" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="119" x="2252.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="105" x="2259.5" y="2092.8301">Video Producer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2269" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="121" x="2381.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="107" x="2388.5" y="54.0469">Audio Producer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2399" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="121" x="2381.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="107" x="2388.5" y="2092.8301">Audio Producer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2399" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="155" x="2512.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="141" x="2519.5" y="54.0469">Video RTP Transport</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2547" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="155" x="2512.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="141" x="2519.5" y="2092.8301">Video RTP Transport</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2547" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="128" x="2677.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="114" x="2684.5" y="54.0469">Video Consumer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2698.5" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="128" x="2677.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="114" x="2684.5" y="2092.8301">Video Consumer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2698.5" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="157" x="2815.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="143" x="2822.5" y="54.0469">Audio RTP Transport</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2851" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="157" x="2815.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="143" x="2822.5" y="2092.8301">Audio RTP Transport</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="2851" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="130" x="2982.5" y="33.5117"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="116" x="2989.5" y="54.0469">Audio Consumer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="3004.5" y="70.5352">[mediasoup]</text><rect fill="#E2E2F0" height="46.9766" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="130" x="2982.5" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="116" x="2989.5" y="2092.8301">Audio Consumer</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="86" x="3004.5" y="2109.3184">[mediasoup]</text><rect fill="#E2E2F0" height="30.4883" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="69" x="3175" y="50"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="55" x="3182" y="70.5352">FFmpeg</text><rect fill="#E2E2F0" height="30.4883" rx="2.5" ry="2.5" style="stroke:#181818;stroke-width:0.5;" width="69" x="3175" y="2072.2949"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="55" x="3182" y="2092.8301">FFmpeg</text><rect fill="#FFFFFF" height="1807.9434" style="stroke:#181818;stroke-width:1.0;" width="10" x="113" y="256.3516"/><rect fill="#FFFFFF" height="1778.6328" style="stroke:#181818;stroke-width:1.0;" width="10" x="242.5" y="285.6621"/><rect fill="#FFFFFF" height="1749.3223" style="stroke:#181818;stroke-width:1.0;" width="10" x="712.5" y="314.9727"/><rect fill="#FFFFFF" height="1507.8379" style="stroke:#181818;stroke-width:1.0;" width="10" x="818.5" y="556.457"/><rect fill="#FFFFFF" height="1244.043" style="stroke:#181818;stroke-width:1.0;" width="10" x="938.5" y="820.252"/><rect fill="#FFFFFF" height="1185.4219" style="stroke:#181818;stroke-width:1.0;" width="10" x="1068" y="878.873"/><rect fill="#FFFFFF" height="802.3848" style="stroke:#181818;stroke-width:1.0;" width="10" x="1198" y="1261.9102"/><rect fill="#FFFFFF" height="1972.8066" style="stroke:#181818;stroke-width:1.0;" width="10" x="1336.5" y="91.4883"/><rect fill="#FFFFFF" height="1927.1855" style="stroke:#181818;stroke-width:1.0;" width="10" x="1818.5" y="137.1094"/><rect fill="#FFFFFF" height="1897.875" style="stroke:#181818;stroke-width:1.0;" width="10" x="1924.5" y="166.4199"/><rect fill="#FFFFFF" height="1868.5645" style="stroke:#181818;stroke-width:1.0;" width="10" x="2034.5" y="195.7305"/><rect fill="#FFFFFF" height="1361.2852" style="stroke:#181818;stroke-width:1.0;" width="10" x="2166" y="703.0098"/><rect fill="#FFFFFF" height="861.0059" style="stroke:#181818;stroke-width:1.0;" width="10" x="2307" y="1203.2891"/><rect fill="#FFFFFF" height="626.5215" style="stroke:#181818;stroke-width:1.0;" width="10" x="2437" y="1437.7734"/><rect fill="#FFFFFF" height="509.2793" style="stroke:#181818;stroke-width:1.0;" width="10" x="2585" y="1555.0156"/><rect fill="#FFFFFF" height="450.6582" style="stroke:#181818;stroke-width:1.0;" width="10" x="2736.5" y="1613.6367"/><rect fill="#FFFFFF" height="421.3477" style="stroke:#181818;stroke-width:1.0;" width="10" x="2889" y="1642.9473"/><rect fill="#FFFFFF" height="362.7266" style="stroke:#181818;stroke-width:1.0;" width="10" x="3042.5" y="1701.5684"/><rect fill="#FFFFFF" height="333.416" style="stroke:#181818;stroke-width:1.0;" width="10" x="3204.5" y="1730.8789"/><path d="M1263.5,98.4883 L1424.5,98.4883 L1424.5,105.7988 L1414.5,115.7988 L1263.5,115.7988 L1263.5,98.4883 " fill="#EEEEEE" style="stroke:#000000;stroke-width:1.5;"/><rect fill="none" height="105.2422" style="stroke:#000000;stroke-width:1.5;" width="836" x="1263.5" y="98.4883"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="116" x="1278.5" y="112.0566">"Start the server"</text><polygon fill="#181818" points="1806.5,133.1094,1816.5,137.1094,1806.5,141.1094,1810.5,137.1094" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="1812.5" y1="137.1094" y2="137.1094"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="9" x="1353.5" y="132.3672">1</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="1366.5" y="132.3672">create</text><polygon fill="#181818" points="1912.5,162.4199,1922.5,166.4199,1912.5,170.4199,1916.5,166.4199" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="1918.5" y1="166.4199" y2="166.4199"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="9" x="1353.5" y="161.6777">2</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="1366.5" y="161.6777">create</text><polygon fill="#181818" points="2022.5,191.7305,2032.5,195.7305,2022.5,199.7305,2026.5,195.7305" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2028.5" y1="195.7305" y2="195.7305"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="9" x="1353.5" y="190.9883">3</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="89" x="1366.5" y="190.9883">create(worker)</text><path d="M10,217.7305 L199,217.7305 L199,225.041 L189,235.041 L10,235.041 L10,217.7305 " fill="#EEEEEE" style="stroke:#000000;stroke-width:1.5;"/><rect fill="none" height="134.5527" style="stroke:#000000;stroke-width:1.5;" width="1869.5" x="10" y="217.7305"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="144" x="25" y="231.2988">"User opens the app"</text><polygon fill="#181818" points="101,252.3516,111,256.3516,101,260.3516,105,256.3516" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="38.5" x2="107" y1="256.3516" y2="256.3516"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="9" x="45.5" y="251.6094">4</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="31" x="58.5" y="251.6094">open</text><polygon fill="#181818" points="230.5,281.6621,240.5,285.6621,230.5,289.6621,234.5,285.6621" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="123" x2="236.5" y1="285.6621" y2="285.6621"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="9" x="130" y="280.9199">5</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="27" x="143" y="280.9199">load</text><polygon fill="#181818" points="700.5,310.9727,710.5,314.9727,700.5,318.9727,704.5,314.9727" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="706.5" y1="314.9727" y2="314.9727"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="9" x="259.5" y="310.2305">6</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="272.5" y="310.2305">create</text><polygon fill="#181818" points="1806.5,340.2832,1816.5,344.2832,1806.5,348.2832,1810.5,344.2832" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="722.5" x2="1812.5" y1="344.2832" y2="344.2832"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="9" x="729.5" y="339.541">7</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="50" x="742.5" y="339.541">connect</text><polygon fill="#181818" points="1357.5,376.5938,1347.5,380.5938,1357.5,384.5938,1353.5,380.5938" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1351.5" x2="1817.5" y1="380.5938" y2="380.5938"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="9" x="1363.5" y="375.8516">8</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="152" x="1376.5" y="375.8516">on(&lt;&lt;event&gt;&gt; connect)</text><polygon fill="#181818" points="2022.5,405.9043,2032.5,409.9043,2022.5,413.9043,2026.5,409.9043" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2028.5" y1="409.9043" y2="409.9043"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="9" x="1353.5" y="405.1621">9</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="91" x="1366.5" y="405.1621">rtcCapabilities</text><polygon fill="#181818" points="1357.5,435.2148,1347.5,439.2148,1357.5,443.2148,1353.5,439.2148" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1351.5" x2="2033.5" y1="439.2148" y2="439.2148"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1363.5" y="434.4727">10</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="91" x="1385.5" y="434.4727">rtcCapabilities</text><polygon fill="#181818" points="1806.5,464.5254,1816.5,468.5254,1806.5,472.5254,1810.5,468.5254" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="1812.5" y1="468.5254" y2="468.5254"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="463.7832">11</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="247" x="1375.5" y="463.7832">emit(&lt;&lt;event&gt;&gt; routerRtpCapabilities)</text><polygon fill="#181818" points="733.5,493.8359,723.5,497.8359,733.5,501.8359,729.5,497.8359" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="727.5" x2="1817.5" y1="497.8359" y2="497.8359"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="739.5" y="493.0938">12</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="211" x="761.5" y="493.0938">&lt;&lt;event&gt;&gt; routerRtpCapabilities</text><polygon fill="#181818" points="263.5,523.1465,253.5,527.1465,263.5,531.1465,259.5,527.1465" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="257.5" x2="711.5" y1="527.1465" y2="527.1465"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="269.5" y="522.4043">13</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="235" x="291.5" y="522.4043">on(&lt;&lt;event&gt;&gt; routerRtpCapabilities)</text><polygon fill="#181818" points="806.5,552.457,816.5,556.457,806.5,560.457,810.5,556.457" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="812.5" y1="556.457" y2="556.457"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="551.7148">14</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="281.5" y="551.7148">create</text><polygon fill="#181818" points="806.5,581.7676,816.5,585.7676,806.5,589.7676,810.5,585.7676" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="812.5" y1="585.7676" y2="585.7676"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="581.0254">15</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="168" x="281.5" y="581.0254">load(routerRtpCapabilities)</text><polygon fill="#181818" points="700.5,611.0781,710.5,615.0781,700.5,619.0781,704.5,615.0781" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="706.5" y1="615.0781" y2="615.0781"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="610.3359">16</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="213" x="281.5" y="610.3359">emit(&lt;&lt;event&gt;&gt; createTransport)</text><polygon fill="#181818" points="1806.5,640.3887,1816.5,644.3887,1806.5,648.3887,1810.5,644.3887" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="722.5" x2="1812.5" y1="644.3887" y2="644.3887"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="729.5" y="639.6465">17</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="177" x="751.5" y="639.6465">&lt;&lt;event&gt;&gt; createTransport</text><polygon fill="#181818" points="1357.5,669.6992,1347.5,673.6992,1357.5,677.6992,1353.5,673.6992" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1351.5" x2="1817.5" y1="673.6992" y2="673.6992"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1363.5" y="668.957">18</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="201" x="1385.5" y="668.957">on(&lt;&lt;event&gt;&gt; createTransport)</text><polygon fill="#181818" points="2154,699.0098,2164,703.0098,2154,707.0098,2158,703.0098" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2160" y1="703.0098" y2="703.0098"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="698.2676">19</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="1375.5" y="698.2676">create</text><polygon fill="#181818" points="1806.5,728.3203,1816.5,732.3203,1806.5,736.3203,1810.5,732.3203" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="1812.5" y1="732.3203" y2="732.3203"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="727.5781">20</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="426" x="1375.5" y="727.5781">emit(&lt;&lt;event&gt;&gt; createSendTransport(webRtcTransportParameters))</text><polygon fill="#181818" points="733.5,757.6309,723.5,761.6309,733.5,765.6309,729.5,761.6309" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="727.5" x2="1817.5" y1="761.6309" y2="761.6309"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="739.5" y="756.8887">21</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="390" x="761.5" y="756.8887">&lt;&lt;event&gt;&gt; createSendTransport(webRtcTransportParameters)</text><polygon fill="#181818" points="263.5,786.9414,253.5,790.9414,263.5,794.9414,259.5,790.9414" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="257.5" x2="711.5" y1="790.9414" y2="790.9414"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="269.5" y="786.1992">22</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="414" x="291.5" y="786.1992">on(&lt;&lt;event&gt;&gt; createSendTransport(webRtcTransportParameters))</text><polygon fill="#181818" points="926.5,816.252,936.5,820.252,926.5,824.252,930.5,820.252" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="932.5" y1="820.252" y2="820.252"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="815.5098">23</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="221" x="281.5" y="815.5098">create(webRtcTransportParameters)</text><polygon fill="#181818" points="926.5,845.5625,936.5,849.5625,926.5,853.5625,930.5,849.5625" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="932.5" y1="849.5625" y2="849.5625"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="844.8203">24</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="184" x="281.5" y="844.8203">produce({ track: videoTrack })</text><polygon fill="#181818" points="1056,874.873,1066,878.873,1056,882.873,1060,878.873" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="948.5" x2="1062" y1="878.873" y2="878.873"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="955.5" y="874.1309">25</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="977.5" y="874.1309">create</text><polygon fill="#181818" points="263.5,904.1836,253.5,908.1836,263.5,912.1836,259.5,908.1836" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="257.5" x2="937.5" y1="908.1836" y2="908.1836"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="269.5" y="903.4414">26</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="319" x="291.5" y="903.4414">on(&lt;&lt;event&gt;&gt; produce(videoProducerParameters))</text><path d="M169,923.1836 L466,923.1836 L466,930.4941 L456,940.4941 L169,940.4941 L169,923.1836 " fill="#EEEEEE" style="stroke:#000000;stroke-width:1.5;"/><rect fill="none" height="134.5527" style="stroke:#000000;stroke-width:1.5;" width="2083.5" x="169" y="923.1836"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="252" x="184" y="936.752">"first call to transport.produce() only"</text><polygon fill="#181818" points="700.5,957.8047,710.5,961.8047,700.5,965.8047,704.5,961.8047" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="706.5" y1="961.8047" y2="961.8047"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="957.0625">27</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="404" x="281.5" y="957.0625">emit(&lt;&lt;event&gt;&gt; connectTransport(transportId, dtlsParameters))</text><polygon fill="#181818" points="1806.5,987.1152,1816.5,991.1152,1806.5,995.1152,1810.5,991.1152" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="722.5" x2="1812.5" y1="991.1152" y2="991.1152"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="729.5" y="986.373">28</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="368" x="751.5" y="986.373">&lt;&lt;event&gt;&gt; connectTransport(transportId, dtlsParameters)</text><polygon fill="#181818" points="1357.5,1016.4258,1347.5,1020.4258,1357.5,1024.4258,1353.5,1020.4258" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1351.5" x2="1817.5" y1="1020.4258" y2="1020.4258"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1363.5" y="1015.6836">29</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="392" x="1385.5" y="1015.6836">on(&lt;&lt;event&gt;&gt; connectTransport(transportId, dtlsParameters))</text><polygon fill="#181818" points="2154,1045.7363,2164,1049.7363,2154,1053.7363,2158,1049.7363" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2160" y1="1049.7363" y2="1049.7363"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1044.9941">30</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="151" x="1375.5" y="1044.9941">connect(dtlsParameters)</text><polygon fill="#181818" points="700.5,1082.0469,710.5,1086.0469,700.5,1090.0469,704.5,1086.0469" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="706.5" y1="1086.0469" y2="1086.0469"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="1081.3047">31</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="383" x="281.5" y="1081.3047">emit(&lt;&lt;event&gt;&gt; registerProducer(videoProducerParameters))</text><polygon fill="#181818" points="1806.5,1111.3574,1816.5,1115.3574,1806.5,1119.3574,1810.5,1115.3574" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="722.5" x2="1812.5" y1="1115.3574" y2="1115.3574"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="729.5" y="1110.6152">32</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="347" x="751.5" y="1110.6152">&lt;&lt;event&gt;&gt; registerProducer(videoProducerParameters)</text><polygon fill="#181818" points="1357.5,1140.668,1347.5,1144.668,1357.5,1148.668,1353.5,1144.668" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1351.5" x2="1817.5" y1="1144.668" y2="1144.668"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1363.5" y="1139.9258">33</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="347" x="1385.5" y="1139.9258">&lt;&lt;event&gt;&gt; registerProducer(videoProducerParameters)</text><polygon fill="#181818" points="2154,1169.9785,2164,1173.9785,2154,1177.9785,2158,1173.9785" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2160" y1="1173.9785" y2="1173.9785"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1169.2363">34</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="217" x="1375.5" y="1169.2363">produce(videoProducerParameters)</text><polygon fill="#181818" points="2295,1199.2891,2305,1203.2891,2295,1207.2891,2299,1203.2891" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="2176" x2="2301" y1="1203.2891" y2="1203.2891"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="2183" y="1198.5469">35</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="2205" y="1198.5469">create</text><polygon fill="#181818" points="926.5,1228.5996,936.5,1232.5996,926.5,1236.5996,930.5,1232.5996" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="932.5" y1="1232.5996" y2="1232.5996"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="1227.8574">36</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="185" x="281.5" y="1227.8574">produce({ track: audioTrack })</text><polygon fill="#181818" points="1186,1257.9102,1196,1261.9102,1186,1265.9102,1190,1261.9102" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="948.5" x2="1192" y1="1261.9102" y2="1261.9102"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="955.5" y="1257.168">37</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="977.5" y="1257.168">create</text><polygon fill="#181818" points="263.5,1287.2207,253.5,1291.2207,263.5,1295.2207,259.5,1291.2207" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="257.5" x2="937.5" y1="1291.2207" y2="1291.2207"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="269.5" y="1286.4785">38</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="320" x="291.5" y="1286.4785">on(&lt;&lt;event&gt;&gt; produce(audioProducerParameters))</text><polygon fill="#181818" points="700.5,1316.5313,710.5,1320.5313,700.5,1324.5313,704.5,1320.5313" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="706.5" y1="1320.5313" y2="1320.5313"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="1315.7891">39</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="384" x="281.5" y="1315.7891">emit(&lt;&lt;event&gt;&gt; registerProducer(audioProducerParameters))</text><polygon fill="#181818" points="1806.5,1345.8418,1816.5,1349.8418,1806.5,1353.8418,1810.5,1349.8418" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="722.5" x2="1812.5" y1="1349.8418" y2="1349.8418"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="729.5" y="1345.0996">40</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="348" x="751.5" y="1345.0996">&lt;&lt;event&gt;&gt; registerProducer(audioProducerParameters)</text><polygon fill="#181818" points="1357.5,1375.1523,1347.5,1379.1523,1357.5,1383.1523,1353.5,1379.1523" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1351.5" x2="1817.5" y1="1379.1523" y2="1379.1523"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1363.5" y="1374.4102">41</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="348" x="1385.5" y="1374.4102">&lt;&lt;event&gt;&gt; registerProducer(audioProducerParameters)</text><polygon fill="#181818" points="2154,1404.4629,2164,1408.4629,2154,1412.4629,2158,1408.4629" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2160" y1="1408.4629" y2="1408.4629"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1403.7207">42</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="218" x="1375.5" y="1403.7207">produce(audioProducerParameters)</text><polygon fill="#181818" points="2425,1433.7734,2435,1437.7734,2425,1441.7734,2429,1437.7734" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="2176" x2="2431" y1="1437.7734" y2="1437.7734"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="2183" y="1433.0313">43</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="2205" y="1433.0313">create</text><polygon fill="#181818" points="700.5,1463.084,710.5,1467.084,700.5,1471.084,704.5,1467.084" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="706.5" y1="1467.084" y2="1467.084"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="1462.3418">44</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="206" x="281.5" y="1462.3418">emit(&lt;&lt;event&gt;&gt; startRecording)</text><polygon fill="#181818" points="1806.5,1492.3945,1816.5,1496.3945,1806.5,1500.3945,1810.5,1496.3945" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="722.5" x2="1812.5" y1="1496.3945" y2="1496.3945"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="729.5" y="1491.6523">45</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="170" x="751.5" y="1491.6523">&lt;&lt;event&gt;&gt; startRecording</text><polygon fill="#181818" points="1357.5,1521.7051,1347.5,1525.7051,1357.5,1529.7051,1353.5,1525.7051" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1351.5" x2="1817.5" y1="1525.7051" y2="1525.7051"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1363.5" y="1520.9629">46</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="194" x="1385.5" y="1520.9629">on(&lt;&lt;event&gt;&gt; startRecording)</text><polygon fill="#181818" points="2573,1551.0156,2583,1555.0156,2573,1559.0156,2577,1555.0156" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2579" y1="1555.0156" y2="1555.0156"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1550.2734">47</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="1375.5" y="1550.2734">create</text><polygon fill="#181818" points="2573,1580.3262,2583,1584.3262,2573,1588.3262,2577,1584.3262" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2579" y1="1584.3262" y2="1584.3262"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1579.584">48</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="199" x="1375.5" y="1579.584">consume(videoProducerParams)</text><polygon fill="#181818" points="2724.5,1609.6367,2734.5,1613.6367,2724.5,1617.6367,2728.5,1613.6367" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="2595" x2="2730.5" y1="1613.6367" y2="1613.6367"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="2602" y="1608.8945">49</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="2624" y="1608.8945">create</text><polygon fill="#181818" points="2877,1638.9473,2887,1642.9473,2877,1646.9473,2881,1642.9473" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2883" y1="1642.9473" y2="1642.9473"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1638.2051">50</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="1375.5" y="1638.2051">create</text><polygon fill="#181818" points="2877,1668.2578,2887,1672.2578,2877,1676.2578,2881,1672.2578" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2883" y1="1672.2578" y2="1672.2578"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1667.5156">51</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="200" x="1375.5" y="1667.5156">consume(audioProducerParams)</text><polygon fill="#181818" points="3030.5,1697.5684,3040.5,1701.5684,3030.5,1705.5684,3034.5,1701.5684" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="2899" x2="3036.5" y1="1701.5684" y2="1701.5684"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="2906" y="1696.8262">52</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="38" x="2928" y="1696.8262">create</text><polygon fill="#181818" points="3192.5,1726.8789,3202.5,1730.8789,3192.5,1734.8789,3196.5,1730.8789" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="3198.5" y1="1730.8789" y2="1730.8789"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1726.1367">53</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="29" x="1375.5" y="1726.1367">start</text><polygon fill="#181818" points="2724.5,1756.1895,2734.5,1760.1895,2724.5,1764.1895,2728.5,1760.1895" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2730.5" y1="1760.1895" y2="1760.1895"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1755.4473">54</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="46" x="1375.5" y="1755.4473">resume</text><polygon fill="#181818" points="2724.5,1785.5,2734.5,1789.5,2724.5,1793.5,2728.5,1789.5" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="2730.5" y1="1789.5" y2="1789.5"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1784.7578">55</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="107" x="1375.5" y="1784.7578">requestKeyFrame</text><polygon fill="#181818" points="3030.5,1814.8105,3040.5,1818.8105,3030.5,1822.8105,3034.5,1818.8105" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="3036.5" y1="1818.8105" y2="1818.8105"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1814.0684">56</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="46" x="1375.5" y="1814.0684">resume</text><polygon fill="#181818" points="3030.5,1844.1211,3040.5,1848.1211,3030.5,1852.1211,3034.5,1848.1211" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="3036.5" y1="1848.1211" y2="1848.1211"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="1843.3789">57</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="107" x="1375.5" y="1843.3789">requestKeyFrame</text><path d="M2667.5,1863.1211 L2735.5,1863.1211 L2735.5,1870.4316 L2725.5,1880.4316 L2667.5,1880.4316 L2667.5,1863.1211 " fill="#EEEEEE" style="stroke:#000000;stroke-width:1.5;"/><rect fill="none" height="75.9316" style="stroke:#000000;stroke-width:1.5;" width="586.5" x="2667.5" y="1863.1211"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="23" x="2682.5" y="1876.6895">par</text><text fill="#000000" font-family="sans-serif" font-size="11" font-weight="bold" lengthAdjust="spacing" textLength="235" x="2750.5" y="1875.7559">["piping video and audio data to ffmpeg"]</text><polygon fill="#181818" points="3192.5,1897.7422,3202.5,1901.7422,3192.5,1905.7422,3196.5,1901.7422" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="2746.5" x2="3198.5" y1="1901.7422" y2="1901.7422"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="2753.5" y="1897">58</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="105" x="2775.5" y="1897">&lt;&lt;video data&gt;&gt;</text><polygon fill="#181818" points="3192.5,1927.0527,3202.5,1931.0527,3192.5,1935.0527,3196.5,1931.0527" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="3052.5" x2="3198.5" y1="1931.0527" y2="1931.0527"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="3059.5" y="1926.3105">59</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="106" x="3081.5" y="1926.3105">&lt;&lt;audio data&gt;&gt;</text><polygon fill="#181818" points="700.5,1963.3633,710.5,1967.3633,700.5,1971.3633,704.5,1967.3633" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="252.5" x2="706.5" y1="1967.3633" y2="1967.3633"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="259.5" y="1962.6211">60</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="205" x="281.5" y="1962.6211">emit(&lt;&lt;event&gt;&gt; stopRecording)</text><polygon fill="#181818" points="1806.5,1992.6738,1816.5,1996.6738,1806.5,2000.6738,1810.5,1996.6738" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="722.5" x2="1812.5" y1="1996.6738" y2="1996.6738"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="729.5" y="1991.9316">61</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="169" x="751.5" y="1991.9316">&lt;&lt;event&gt;&gt; stopRecording</text><polygon fill="#181818" points="1357.5,2021.9844,1347.5,2025.9844,1357.5,2029.9844,1353.5,2025.9844" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1351.5" x2="1817.5" y1="2025.9844" y2="2025.9844"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1363.5" y="2021.2422">62</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="193" x="1385.5" y="2021.2422">on(&lt;&lt;event&gt;&gt; stopRecording)</text><polygon fill="#181818" points="3192.5,2051.2949,3202.5,2055.2949,3192.5,2059.2949,3196.5,2055.2949" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="1346.5" x2="3198.5" y1="2055.2949" y2="2055.2949"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="18" x="1353.5" y="2050.5527">63</text><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="20" x="1375.5" y="2050.5527">kill</text><!--MD5=[c112ba9833faa6667430d84550120065]
@startuml

autonumber

actor User as user

box "Client" #LightYellow
  participant "Web Browser" as browser
  participant "Client App\n[html5, javascript]" as app
  participant "Web Socket\n[socket.io]" as cws
  participant "Device\n[mediasoup]" as device
  participant "Send Transport\n[mediasoup]" as sendTransport
  participant "Video Producer\n[mediasoup]" as clientVideoProducer
  participant "Audio Producer\n[mediasoup]" as clientAudioProducer
end box

box "Server" #LightBlue
  participant "Server App\n[node.js, express]" as serverApp
  participant "Web Socket\n[socket.io]" as sws
  participant "Worker\n[mediasoup]" as worker
  participant "Router\n[mediasoup]" as router
  participant "WebRTC Transport\n[mediasoup]" as webRtcTransport
  participant "Video Producer\n[mediasoup]" as serverVideoProducer
  participant "Audio Producer\n[mediasoup]" as serverAudioProducer
  participant "Video RTP Transport\n[mediasoup]" as videoRtpTransport
  participant "Video Consumer\n[mediasoup]" as serverVideoConsumer
  participant "Audio RTP Transport\n[mediasoup]" as audioRtpTransport
  participant "Audio Consumer\n[mediasoup]" as serverAudioConsumer
  participant "FFmpeg" as ffmpeg
end box

activate serverApp

group "Start the server"
  serverApp -> sws : create
  activate sws

  serverApp -> worker : create
  activate worker

  serverApp -> router : create(worker)
  activate router
end

group "User opens the app"
  user -> browser : open
  activate browser

  browser -> app : load
  activate app

  app -> cws : create
  activate cws

  cws -> sws : connect
end

sws -> serverApp : on(<<event>> connect)
serverApp -> router : rtcCapabilities
router -> serverApp : rtcCapabilities
serverApp -> sws : emit(<<event>> routerRtpCapabilities)
sws -> cws : <<event>> routerRtpCapabilities
cws -> app : on(<<event>> routerRtpCapabilities)
app -> device : create
activate device

app -> device : load(routerRtpCapabilities)
app -> cws : emit(<<event>> createTransport)
cws -> sws : <<event>> createTransport
sws -> serverApp : on(<<event>> createTransport)
serverApp -> webRtcTransport : create
activate webRtcTransport

serverApp -> sws : emit(<<event>> createSendTransport(webRtcTransportParameters))
sws -> cws : <<event>> createSendTransport(webRtcTransportParameters)
cws -> app : on(<<event>> createSendTransport(webRtcTransportParameters))
app -> sendTransport : create(webRtcTransportParameters)
activate sendTransport

app -> sendTransport : produce({ track: videoTrack })
sendTransport -> clientVideoProducer : create
activate clientVideoProducer

sendTransport -> app : on(<<event>> produce(videoProducerParameters))

group "first call to transport.produce() only"
  app -> cws : emit(<<event>> connectTransport(transportId, dtlsParameters))
  cws -> sws : <<event>> connectTransport(transportId, dtlsParameters)
  sws -> serverApp : on(<<event>> connectTransport(transportId, dtlsParameters))
  serverApp -> webRtcTransport : connect(dtlsParameters)
end
app -> cws : emit(<<event>> registerProducer(videoProducerParameters))
cws -> sws : <<event>> registerProducer(videoProducerParameters)
sws -> serverApp : <<event>> registerProducer(videoProducerParameters)
serverApp -> webRtcTransport : produce(videoProducerParameters)
webRtcTransport -> serverVideoProducer : create
activate serverVideoProducer

app -> sendTransport : produce({ track: audioTrack })
sendTransport -> clientAudioProducer : create
activate clientAudioProducer

sendTransport -> app : on(<<event>> produce(audioProducerParameters))
app -> cws : emit(<<event>> registerProducer(audioProducerParameters))
cws -> sws : <<event>> registerProducer(audioProducerParameters)
sws -> serverApp : <<event>> registerProducer(audioProducerParameters)
serverApp -> webRtcTransport : produce(audioProducerParameters)
webRtcTransport -> serverAudioProducer : create
activate serverAudioProducer

app -> cws : emit(<<event>> startRecording)
cws -> sws : <<event>> startRecording
sws -> serverApp : on(<<event>> startRecording)
serverApp -> videoRtpTransport : create
activate videoRtpTransport
serverApp -> videoRtpTransport : consume(videoProducerParams)
videoRtpTransport -> serverVideoConsumer : create
activate serverVideoConsumer

serverApp -> audioRtpTransport : create
activate audioRtpTransport
serverApp -> audioRtpTransport : consume(audioProducerParams)
audioRtpTransport -> serverAudioConsumer : create
activate serverAudioConsumer

serverApp -> ffmpeg : start
activate ffmpeg

serverApp -> serverVideoConsumer : resume
serverApp -> serverVideoConsumer : requestKeyFrame
serverApp -> serverAudioConsumer : resume
serverApp -> serverAudioConsumer : requestKeyFrame

par "piping video and audio data to ffmpeg"
  serverVideoConsumer -> ffmpeg : <<video data>>
  serverAudioConsumer -> ffmpeg : <<audio data>>
end

app -> cws : emit(<<event>> stopRecording)
cws -> sws : <<event>> stopRecording
sws -> serverApp : on(<<event>> stopRecording)
serverApp -> ffmpeg : kill

@enduml

PlantUML version 1.2022.7(Mon Aug 22 19:01:30 CEST 2022)
(GPL source distribution)
Java Runtime: OpenJDK Runtime Environment
JVM: OpenJDK 64-Bit Server VM
Default Encoding: UTF-8
Language: en
Country: CA
--></g></svg>