media-recorder-js
Version:
WebRTC media recorder library for Javascript
2,235 lines (602 loc) • 32.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>QBMediaRecorder - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="QBMediaRecorder.html">QBMediaRecorder</a><ul class='methods'><li data-type='method'><a href="QBMediaRecorder.html#toggleMimeType">toggleMimeType</a></li><li data-type='method'><a href="QBMediaRecorder.html#.isAvailable">isAvailable</a></li><li data-type='method'><a href="QBMediaRecorder.html#.isAudioContext">isAudioContext</a></li><li data-type='method'><a href="QBMediaRecorder.html#.isTypeSupported">isTypeSupported</a></li><li data-type='method'><a href="QBMediaRecorder.html#.getSupportedMimeTypes">getSupportedMimeTypes</a></li><li data-type='method'><a href="QBMediaRecorder.html#getState">getState</a></li><li data-type='method'><a href="QBMediaRecorder.html#start">start</a></li><li data-type='method'><a href="QBMediaRecorder.html#stop">stop</a></li><li data-type='method'><a href="QBMediaRecorder.html#pause">pause</a></li><li data-type='method'><a href="QBMediaRecorder.html#resume">resume</a></li><li data-type='method'><a href="QBMediaRecorder.html#change">change</a></li><li data-type='method'><a href="QBMediaRecorder.html#download">download</a></li></ul></li></ul>
</nav>
<div id="main">
<h1 class="page-title">QBMediaRecorder</h1>
<section>
<header>
<h2>
QBMediaRecorder
</h2>
</header>
<article>
<div class="container-overview">
<h4 class="name" id="QBMediaRecorder"><span class="type-signature"></span>new QBMediaRecorder<span class="signature">(opts<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line5">line 5</a>
</li></ul></dd>
</dl>
<h5>Examples</h5>
<pre class="prettyprint"><code>var opts = {
onstart: function onStart() { // Use named function.
console.log('Recorder is started');
},
onstop: function onStop(Blob) {
videoElement.src = URL.createObjectURL(blob);
},
mimeType: 'video/mp4'
};
// uses as global variable, QBMediaRecorder is built as a UMD module.
var recorder = new QBMediaRecorder(opts);</code></pre>
<pre class="prettyprint"><code>// For record 'audio/mp3' or 'audio/wav' need to add <a href="https://github.com/QuickBlox/javascript-media-recorder/blob/master/qbAudioRecorderWorker.js">'qbAudioRecorderWorker.js'</a> file to your project.
var opts = {
// use named function
onstart: function onStart() {
console.log('Recorder is started');
},
onstop: function onStop(Blob) {
videoElement.src = URL.createObjectURL(blob);
},
// 'audio/wav' or 'audio/mp3'
mimeType: 'audio/mp3',
// set relative path (from folder node_modules for example)
workerPath: '../node_modules/javascript-media-recorder/qbAudioRecorderWorker.js'
};
// uses as global variable, QBMediaRecorder is built as a UMD module.
var recorder = new QBMediaRecorder(opts);</code></pre>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>opts</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>Object of parameters.</p>
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>mimeType</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="default">
<code>video</code>
</td>
<td class="description last"><p>Specifies the media type and container format for the recording. You can set simply: 'video' or 'audio' or 'audio/webm' ('audio/wav' or 'audio/mp3' mimeTypes uses AudioContext API instead of MediaRecorder API);</p></td>
</tr>
<tr>
<td class="name"><code>workerPath</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Relative path from index.html.</p></td>
</tr>
<tr>
<td class="name"><code>timeslice</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="default">
<code>1000</code>
</td>
<td class="description last"><p>The minimum number of milliseconds of data to return in a single Blob, fire 'ondataavaible' callback (isn't need to use with 'audio/wav' of 'audio/mp3').</p></td>
</tr>
<tr>
<td class="name"><code>ignoreMutedMedia</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="default">
<code>true</code>
</td>
<td class="description last"><p>What to do with a muted input MediaStreamTrack, e.g. insert black frames/zero audio volume in the recording or ignore altogether.</p></td>
</tr>
<tr>
<td class="name"><code>onstart</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Called to handle the start event.</p></td>
</tr>
<tr>
<td class="name"><code>onstop</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Called to handle the stop event.</p></td>
</tr>
<tr>
<td class="name"><code>onpause</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Called to handle the pause event.</p></td>
</tr>
<tr>
<td class="name"><code>onresume</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Called to handle the resume event.</p></td>
</tr>
<tr>
<td class="name"><code>onerror</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Called to handle an ErrorEvent.</p></td>
</tr>
<tr>
<td class="name"><code>onchange</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Called to handle the change a stream event.</p></td>
</tr>
<tr>
<td class="name"><code>ondataavailable</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Called to handle the dataavailable event. The Blob of recorded data is contained in this event (Callback isn't supported if use 'audio/wav' of 'audio/mp3' for recording).</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="toggleMimeType"><span class="type-signature"></span>toggleMimeType<span class="signature">(mimeType)</span><span class="type-signature"> → {Boolean}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line92">line 92</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var opts = {
onstart: function onStart() {
console.log('Recorder is started');
},
onstop: function onStop(Blob) {
videoElement.src = URL.createObjectURL(blob);
},
mimeType: 'video/mp4',
// set the path to the worker before if 'audio/wav' or 'audio/mp3' mimeTypes will be used.
workerPath: '../node_modules/javascript-media-recorder/qbAudioRecorderWorker.js'
};
var recorder = new QBMediaRecorder(opts);
recorder.toggleMimeType('audio/mp3');</code></pre>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>mimeType</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last"><p>The mimeType to set as option.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="param-desc">
<ul>
<li>True if the MediaRecorder implementation is capable of recording Blob objects for the specified MIME type.</li>
</ul>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
<h4 class="name" id=".isAvailable"><span class="type-signature">(static) </span>isAvailable<span class="signature">()</span><span class="type-signature"> → {Boolean}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line184">line 184</a>
</li></ul></dd>
</dl>
<div class="description">
<p>It checks capability of recording in the environment.<br>Checks MediaRecorder, MediaRecorder.isTypeSupported and Blob.</p>
</div>
<h5>Example</h5>
<pre class="prettyprint"><code>if(QBMediaRecorder.isAvailable()) {
// ... show UI for recording
}</code></pre>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns true if the QBMediaRecorder is available and can run, or false otherwise.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
<h4 class="name" id=".isAudioContext"><span class="type-signature">(static) </span>isAudioContext<span class="signature">()</span><span class="type-signature"> → {Boolean}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line198">line 198</a>
</li></ul></dd>
</dl>
<div class="description">
<p>It checks the AudioContext API.<br>Checks window.AudioContext or window.webkitAudioContext.</p>
</div>
<h5>Example</h5>
<pre class="prettyprint"><code>if(QBMediaRecorder.isAudioContext()) {
// ... the QBMediaRecorder is available for recording 'audio/mp3' or 'audio/wav'
}</code></pre>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns true if the AudioContext API is available in a browser, or false otherwise.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
<h4 class="name" id=".isTypeSupported"><span class="type-signature">(static) </span>isTypeSupported<span class="signature">(mimeType)</span><span class="type-signature"> → {Boolean}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line212">line 212</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Returns a Boolean which is true if the MIME type specified is one the user agent can record.</p>
</div>
<h5>Example</h5>
<pre class="prettyprint"><code>if( QBMediaRecorder.isTypeSupported('video/mp4') ) {
el.textContent = 'Will be record in video/mp4';
}</code></pre>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>mimeType</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last"><p>The mimeType to check.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="param-desc">
<ul>
<li>True if the MediaRecorder implementation is capable of recording Blob objects for the specified MIME type.</li>
</ul>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
<h4 class="name" id=".getSupportedMimeTypes"><span class="type-signature">(static) </span>getSupportedMimeTypes<span class="signature">(type<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {Array}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line253">line 253</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Return all supported mime types and container format.</p>
</div>
<h5>Example</h5>
<pre class="prettyprint"><code>var type = QBMediaRecorder.getSupportedMimeTypes('audio');
console.info(`Call will recording in ${type[0]}`);</code></pre>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
<code>video</code>
</td>
<td class="description last"><p>Type of media.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="param-desc">
<p>Array of supported mimetypes. Recommended mimetype has 0 index.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">Array</span>
</dd>
</dl>
<h4 class="name" id="getState"><span class="type-signature"></span>getState<span class="signature">()</span><span class="type-signature"> → {String}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line278">line 278</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Return the current <a href="https://w3c.github.io/mediacapture-record/MediaRecorder.html#idl-def-recordingstate">state of QBMediaRecorder instance</a>.<br>Possibly states: <strong>inactive</strong>, <strong>recording</strong>, <strong>paused</strong>.</p>
</div>
<h5>Example</h5>
<pre class="prettyprint"><code>var recorder = new QBMediaRecorder();
// ...some code
if(recorder.getState() == 'recording') {
console.info('You are still recording.');
}</code></pre>
<h5>Returns:</h5>
<div class="param-desc">
<p>Name of a state.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">String</span>
</dd>
</dl>
<h4 class="name" id="start"><span class="type-signature"></span>start<span class="signature">(stream)</span><span class="type-signature"> → {void}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line307">line 307</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Start to recording a stream.<br>Fire the method <code>stop</code> if an instance inprogress (has a state recording or paused).<br>Fire onstart callback.</p>
</div>
<h5>Example</h5>
<pre class="prettyprint"><code>var options = {
onstart: function onStart() {
var time = 0,
step = 1000;
setTimeout(function () {
time += step;
console.info(`You are recording ${time} sec.`);
}, step);
}
}
var rec = new qbRecorder(options);
// ...
rec.start(stream);</code></pre>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>stream</code></td>
<td class="type">
<span class="param-type">MediaStream</span>
</td>
<td class="description last"><p>Stream object representing a flux of audio- or video-related data.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="stop"><span class="type-signature"></span>stop<span class="signature">()</span><span class="type-signature"> → {Blob}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line515">line 515</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Stop to recording a stream.</p>
</div>
<h5>Returns:</h5>
<div class="param-desc">
<p>Blob of recorded chuncks.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">Blob</span>
</dd>
</dl>
<h4 class="name" id="pause"><span class="type-signature"></span>pause<span class="signature">()</span><span class="type-signature"> → {void}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line530">line 530</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Pause to recording a stream.</p>
</div>
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="resume"><span class="type-signature"></span>resume<span class="signature">()</span><span class="type-signature"> → {void}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line544">line 544</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Resume to recording a stream.</p>
</div>
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="change"><span class="type-signature"></span>change<span class="signature">(stream)</span><span class="type-signature"> → {void}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line559">line 559</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Change a recorded stream.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>stream</code></td>
<td class="type">
<span class="param-type">MediaStream</span>
</td>
<td class="description last"><p>Stream object representing a flux of audio- or video-related data.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="download"><span class="type-signature"></span>download<span class="signature">(fileName<span class="signature-attributes">opt</span>, blob<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {void}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="index.js.html">index.js</a>, <a href="index.js.html#line596">line 596</a>
</li></ul></dd>
</dl>
<div class="description">
<p>Create a file from blob and download as the file. Its method will fire 'stop' if recording in progress.</p>
</div>
<h5>Example</h5>
<pre class="prettyprint"><code>var rec = new qbRecorder();
rec.start(stream);
// ...
rec.download(false); // Set false, name will be generated based on Date.now()</code></pre>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fileName</code></td>
<td class="type">
<span class="param-type">Strint</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
<code>Date.now()</code>
</td>
<td class="description last"><p>Name of file.</p></td>
</tr>
<tr>
<td class="name"><code>blob</code></td>
<td class="type">
<span class="param-type">Blob</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>You can set blob which you get from the method <code>stop</code> or don't set anything and we will get recorded chuncks.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Fri Mar 09 2018 11:57:33 GMT+0200 (FLE Standard Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>