VTubing on Linux

Signed-off-by: Xe <me@christine.website>

2 files changed, 150 insertions, 0 deletions

diff --git a/static/blog/vtubing-linux/nixos.svg b/static/blog/vtubing-linux/nixos.svg
new file mode 100644
index 0000000..67d217a
--- /dev/null
+++ b/static/blog/vtubing-linux/nixos.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+ <!-- Generated by graphviz version 2.40.1 (20161225.0304)
+  -->
+  <!-- Title: G Pages: 1 -->
+  <svg width="316pt" height="318pt"
+   viewBox="0.00 0.00 316.17 317.60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+   <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 313.6)">
+   <title>G</title>
+   <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-313.6 312.174,-313.6 312.174,4 -4,4"/>
+   <g id="clust1" class="cluster">
+   <title>cluster_1</title>
+   <polygon fill="#d3d3d3" stroke="#d3d3d3" points="8,-8 8,-230.8 230,-230.8 230,-8 8,-8"/>
+   <text text-anchor="middle" x="119" y="-214.2" font-family="Times,serif" font-size="14.00" fill="#000000">NixOS</text>
+   </g>
+   <!-- webcam -->
+   <g id="node1" class="node">
+   <title>webcam</title>
+   <ellipse fill="none" stroke="#000000" cx="80" cy="-291.6" rx="43.4183" ry="18"/>
+   <text text-anchor="middle" x="80" y="-287.4" font-family="Times,serif" font-size="14.00" fill="#000000">webcam</text>
+   </g>
+   <!-- losf -->
+   <g id="node3" class="node">
+   <title>losf</title>
+   <ellipse fill="#ffffff" stroke="#ffffff" cx="80" cy="-180" rx="64.2436" ry="18"/>
+   <text text-anchor="middle" x="80" y="-175.8" font-family="Times,serif" font-size="14.00" fill="#000000">OpenSeeFace</text>
+   </g>
+   <!-- webcam&#45;&gt;losf -->
+   <g id="edge1" class="edge">
+   <title>webcam&#45;&gt;losf</title>
+   <path fill="none" stroke="#000000" d="M80,-273.1715C80,-255.539 80,-228.6924 80,-208.3391"/>
+   <polygon fill="#000000" stroke="#000000" points="83.5001,-208.0855 80,-198.0856 76.5001,-208.0856 83.5001,-208.0855"/>
+   <text text-anchor="middle" x="93.6129" y="-243" font-family="Times,serif" font-size="14.00" fill="#000000">USB</text>
+   </g>
+   <!-- twitch -->
+   <g id="node2" class="node">
+   <title>twitch</title>
+   <ellipse fill="none" stroke="#000000" cx="273" cy="-107" rx="35.3489" ry="18"/>
+   <text text-anchor="middle" x="273" y="-102.8" font-family="Times,serif" font-size="14.00" fill="#000000">twitch</text>
+   </g>
+   <!-- lvsf -->
+   <g id="node4" class="node">
+   <title>lvsf</title>
+   <ellipse fill="#ffffff" stroke="#ffffff" cx="114" cy="-34" rx="50.3567" ry="18"/>
+   <text text-anchor="middle" x="114" y="-29.8" font-family="Times,serif" font-size="14.00" fill="#000000">VSeeFace</text>
+   </g>
+   <!-- losf&#45;&gt;lvsf -->
+   <g id="edge2" class="edge">
+   <title>losf&#45;&gt;lvsf</title>
+   <path fill="none" stroke="#000000" d="M82.7781,-161.739C85.736,-143.2703 90.8362,-113.9646 97.0042,-89 99.2096,-80.0738 102.0249,-70.4601 104.7268,-61.8057"/>
+   <polygon fill="#000000" stroke="#000000" points="108.0909,-62.7767 107.8034,-52.1857 101.4236,-60.6444 108.0909,-62.7767"/>
+   <text text-anchor="middle" x="110.9979" y="-102.8" font-family="Times,serif" font-size="14.00" fill="#000000">UDP</text>
+   </g>
+   <!-- lobs -->
+   <g id="node5" class="node">
+   <title>lobs</title>
+   <ellipse fill="#ffffff" stroke="#ffffff" cx="192" cy="-180" rx="29.6339" ry="18"/>
+   <text text-anchor="middle" x="192" y="-175.8" font-family="Times,serif" font-size="14.00" fill="#000000">OBS</text>
+   </g>
+   <!-- lobs&#45;&gt;twitch -->
+   <g id="edge4" class="edge">
+   <title>lobs&#45;&gt;twitch</title>
+   <path fill="none" stroke="#000000" d="M208.7833,-164.8744C220.0653,-154.7066 235.1385,-141.1221 247.8461,-129.6695"/>
+   <polygon fill="#000000" stroke="#000000" points="250.3124,-132.1585 255.3977,-122.8638 245.6261,-126.9586 250.3124,-132.1585"/>
+   </g>
+   <!-- lobs&#45;&gt;lvsf -->
+   <g id="edge3" class="edge">
+   <title>lobs&#45;&gt;lvsf</title>
+   <path fill="none" stroke="#000000" d="M180.9095,-162.9172C174.0943,-152.1868 165.337,-137.9693 158.2258,-125 146.7004,-103.9802 134.8947,-79.5101 126.383,-61.2421"/>
+   <polygon fill="#000000" stroke="#000000" points="129.5067,-59.658 122.1336,-52.0495 123.1527,-62.5952 129.5067,-59.658"/>
+   <text text-anchor="middle" x="193.3871" y="-102.8" font-family="Times,serif" font-size="14.00" fill="#000000">XComposite</text>
+   </g>
+   </g>
+   </svg>
diff --git a/static/blog/vtubing-linux/windows.svg b/static/blog/vtubing-linux/windows.svg
new file mode 100644
index 0000000..b6e110a
--- /dev/null
+++ b/static/blog/vtubing-linux/windows.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+ <!-- Generated by graphviz version 2.40.1 (20161225.0304)
+  -->
+  <!-- Title: G Pages: 1 -->
+  <svg width="288pt" height="340pt"
+   viewBox="0.00 0.00 288.17 340.43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+   <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 336.4313)">
+   <title>G</title>
+   <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-336.4313 284.174,-336.4313 284.174,4 -4,4"/>
+   <g id="clust1" class="cluster">
+   <title>cluster_0</title>
+   <polygon fill="#d3d3d3" stroke="#d3d3d3" points="8,-8 8,-253.6313 202,-253.6313 202,-8 8,-8"/>
+   <text text-anchor="middle" x="105" y="-237.0313" font-family="Times,serif" font-size="14.00" fill="#000000">windows</text>
+   </g>
+   <!-- webcam -->
+   <g id="node1" class="node">
+   <title>webcam</title>
+   <ellipse fill="none" stroke="#000000" cx="66" cy="-314.4313" rx="43.4183" ry="18"/>
+   <text text-anchor="middle" x="66" y="-310.2313" font-family="Times,serif" font-size="14.00" fill="#000000">webcam</text>
+   </g>
+   <!-- wvsf -->
+   <g id="node3" class="node">
+   <title>wvsf</title>
+   <ellipse fill="#ffffff" stroke="#ffffff" cx="66" cy="-202.8313" rx="50.3567" ry="18"/>
+   <text text-anchor="middle" x="66" y="-198.6313" font-family="Times,serif" font-size="14.00" fill="#000000">VSeeFace</text>
+   </g>
+   <!-- webcam&#45;&gt;wvsf -->
+   <g id="edge1" class="edge">
+   <title>webcam&#45;&gt;wvsf</title>
+   <path fill="none" stroke="#000000" d="M66,-296.0028C66,-278.3703 66,-251.5237 66,-231.1704"/>
+   <polygon fill="#000000" stroke="#000000" points="69.5001,-230.9168 66,-220.9168 62.5001,-230.9169 69.5001,-230.9168"/>
+   <text text-anchor="middle" x="79.6129" y="-265.8313" font-family="Times,serif" font-size="14.00" fill="#000000">USB</text>
+   </g>
+   <!-- twitch -->
+   <g id="node2" class="node">
+   <title>twitch</title>
+   <ellipse fill="none" stroke="#000000" cx="245" cy="-129.8313" rx="35.3489" ry="18"/>
+   <text text-anchor="middle" x="245" y="-125.6313" font-family="Times,serif" font-size="14.00" fill="#000000">twitch</text>
+   </g>
+   <!-- wcd -->
+   <g id="node4" class="node">
+   <title>wcd</title>
+   <ellipse fill="#ffffff" stroke="#ffffff" cx="104" cy="-45.4156" rx="46.4831" ry="29.3315"/>
+   <text text-anchor="middle" x="104" y="-49.6156" font-family="Times,serif" font-size="14.00" fill="#000000">Webcam</text>
+   <text text-anchor="middle" x="104" y="-32.8156" font-family="Times,serif" font-size="14.00" fill="#000000">Driver</text>
+   </g>
+   <!-- wvsf&#45;&gt;wcd -->
+   <g id="edge2" class="edge">
+   <title>wvsf&#45;&gt;wcd</title>
+   <path fill="none" stroke="#000000" d="M70.3591,-184.7737C76.2169,-160.5076 86.7858,-116.7257 94.5186,-84.6925"/>
+   <polygon fill="#000000" stroke="#000000" points="97.9756,-85.2867 96.92,-74.7446 91.1711,-83.644 97.9756,-85.2867"/>
+   </g>
+   <!-- wobs -->
+   <g id="node5" class="node">
+   <title>wobs</title>
+   <ellipse fill="#ffffff" stroke="#ffffff" cx="164" cy="-202.8313" rx="29.6339" ry="18"/>
+   <text text-anchor="middle" x="164" y="-198.6313" font-family="Times,serif" font-size="14.00" fill="#000000">OBS</text>
+   </g>
+   <!-- wobs&#45;&gt;twitch -->
+   <g id="edge4" class="edge">
+   <title>wobs&#45;&gt;twitch</title>
+   <path fill="none" stroke="#000000" d="M180.7833,-187.7056C192.0653,-177.5379 207.1385,-163.9534 219.8461,-152.5008"/>
+   <polygon fill="#000000" stroke="#000000" points="222.3124,-154.9898 227.3977,-145.6951 217.6261,-149.7899 222.3124,-154.9898"/>
+   </g>
+   <!-- wobs&#45;&gt;wcd -->
+   <g id="edge3" class="edge">
+   <title>wobs&#45;&gt;wcd</title>
+   <path fill="none" stroke="#000000" d="M157.2339,-185.0797C147.9295,-160.6688 130.9424,-116.1015 118.655,-83.8645"/>
+   <polygon fill="#000000" stroke="#000000" points="121.8385,-82.3893 115.0063,-74.2917 115.2975,-84.8825 121.8385,-82.3893"/>
+   <text text-anchor="middle" x="166.8745" y="-125.6313" font-family="Times,serif" font-size="14.00" fill="#000000">Webcam</text>
+   </g>
+   </g>
+   </svg>