react-betajs-media-component

    0.1.4 • Public • Published

    BetaJS's React component

    Project is based BetaJS javascript frameworks, for easy integration on React projects

    It's include with a lot of options and events:

    • video recorder
    • video player
    • ... soon will be added audio player/recorder also

    Demo

    Change Logs

    • 0.1.0 - Added video upload and mobile recorder cover shot generator. Video thumbnails generation and view in player feature added. Mobile swipe on progressbar elements added.
    • 0.1.3 - Added features: a. Recorder pause/resume; b. Merger streams, for the case like: screen recorder + camera record. Both for WebRTC recorder only.

    Video Recorder

    To be able recorder start work as expected you need also virtual server, perfect for testing is Nano Media Server. After installation you can run below on terminal, which will start server on https://localhost:5050:

    Install once Nano Media Server: npm i nano-media-server on your project folder. Generate local SSL certificates (Useful guide). After you can run the below command by replacing your own certificate path to be able use the media server:

    node node_modules/nano-media-server/server.js --staticserve . --port='5050' --sslkey='/path/to/key.pem' --sslcert='/path/to/cert.pem' --ffmpegopt='{ "test_info": { "encoders": ["aac"] } }'

    Example code:

    import React from 'react'
    import {BetaJSVideoRecorder} from 'react-betajs-media-component'
    ...
        /**
         *
         */
        componentDidMount() {
            let BetaJS = window.BetaJS;
            let filename = "video-" + BetaJS.Time.now();
            let recorder = this.child.recorderInstance();
            let nanoMediaServer = 'https://localhost:5050'; 
     
            recorder._prepareRecording = function () {
                recorder.set("uploadoptions", {
                    image: {url: nanoMediaServer + "/files/" + filename + ".jpg"},
                    video: {url: nanoMediaServer + "/files/" + filename + ".webm"},
                    audio: {url: nanoMediaServer + "/files/" + filename + ".wav"}
                });
                recorder.set("playbacksource", nanoMediaServer + "/files/" + filename + ".mp4");
                if (recorder.recorder)
                    recorder.set("playbackposter", nanoMediaServer + "/files/" + filename + ".jpg");
                return BetaJS.Promise.value(true);
            };
     
            recorder._verifyRecording = function () {
                return BetaJS.Ajax.Support.execute({
                    method: "POST",
                    uri: `${nanoMediaServer}/files/${filename}.webm/transcode/${filename}.mp4` + (recorder.recorder && recorder.recorder.localPlaybackSource().audio ? "?audio=" + filename + ".wav" : "")
                });
            };
        }
    ...
        recorderRecording = () => {
            console.log('Recorder onRecording');
        };
     
        recorderUploading = () => {
            console.log('Recorder uploading');
        };
     
    ...
     
        <BetaJSVideoRecorder
            height={180}
            width={320}
            onRecording={this.recorderRecording}
            onUploading={this.recorderUploading}
        />
     
    ...
    Available events for Recorder
       
      - onPlaying
      - onPaused
      - onAttached
      - onLoaded
      - onEnded
      - onSeek 
      - onError
      - onManuallySubmitted
      - onUploaded
      - onUploadSelected
      - onRecording
      - onUploading
      - onRerecord
      - onCountdown
      - onRecordingProgress
      - onUploadProgress
      - onAccessForbidden
      - onAccessGranted
      - onCameraUnresponsive
      - onVerified
      - onNoCamera
      - onNoMicrophone
      - onRef
    Available Recorder Options
     
        "theme": string
        'themecolor': string
        'width': oneOfType([number, string])
        'height': oneOfType([number, string]) 
        "flashFile": string
        "locale": string
     
        "gallerysnapshots": number
        "autorecord": bool
        "autoplay": bool
        "allowrecord": bool
        "allowupload": bool
        "allowcustomupload": bool
        "manual-upload": bool
        "camerafacefront": bool
        "primaryrecord": bool
        "allowscreen": bool
        "nofullscreen": bool
        "recordingwidth": oneOfType([number, string])
        "recordingheight": oneOfType([number, string])
        "minuploadingwidth": oneOfType([number, string])
        "maxuploadingwidth": oneOfType([number, string])
        "minuploadingheight": oneOfType([number, string])
        "maxuploadingheight": oneOfType([number, string])
        "countdown": number
        "snapshotmax": number
        "framerate-warning": number
        "framerate": number
        "audiobitrate": number
        "videobitrate": number
        "snapshottype": string
        "picksnapshots": bool
        "playbacksource": string
        "screen": object
        "playbackposter": string
        "recordermode": bool
        "skipinitial": bool
        "skipinitialonrerecord": bool
        "timelimit": number
        "timeminlimit": number
        "rtmpstreamtype": string
        "rtmpmicrophonecodec": string
        "microphone-volume": number
        "flip-camera": bool
        "early-rerecord": bool
        "custom-covershots": bool
        "manualsubmit": bool
        "allowedextensions": bool
        "filesizelimit": bool
        "faceoutline": bool
        "display-timer": bool
     
        /* Configuration */
        "webrtcstreaming": bool
        "webrtconmobile": bool
        "webrtcstreamingifnecessary": bool
     
        /* Options */
        "forceflash": bool
        "noflash": bool
        "onlyaudio": bool
        "noaudio": bool
        "flashincognitosupport": bool
        "enforce-duration": bool
        "localplayback": bool
        "uploadoptions": object
        "playerattrs": object
        "shortMessage": bool
        "createthumbnails": bool // default true
        "rerecordable": bool
        "allowcancel": bool
        "recordings": number
        "orientation": bool
        "stretch": bool
        "audio-test-mandatory": bool
     
        "allowtexttrackupload": bool
        "uploadlocales": arrayOf(object)
        
        /** starting from 1.0.1 */
        "allowmultistreams": bool (default: false)
        "addstreampositionx": number (default: 5)
        "addstreampositiony": number (default: 5)
        "addstreampositionwidth": number (default: 120)
        "addstreampositionheight": number (default: 95)
        "pausable": bool (default: false)

    Recorder option Screen Recorder

    Screen Capture is currently supported by Firefox, Chrome and Opera.

    • Firefox: Direct support -- no extensions or plugins required
    • Chrome + Opera: use extension builder located in your application manager
        <BetaJSVideoRecorder
            allowscreen={true}
            allowrecord={false} // Optional you can even set it to true
            allowupload={false} // Optional you can even set it to true
            chrome_extension_id={YOUR_CHROME_EXTENSION_ID}
            chrome_extension_install_link={YOUR_CHROME_EXTENSION_INSTALLATION_LINK}
            opera_extension_id={YOUR_OPERA_EXTENSION_ID}
            opera_extension_install_link={YOUR_OPERA_EXTENSION_INSTALLATION_LINK}
            ...
        />
    

    Video Player

    import React from 'react'
    import {BetaJSVideoPlayer} from 'react-betajs-media-component'
     
    ...
     
        playing = (embedding /* player instance */) => {
            console.log('it\'s playing, your action here');
        };
     
        paused = (embedding /* player instance */) => {
            console.log('it\'s paused, your action when pause');
        };
     
    ...
        <BetaJSVideoPlayer
            source={VIDEO_SOURCE}
            theme={'modern'}
            themecolor={'red'}
            skipinitial={false}
            onPlaying={this.playing}
            onPaused={this.paused}
            ...
        />
    ...
    Available events listeners for Player
       - onPlaying
       - onPaused
       - onAttached
       - onLoaded
       - onEnded
       - onError
       - onSeek 
       - onRef
    Available Player Options
        "theme": string
        'themecolor': string
        'width': oneOfType([number, string])
        "popup-width": oneOfType([number, string])
        "popup-height": oneOfType([number, string])
        'height': oneOfType([number, string])
        "locale": string  
     
        /* Attributes */
        "poster": string,
        "source": string,
        "sources": arrayOf(object)
        "sourcefilter": object
        "streams": arrayOf(object)
        "currentstream": object
        "playlist": oneOfType([array, object, string]),
        "volume": number
        "title": string
        "initialseek": number
        "sharevideo": oneOfType([array, string])
        "sharevideourl": string
        "visibilityfraction": number
     
        /* Configuration */
        "forceflash": bool
        "noflash": bool
        "reloadonplay": bool
        "playonclick": bool
     
        /* Ads */
        "adprovider": string // "adsense", "vast"
        "preroll": bool
     
        /* Options */
        "rerecordable": bool
        "submittable": bool
        "autoplay": bool
        "preload": bool
        "loop": bool
        "popup": bool
        "nofullscreen": bool
        "playfullscreenonmobile": bool
        "ready": bool
        "stretch": bool
        "popup-stretch": bool
        "hideoninactivity": bool
        "hidebarafter": number // 5000
        "preventinteraction": bool
        "skipinitial": bool
        "playwhenvisible": bool
        "disablepause": bool
        "disableseeking": bool
        "airplay": bool
        "chromecast": bool
        "skipseconds": number // 5
        "tracktags": arrayOf(object)
        "tracktagsstyled": bool
        "showsettings": bool
        "playercurrentspeed": number
        "tracktaglang": string
        "tracksshowselection": bool
        "settingsoptions": arrayOf(object),
     
        "allowtexttrackupload": bool, // false,
        "uploadtexttracksvisible": bool, // false,
        "uploadlocales": arrayOf(object),
        //     [{
        //     lang: 'en',
        //     label: 'English'
        // }],
        "ttuploadervisible": bool, // false,
     

    Themes

    Theme Names set with theme:

        - cube
        - elevate
        - minimalist
        - modern
        - space
        - theatre
    

    Theme Colors set with themecolor:

        - red
        - blue
        - green
    

    Install

    npm i react-betajs-media-component

    Homepage

    betajs.com

    DownloadsWeekly Downloads

    1

    Version

    0.1.4

    License

    Apache-2.0

    Unpacked Size

    14.2 MB

    Total Files

    10

    Last publish

    Collaborators

    • sambua