Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
@api.video/media-recorder
Advanced tools
Weekly downloads
Readme
api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
Typescript library to easily upload data from a MediaStream to api.video. It can be used to upload a video to api.video from the user's webcam with ease, as well as from a screen recording.
If you use requirejs you can add the library as a dependency to your project with
$ npm install --save @api.video/media-recorder
You can then use the library in your script:
var { ApiVideoMediaRecorder } = require('@api.video/media-recorder');
var recorder = new ApiVideoMediaRecorder(mediaStream, {
uploadToken: "YOUR_DELEGATED_TOKEN"
// ... other optional options
});
If you use Typescript you can add the library as a dependency to your project with
$ npm install --save @api.video/media-recorder
You can then use the library in your script:
import { ApiVideoMediaRecorder } from '@api.video/media-recorder'
const recorder = new ApiVideoMediaRecorder(mediaStream, {file: files[0],
uploadToken: "YOUR_DELEGATED_TOKEN"
// ... other optional options
});
Include the library in your HTML file like so:
<head>
...
<script src="https://unpkg.com/@api.video/media-recorder" defer></script>
</head>
Then, once the window.onload
event has been trigered, create your player using new ApiVideoMediaRecorder()
:
...
<script type="text/javascript">
const recorder = new ApiVideoMediaRecorder(mediaStream, {
uploadToken: "YOUR_DELEGATED_TOKEN"
});
recorder.start();
// ...
recorder.stop().then((video) => console.log(video));
</script>
The media recorder object is instanciated using a MediaStream and an options
object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token.
Using delegated upload tokens for authentication is best options when uploading from the client side. To know more about delegated upload token, read the dedicated article on api.video's blog: Delegated Uploads.
Option name | Mandatory | Type | Description |
---|---|---|---|
uploadToken | yes | string | your upload token |
videoId | no | string | id of an existing video |
common options (see bellow) |
Warning: be aware that exposing your access token client-side can lead to huge security issues. Use this method only if you know what you're doing :).
Option name | Mandatory | Type | Description |
---|---|---|---|
accessToken | yes | string | your access token |
videoId | yes | string | id of an existing video |
common options (see bellow) |
Option name | Mandatory | Type | Description |
---|---|---|---|
apiHost | no | string | api.video host (default: ws.api.video) |
retries | no | number | number of retries when an API call fails (default: 5) |
videoName | no | string | the name of your recorded video (overrides the default "file" name) |
const mediaRecorder = new ApiVideoMediaRecorder(myMediaStream, {
uploadToken: "YOUR_DELEGATED_TOKEN",
retries: 10,
});
start(options?: { timeslice?: number })
The start() method starts the upload of the content retrieved from the MediaStream. It takes an optionnal options
parameter.
Option name | Mandatory | Type | Description |
---|---|---|---|
timeslice | no (default: 5000) | number | The number of milliseconds to record into each Blob. |
Example
// ... mediaRecorder instanciation
mediaRecorder.start();
// or, with a 2 seconds timeslice:
// mediaRecorder.start({ timeslice: 2000 });
stop(): Promise<VideoUploadResponse>
The start() method stops the media recording. It upload the last part of content retrieved from the MediaStream (this will start the aggregation of the video parts on the api.video side). It takes no parameter. It returns a Promise that resolves with the newly created video.
addEventListener(event: string, listener: Function)
Define an event listener for the media recorder. The following events are available:
"error"
: when an error occurs"recordingStopped"
: when the recording is stopped"videoPlayable"
: when the video is playableExample
// ... mediaRecorder instanciation
mediaRecorder.addEventListener("error", (event) => {
console.log(event.data);
});
getMediaRecorderState(): RecordingState
Return the state of the underlaying MediaRecorder. The state can be one of the following: inactive
, paused
, recording
.
Example
// ... mediaRecorder instanciation
mediaRecorder.stop()
.then(video => console.log(video));
<html>
<head>
<script src="../dist/index.js"></script>
<style>
#container {
display: flex;
flex-direction: column;
align-items: center;
}
#video {
width: 640;
height: 480;
border: 1px solid gray;
}
#container div {
margin: 10px 0;
}
</style>
</head>
<body>
<div id="container">
<div>
<video id="video"></video>
</div>
<div>
<button id="start" disabled>start recording</button>
<button id="stop" disabled>stop recording</button>
</div>
<div>
<p>Video link: <span id="video-link"><i>will be displayed when the recording is finished</i></span></p>
</div>
</div>
<script>
const video = document.querySelector('#video');
const startButton = document.getElementById("start");
const stopButton = document.getElementById("stop");
const videoLink = document.getElementById("video-link");
let stream, recorder;
var constraints = window.constraints = {
audio: true,
video: true
};
navigator.mediaDevices.getUserMedia(constraints).then((s) => {
stream = s;
video.srcObject = s;
video.play();
startButton.disabled = false;
});
document.getElementById("start").addEventListener("click", () => {
recorder = new ApiVideoMediaRecorder(stream, {
uploadToken: "UPLOAD_TOKEN"
});
recorder.start();
startButton.disabled = true;
stopButton.disabled = false;
});
document.getElementById("stop").addEventListener("click", () => {
startButton.disabled = false;
stopButton.disabled = true;
recorder.stop().then(v => videoLink.innerHTML = v.assets.player);
});
</script>
</body>
</html>
FAQs
api.video media recorder - upload video from your webcam with ease
The npm package @api.video/media-recorder receives a total of 1,004 weekly downloads. As such, @api.video/media-recorder popularity was classified as popular.
We found that @api.video/media-recorder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.