National Park of Minnesota

    webrtcshitblt

    1.0.1 • Public • Published

    WebRtcShitBlt

    npm

    Live demo at https://asafrob.github.io/WebRtcShitBlt/

    image show a smaple use of a video captured by WebRTC with an embeded image (brown/yellow) on the top left corner
    alt text

    what does it do ?

    This library wraps a WebRTC source and returns a MediaStream that can be used as a normal MediaStream u get from navigator.mediaDevices.getUserMedia.
    The returned MediaStream will have your selected image embeded in the video stream.

    common usecases

    • logo
    • watermark
    • image extracted from a presentation

    how does it work

    The code creates an hidden video element and an hidden canvas element
    The original MediaStream is played on the hidden video element.
    The video element is sampled for images, which are drawn to the hidden canvas.
    The logo image is also being drawn to the canvas.
    Canvas MediaStream is returned to the calling app.

    Sample code

            // the constanint object defaults to {video: true, audio: true} but to save u the echo...
            var sb = new WebRtcSB({video:{width:640, height:480}, audio: false});
            // create manipulation objects. they will be processed in the order you supply them.
            // in current live demo u will get 4 images
            var imgCopy = new ImageCopy();
            var imgAdd = new ImageAdd('sb.png', 10, 10, 50, 50);
            sb.setManipulators([imgCopy, imgAdd]);
     
            sb.sbStartCapture()
                .then((stream)=>{
                document.getElementById('myVideo').srcObject = stream;
            })

    Note

    • this library is based on ES6

    Tested on

    • chrome 63 (OS X)
    • FireFox 57 (OS X)
    • Safari 11.0.3 (OS X)

    Roadmap

    • test & support other browsers/OSs
    • implement more plugins

    Install

    npm i webrtcshitblt

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • asafrob