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 @fly-rains/video-rtp

Record video

import {webrtcSurport, openVideo} from 'video-rtp'

function getSocket(isRTC) {
    let url = `ws://localhost:3000/${isRTC ? 'webm' : 'webp'}`
    const ws = new WebSocket(url);
    return new Promise(resolve => {
    ws.onopen = () => resolve(ws)
    })
},

const wsP = getSocket(webrtcSurport())

const record = await openVideo({
    video: document.getElementById('webrtc'),
    duration: 100,
    MINSIZE: 1024,
    chunks(chunk) {
    // sender chunks
    console.log('sender chunks', chunk)
    wsP.then(ws => ws.send(chunk))
    },
    ended() {
    // record chunks ended, You can save video in this function.
    console.log('record chunks ended')
    wsP.then(ws => ws.send(0))
    },
    degrade:document.getElementById('p') // 不支持webRTC则降级处理打开本地视频
})

How to manually stop recordings?

record.stop();

How to pause recordings?

record.pause();

How to resume recordings?

record.resume();

How to save recordings?

import {webrtcSurport, openVideo} from 'video-rtp'
import Whammy from 'whammy'

let video = null
const blobs = []
openVideo({
    /* .....*/
    chunks(chunk) {
        // save webm/webp to blobs
        blobs.push(chunk)
    },
    ended() {
        // create video by blobs
        if (webrtcSurport()) {
            video = new Blob(blobs, {type: 'video/webm;codecs=vp9'});
        }else {
            video = Whammy.fromImageArray(blobs, 15)
        }
    },
    degrade:document.getElementById('p') // 不支持webRTC则降级处理打开本地视频
})

Upload to Server

How to handle the blobs on Server

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.

License

If you have any Suggestions, let me know. Thanks! MIT licence