added picture to TURN changing FAQ

nils-ohlmeier · nils-ohlmeier · commit b2da9fce550f · 2024-10-23T16:29:15.000-06:00
diff --git a/src/assets/images/calls/turn-charging.svg b/src/assets/images/calls/turn-charging.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than draw.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="801px" height="201px" viewBox="-0.5 -0.5 801 201" content="&lt;mxfile host=&quot;app.diagrams.net&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36&quot; version=&quot;24.8.1&quot;&gt;&#10;  &lt;diagram name=&quot;Page-1&quot; id=&quot;nYxSB5C8MNt7-xBfXNCO&quot;&gt;&#10;    &lt;mxGraphModel dx=&quot;1472&quot; dy=&quot;1078&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;850&quot; pageHeight=&quot;1100&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#10;      &lt;root&gt;&#10;        &lt;mxCell id=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;PbpFGRUqSjoCc4dJDjsP-1&quot; value=&quot;TURN&amp;lt;br style=&amp;quot;font-size: 18px;&amp;quot;&amp;gt;Server&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;fontSize=18;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;380&quot; y=&quot;150&quot; width=&quot;190&quot; height=&quot;160&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;PbpFGRUqSjoCc4dJDjsP-2&quot; value=&quot;TURN&amp;lt;br style=&amp;quot;font-size: 18px;&amp;quot;&amp;gt;Client&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;fontSize=18;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;50&quot; y=&quot;150&quot; width=&quot;140&quot; height=&quot;160&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;PbpFGRUqSjoCc4dJDjsP-4&quot; value=&quot;&quot; style=&quot;shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;rotation=90;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;230&quot; y=&quot;105&quot; width=&quot;130&quot; height=&quot;250&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;PbpFGRUqSjoCc4dJDjsP-5&quot; value=&quot;Egress&amp;lt;br style=&amp;quot;font-size: 18px;&amp;quot;&amp;gt;charged&quot; style=&quot;endArrow=classic;html=1;rounded=0;entryX=0.769;entryY=0.92;entryDx=0;entryDy=0;entryPerimeter=0;exitX=0.769;exitY=0.16;exitDx=0;exitDy=0;exitPerimeter=0;fontSize=18;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;PbpFGRUqSjoCc4dJDjsP-4&quot; target=&quot;PbpFGRUqSjoCc4dJDjsP-4&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;400&quot; y=&quot;450&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;450&quot; y=&quot;400&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;PbpFGRUqSjoCc4dJDjsP-6&quot; value=&quot;TURN&amp;lt;br style=&amp;quot;font-size: 18px;&amp;quot;&amp;gt;connection&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;230&quot; y=&quot;110&quot; width=&quot;110&quot; height=&quot;60&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;PbpFGRUqSjoCc4dJDjsP-9&quot; value=&quot;Ingress&amp;lt;br style=&amp;quot;font-size: 18px;&amp;quot;&amp;gt;free&quot; style=&quot;endArrow=classic;html=1;rounded=0;fontSize=18;&quot; edge=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;185&quot; y=&quot;210&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;385&quot; y=&quot;210&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;PbpFGRUqSjoCc4dJDjsP-10&quot; value=&quot;Peer A&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;fontSize=18;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;730&quot; y=&quot;180&quot; width=&quot;120&quot; height=&quot;100&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;PbpFGRUqSjoCc4dJDjsP-11&quot; value=&quot;Free&quot; style=&quot;shape=flexArrow;endArrow=classic;startArrow=classic;html=1;rounded=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;fontSize=18;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;PbpFGRUqSjoCc4dJDjsP-1&quot; target=&quot;PbpFGRUqSjoCc4dJDjsP-10&quot;&gt;&#10;          &lt;mxGeometry width=&quot;100&quot; height=&quot;100&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;590&quot; y=&quot;480&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;690&quot; y=&quot;380&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;      &lt;/root&gt;&#10;    &lt;/mxGraphModel&gt;&#10;  &lt;/diagram&gt;&#10;&lt;/mxfile&gt;&#10;"><defs/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="PbpFGRUqSjoCc4dJDjsP-1"><g><rect x="330" y="40" width="190" height="160" rx="24" ry="24" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 120px; margin-left: 331px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 18px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TURN<br style="font-size: 18px;" />Server</div></div></div></foreignObject><text x="425" y="125" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="18px" text-anchor="middle">TURN...</text></switch></g></g></g><g data-cell-id="PbpFGRUqSjoCc4dJDjsP-2"><g><rect x="0" y="40" width="140" height="160" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 120px; margin-left: 1px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 18px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TURN<br style="font-size: 18px;" />Client</div></div></div></foreignObject><text x="70" y="125" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="18px" text-anchor="middle">TURN...</text></switch></g></g></g><g data-cell-id="PbpFGRUqSjoCc4dJDjsP-4"><g><path d="M 180 10 C 180 1.72 209.1 -5 245 -5 C 262.24 -5 278.77 -3.42 290.96 -0.61 C 303.15 2.21 310 6.02 310 10 L 310 230 C 310 238.28 280.9 245 245 245 C 209.1 245 180 238.28 180 230 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" transform="rotate(90,245,120)" pointer-events="all"/><path d="M 310 10 C 310 18.28 280.9 25 245 25 C 209.1 25 180 18.28 180 10" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" transform="rotate(90,245,120)" pointer-events="all"/></g></g><g data-cell-id="PbpFGRUqSjoCc4dJDjsP-5"><g><path d="M 330 154.97 L 146.37 154.97" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 141.12 154.97 L 148.12 151.47 L 146.37 154.97 L 148.12 158.47 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 155px; margin-left: 235px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 18px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Egress<br style="font-size: 18px;" />charged</div></div></div></foreignObject><text x="235" y="160" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="18px" text-anchor="middle">Egress...</text></switch></g></g></g><g data-cell-id="PbpFGRUqSjoCc4dJDjsP-6"><g><rect x="180" y="0" width="110" height="60" fill="none" stroke="none" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 30px; margin-left: 181px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 18px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TURN<br style="font-size: 18px;" />connection</div></div></div></foreignObject><text x="235" y="35" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="18px" text-anchor="middle">TURN...</text></switch></g></g></g><g data-cell-id="PbpFGRUqSjoCc4dJDjsP-9"><g><path d="M 135 100 L 328.63 100" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 333.88 100 L 326.88 103.5 L 328.63 100 L 326.88 96.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 100px; margin-left: 235px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 18px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Ingress<br style="font-size: 18px;" />free</div></div></div></foreignObject><text x="235" y="105" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="18px" text-anchor="middle">Ingres...</text></switch></g></g></g><g data-cell-id="PbpFGRUqSjoCc4dJDjsP-10"><g><rect x="680" y="70" width="120" height="100" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 120px; margin-left: 681px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 18px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Peer A</div></div></div></foreignObject><text x="740" y="125" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="18px" text-anchor="middle">Peer A</text></switch></g></g></g><g data-cell-id="PbpFGRUqSjoCc4dJDjsP-11"><g><path d="M 539.5 125 L 539.5 135.5 L 520.5 120 L 539.5 104.5 L 539.5 115 L 660.5 115 L 660.5 104.5 L 679.5 120 L 660.5 135.5 L 660.5 125 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 120px; margin-left: 600px;"><div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 18px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Free</div></div></div></foreignObject><text x="600" y="125" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="18px" text-anchor="middle">Free</text></switch></g></g></g></g></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
diff --git a/src/content/docs/calls/turn/faq.mdx b/src/content/docs/calls/turn/faq.mdx
@@ -21,6 +21,11 @@ There is a free tier of 1,000 GB before any charges start. This free tier includ
 
 Traffic between Cloudflare Calls TURN and Cloudflare Calls SFU or Cloudflare Stream (WHIP/WHEP) does not incur any charges.
 
+<div class="full-img">
+
+![TURN charging illustration](~/assets/images/calls/turn-charging.svg)
+
+</div>
 
 
 ### Is Calls TURN HIPAA/GDPR/FedRAMP compliant?
