-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (107 loc) · 5.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="description" content="Webcast.js : Streaming from your browser to the world!">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Webcast.js</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/webcast">View on GitHub</a>
<h1 id="project_title">Webcast.js</h1>
<h2 id="project_tagline">Streaming from your browser to the world!</h2>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h1>
<a id="webcastjs" class="anchor" href="#webcastjs" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Webcast.js</h1>
<table>
<tr><td><img src="https://rawgithub.com/savonet/webcast/master/misc/webcast.svg" alt="Webcast Flowchart" title="Webcast Flowchart"></td></tr>
<tr><td>The Webcast Flowchart</td></tr>
</table>
<h3>
<a id="description" class="anchor" href="#description" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Description</h3>
<p>The webcast library is designed to write browser-based clients to stream local files and live media (webcam video, microphone audio).</p>
<p>The API contains several classes:</p>
<ul>
<li>
<code>Webcast.Encoder.Raw</code>: encoder returning raw s8 samples.</li>
<li>
<code>Webcast.Encoder.Mp3</code>: encoder returning mp3 data. Requires <a href="https://github.com/savonet/shine/tree/master/js">libshine.js</a>.</li>
<li>
<code>Webcast.Encoder.Resample</code>: a wrapper to resample encoder's input. Requires <a href="https://github.com/savonet/libsamplerate-js">libsamplerate.js</a>.</li>
<li>
<code>Webcast.Encoder.Asynchronous</code>: a wrapper to encode in a <a href="http://www.w3.org/TR/workers/">Web Worker</a>
</li>
<li>
<code>Webcast.Socket</code>: a simple wrapper around <code>WebSockets</code> that implements the <code>webcast</code> protocol.</li>
<li>
<code>Webcast.Node</code>: a wrapper to create a <code>webcast</code> node, in-par with the Web Audio API.</li>
</ul>
<p>Here's the highlight of how to use the library:</p>
<pre><code>var source = (...);
var encoder = new Webcast.Encoder.Mp3({
channels: 2,
samplerate: 44100,
bitrate: 128
});
if (inputSampleRate !== 44100) {
encoder = new Webcast.Encoder.Resample({
encoder: encoder,
samplerate: inputSampleRate
});
}
if (useWorker) {
encoder = new Webcast.Encoder.Asynchronous({
encoder: encoder,
scripts: [(...)], // full path to required scripts for the worker.
// usually includes requires encoders and webcast.js
});
}
var webcast = context.createWebcastSource(4096, 2);
source.connect(webcast);
webcast.connect(audioContext.destination);
webcast.sendMetadata({
title: "My Awesome Stream",
artist: "The Dude"
});
</code></pre>
<p>The library involves several cutting-edge technologies and, thus, require a fairly modern browser.
Here's a quick summary of the required technologies:</p>
<ul>
<li>
<a href="http://www.w3.org/TR/2011/WD-websockets-20110929/">WebSocket API</a>: This is the transport layer. It is readily available in most modern browsers.</li>
<li>
<a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a>: This is the API used to manipulate audio and video data inside the browser. </li>
<li>
<a href="http://asmjs.org/">asm.js</a>: This is the technology used to optimize the mp3 encoder.</li>
</ul>
<h3>
<a id="how-to-test" class="anchor" href="#how-to-test" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>How to test?</h3>
<h4>
<a id="client" class="anchor" href="#client" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Client</h4>
<p>A browser-based streaming client, sending mp3 encoded data, using
<a href="https://github.com/savonet/shine/tree/master/js">libshine.js</a> or raw PCM data is available at <a href="https://github.com/webcast/webcaster">webcast/webcaster</a></p>
<h4>
<a id="server" class="anchor" href="#server" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Server</h4>
<p>The <a href="https://github.com/webcast/webcast.js">webcast/webcast.js</a> repository contains a demo server, written in <a href="http://nodejs.org/">NodeJS</a>.</p>
<p>Alternatively, a fully functional implementation of the protocol is available in
<a href="https://github.com/savonet/liquidsoap">liquidsoap</a>. To test it, you can simply run <a href="https://github.com/savonet/liquidsoap">liquidsoap</a> with the following command line:</p>
<pre><code>liquidsoap 'output.ao(fallible=true,audio_to_stereo(input.harbor("mount",port=8080)))'
</code></pre>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
</body>
</html>