Skip to content

zhutao315/videoRTP

Repository files navigation

npm

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

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:true // 不支持webRTC则降级处理打开本地视频
})

How to save recordings?

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

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

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.stop();

How to pause recordings?

record.pause();

How to resume recordings?

record.resume();

License

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