53 lines
17 KiB
HTML
53 lines
17 KiB
HTML
<!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>tap-sdk-js</title><meta name="description" content="Documentation for tap-sdk-js"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">tap-sdk-js</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>tap-sdk-js</h1></div><div class="tsd-panel tsd-typography"><p><img src="https://capsule-render.vercel.app/api?type=waving&height=300&color=gradient&text=Zako%20TapSDK.js&textBg=false" alt="Logo"></p>
|
|
<h1 id="zako-tap-sdk-js" class="tsd-anchor-link">Zako Tap SDK js<a href="#zako-tap-sdk-js" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><p>This is the javascript sdk package required to create a javascript tap server responsible for the audio of <code>zako</code>, a discord audio bot.</p>
|
|
<h2 id="quickstart-example" class="tsd-anchor-link">Quickstart Example<a href="#quickstart-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>First, you need to download <code>tap-sdk-js</code> on your project.</p>
|
|
<pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">tap-sdk-js</span>
|
|
</code><button type="button">Copy</button></pre>
|
|
|
|
<p>Then, you can use the sdk.
|
|
Here is some example.</p>
|
|
<pre><code class="js"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">createClient</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"tap-sdk-js"</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">client</span><span class="hl-1"> = </span><span class="hl-0">createClient</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-4">name:</span><span class="hl-1"> </span><span class="hl-2">"your zako tap server name"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">token:</span><span class="hl-1"> </span><span class="hl-2">"your zako tap server token"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">zakoEndpoint:</span><span class="hl-1"> </span><span class="hl-2">"zako endpoint (default is https://api.zako.ac)"</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">client</span><span class="hl-1">.</span><span class="hl-4">events</span><span class="hl-1">.</span><span class="hl-0">on</span><span class="hl-1">(</span><span class="hl-2">"ready"</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-2">"ready"</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">client</span><span class="hl-1">.</span><span class="hl-4">events</span><span class="hl-1">.</span><span class="hl-0">on</span><span class="hl-1">(</span><span class="hl-2">"request"</span><span class="hl-1">, (</span><span class="hl-4">handle</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">const</span><span class="hl-1"> { </span><span class="hl-6">data</span><span class="hl-1">, </span><span class="hl-6">parameters</span><span class="hl-1"> } = </span><span class="hl-4">handle</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">// data is the actual data to handle.</span><br/><br/><span class="hl-1"> </span><span class="hl-7">// to respond the stream</span><br/><span class="hl-1"> </span><span class="hl-4">handle</span><span class="hl-1">.</span><span class="hl-0">respond</span><span class="hl-1">(</span><span class="hl-7">/* stream here */</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-7">// call this on error</span><br/><span class="hl-1"> </span><span class="hl-4">handle</span><span class="hl-1">.</span><span class="hl-0">respondError</span><span class="hl-1">(</span><span class="hl-2">"error message"</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">client</span><span class="hl-1">.</span><span class="hl-4">events</span><span class="hl-1">.</span><span class="hl-0">on</span><span class="hl-1">(</span><span class="hl-2">"connectionError"</span><span class="hl-1">, (</span><span class="hl-4">e</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">(</span><span class="hl-4">e</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">client</span><span class="hl-1">.</span><span class="hl-4">events</span><span class="hl-1">.</span><span class="hl-0">on</span><span class="hl-1">(</span><span class="hl-2">"error"</span><span class="hl-1">, (</span><span class="hl-4">e</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">(</span><span class="hl-4">e</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">client</span><span class="hl-1">.</span><span class="hl-0">connect</span><span class="hl-1">();</span>
|
|
</code><button type="button">Copy</button></pre>
|
|
|
|
<h2 id="client-description" class="tsd-anchor-link">Client Description<a href="#client-description" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="1-create-client-and-connect" class="tsd-anchor-link">1. Create Client and Connect<a href="#1-create-client-and-connect" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You can create tap server client by call <code>createClient</code> function in <code>tap-sdk-js</code> package.</p>
|
|
<p>You should put the client data written as <code>ZakoTapConfig</code> type inside the argument of <code>createClient</code>.</p>
|
|
<p>You can then connect to the tab server using <code>client.connect()</code>.</p>
|
|
<pre><code class="js"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">createClient</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"zako-sdk-js"</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">client</span><span class="hl-1"> = </span><span class="hl-0">createClient</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-4">name:</span><span class="hl-1"> </span><span class="hl-2">"your zako tap server name"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">token:</span><span class="hl-1"> </span><span class="hl-2">"your zako tap server token"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">zakoEndpoint:</span><span class="hl-1"> </span><span class="hl-2">"zako endpoint (option)"</span><br/><span class="hl-1"> </span><span class="hl-4">backoffBaseMs</span><span class="hl-1">: </span><span class="hl-2">"loop waiting time (option)"</span><span class="hl-1">;</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">client</span><span class="hl-1">.</span><span class="hl-0">connect</span><span class="hl-1">();</span>
|
|
</code><button type="button">Copy</button></pre>
|
|
|
|
<h3 id="2-client-event" class="tsd-anchor-link">2. Client Event<a href="#2-client-event" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Using the client created above, you can use client.on to perform a specific function when the EventEmitter's event is called.</p>
|
|
<pre><code class="js"><span class="hl-4">client</span><span class="hl-1">.</span><span class="hl-4">events</span><span class="hl-1">.</span><span class="hl-0">on</span><span class="hl-1">(</span><span class="hl-2">"event name"</span><span class="hl-1">, </span><span class="hl-5">function</span><span class="hl-1">)</span>
|
|
</code><button type="button">Copy</button></pre>
|
|
|
|
<p>The types of events are specified in TapEvents among the types in the zakotap package.</p>
|
|
<h4 id="tap-events" class="tsd-anchor-link">Tap Events<a href="#tap-events" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><ul>
|
|
<li><code>ready</code>: This event is called when the zako tap server successfully connects to the <code>zako tap hub</code>.</li>
|
|
<li><code>request</code>: This event is called when an <code>audio request</code> is received from the <code>zako tap hub</code>.</li>
|
|
<li><code>connectionError</code>: This event is called when an connection error occurs within the zakotap package.</li>
|
|
<li><code>error</code>: This event is called when an error occurs within the zakotap package.</li>
|
|
</ul>
|
|
<h3 id="3-send-audio" class="tsd-anchor-link">3. Send Audio<a href="#3-send-audio" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You can send your audio stream by using <code>handle.respond()</code> function.</p>
|
|
<pre><code class="js"><span class="hl-4">handle</span><span class="hl-1">.</span><span class="hl-0">respond</span><span class="hl-1">(</span><span class="hl-2">"your audio stream"</span><span class="hl-1">);</span>
|
|
</code><button type="button">Copy</button></pre>
|
|
|
|
<p>You can get <code>audio request handle</code> from request event parameter. If you don't send an audio stream, your tap server will be considered offline and you may be disconnected.</p>
|
|
<h2 id="work-flow" class="tsd-anchor-link">Work Flow<a href="#work-flow" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><pre><code class="mermaid">sequenceDiagram
|
|
participant TapServer
|
|
participant TapHub
|
|
|
|
TapServer->>TapHub: WS TapHello
|
|
TapHub-->>TapServer: WS TapResponse
|
|
Note right of TapServer: Waiting for audio request
|
|
TapHub-->>TapServer: WS AudioRequest
|
|
TapServer->>TapHub: POST AudioStream
|
|
</code><button type="button">Copy</button></pre>
|
|
|
|
<h2 id="related-documents" class="tsd-anchor-link">Related Documents<a href="#related-documents" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
|
|
<li><a href="">Zako 2</a></li>
|
|
<li><a href="">Protocol Specification</a></li>
|
|
</ul>
|
|
<h2 id="authors" class="tsd-anchor-link">Authors<a href="#authors" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
|
|
<li><a href="https://github.com/ridanit-ruma">@ridanit-ruma</a> (Discord: <code>ruma0607</code>)</li>
|
|
</ul>
|
|
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#zako-tap-sdk-js"><span>Zako <wbr/>Tap <wbr/>SDK js</span></a><ul><li><a href="#quickstart-example"><span>Quickstart <wbr/>Example</span></a></li><li><a href="#client-description"><span>Client <wbr/>Description</span></a></li><li><ul><li><a href="#1-create-client-and-connect"><span>1. <wbr/>Create <wbr/>Client and <wbr/>Connect</span></a></li><li><a href="#2-client-event"><span>2. <wbr/>Client <wbr/>Event</span></a></li><li><ul><li><a href="#tap-events"><span>Tap <wbr/>Events</span></a></li></ul></li><li><a href="#3-send-audio"><span>3. <wbr/>Send <wbr/>Audio</span></a></li></ul></li><li><a href="#work-flow"><span>Work <wbr/>Flow</span></a></li><li><a href="#related-documents"><span>Related <wbr/>Documents</span></a></li><li><a href="#authors"><span>Authors</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">tap-sdk-js</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|