video-rtp
A cross-browser implementation to record video on real time
1. Use webRTC/mediaRecord first
2. Degrade to use "input[type = file]" when not support webRTC
video-rtp can open the camera and record video to a series of blobs. You can upload the recorded blobs in realtime to the server! Or you can get the blobs and combine to a smaller video after specific time-intervals.
Browser Support
According to webRTC/MediaRecord/Canvas's compatibility
Browser | Support | Features |
---|---|---|
Firefox | mobile / PC | webRTC to webm |
Google Chrome | mobile / PC | webRTC to webm |
Opera | mobile / PC | mobile: canvas to webp, PC: webRTC to webm |
Android | ALL | Chrome: webRTC to webm, Other: canvas to webp |
Microsoft Edge | Suggest: rtmp-streamer | canvas to webp |
Safari 11 | mobile / PC | canvas to webp now |
There is a similar project: RecordRTC! Demo
How to use it
You can install scripts using NPM:
npm install video-rtp
Record video
{ let url = `ws://localhost:3000/` const ws = url; return { ws }} const wsP = const record = await
How to save recordings?
let video = nullconst encoder = 15;
DEMO
Local video compression and upload
WEB push and pull stream, mock live broadcast
https://github.com/zhutao315/videoRTP-example
npm install && npm start
open localhost:3000
API Documentation
Name | Type | Default | Description |
---|---|---|---|
video |
String/DOM | - | Display video recorded by the camera |
duration |
Number | 100(ms) | The time interval when Canvas draws frames |
collectTime |
Number | 1000(ms) | The time length of chunks by mediaRecord record |
MINSIZE |
Number | 1M | If the video size is lower than this value, the video will be returned without processing |
MAXTIME |
Number | 15(m) | The Maximum duration of the upload video |
chunks |
Function | () => { } | The callback Function executed each time when the screen is recorded. The param is a blob and the blob's type is webm/webp |
ended |
Function | () => { } | The callback Function executed when the record is end |
degrade |
String/DOM/Boolen | - | The degrage is usefull when the webRTC is not supported |
When the "degrade" is a string, the component will find the DOM by id/class. The dom will bind a click event to open the local video. When the value of "degrade" is true, the openVideo function will open the local video directly.
How to manually stop recordings?
record;
How to pause recordings?
record;
How to resume recordings?
record;
License
If you have any Suggestions, let me know. Thanks! MIT licence