ExpertCamJS V 2.2.0
&
ExpertCamJQuery V 2.2.0
Download from: GitHub OR JSclasses

2.2.0 fully works on Edge, Chrome, Fiirefox, Opera
2.0.0 Add jquery version (ExpertCamJQuery)
1.8.0 While playing audio files Display configurable poster
1.7.0 Capture image with parameters, download captured image
1.6.0 News in this version: Optimized for all modern browsers

Compatibility Table

Current state of browser compatibility 2017-10-01

Functions IOS Safari Microsoft IE 11 MS Edge latest Chrome latest Firefox latest Opera latest
Media stream capture No No Yes Yes Yes Yes
Media stream record No No No Partial when recording
audio and video
FFmpeg required		 Yes Partial when recording
audio and video
FFmpeg required
Build select menu No No Yes Yes Yes Yes
Local Video with subtitle Yes Excellent
built in audio track,
subtitle track selector		 Excellent
built in audio track,
subtitle track selector		 Yes Yes Yes
CSS filters Yes No Yes Yes Yes Yes

ExpertCamJS.js Demonstration

CSS Filters


Captured Image

image shoot from canvas

Captured Stream

forward stream to other object

Required HTML & Javascript example

<html>
    <head>
        <meta charset="UTF-8">
        <title>ExpertCamJS</title>
    </head>
    <body>
        <hr>
        <h1 style="text-align:center;">Examples</h1>
        <hr>
        <h4>Video:</h4>
        <select id="video"></select>
        <hr>
        <h4>Audio:</h4>
        <select id="audio"></select>
        <hr>
        <video></video>
        <hr>
        <button type="button" onclick="play()">play</button>
        <button type="button" onclick="pause()">pause</button>
        <button type="button" onclick="stop()">stop</button>
        <button type="button" onclick="openVideo()">Open</button>
        <hr>
        <script type="text/javascript" src="js/expertcam.js"></script>
        <script type="text/javascript">
        /*--------------------------------------------- Available parameters --------------------------------------------*/

        var defaults = {
            width: 320,
            height: 240,
            constraints: {
                video: {
                    mandatory: {
                        maxWidth: 1280,
                        maxHeight: 720
                    },
                    optional: [{
                        sourceId: true
                    }]
                },
                audio: true
            },
            audioBackground: 'media/edgeaudio.jpg',
            noSignalBackground: 'media/no_signal.png',
            videoTypes: 'video/mp4|video/webm|video/avi',
            audioTypes: 'audio/wav|audio/mp3|audio/ogg|audio/mp3',
            subTitleTypes: 'srt',
            subTitleCoding: 'utf-8',
            cameraSuccess: function(stream) {
                console.log('cameraSuccess');
            },
            canPlayFunction: function() {
                console.log('canPlayFunction');
            },
            getDevicesError: function(error) {
                console.log(error);
            },
            getUserMediaError: function(error) {
                console.log(error);
            },
            cameraError: function(error) {
                console.log(error);
            }
        };
        /*------------------------------------ Initialization: please check out examples ----------------------------------*/
        /*---------------------------------- Simple initialization with default parameters --------------------------------*/
        new ExpertCamJS('video').init().play();
        /*---------------------------------- Simple initialization with build select menu ---------------------------------*/
        var cam = new ExpertCamJS('video').init(args).buildSelectMenu('#video', '#audio');
        /*-------------------------- Simple initialization with build select menu (jQuery version) ------------------------*/
        var cam = $('#camera-canvas').ExpertCamJQuery(args).data().plugin_ExpertCamJQuery;
        cam.buildSelectMenu('#video-select', '#audio-select').init();
        function play(){
            cam.play();
        }
        function pause(){
            cam.pause();
        }
        function stop(){
            cam.stop();
        }
        function openVideo(){
           cam.playLocalVideo();
        }
        /*---------------------------------- Simple initialization with play local video ----------------------------------*/
        var args = {
            width: '100%',
            height: '100%',
            constraints: {
                video: false,
                audio: false
                }
            };
            var cam = new ExpertCamJS('video').init(args);
            function openVideo(){
                cam.playLocalVideo();
            }
            function goFullScreen(){
                if(cam){
                    cam.toggleFullScreen();
                }
            }
        /*---------------------------------------------- Available funtions ----------------------------------------------*/
        cam.buildSelectMenu(selectorVideo, selectorAudio);  // build select menu, return ExpertCamJS object
        cam.pause();                                        // pause video, return ExpertCamJS object
        cam.stop(boolean);                                  // stop video, boolean is true set video poster options.noSignalBackground
        cam.play();                                         // play stream, return ExpertCamJS object
        cam.getLastImageSrc();                              // grab image from video, return dataURL
        cam.captureToImage(type, quality);                  // grab image from video, return dataURL with params
        cam.downloadCapturedImage(filename, type, quality); // grab image from video and download immediately
        cam.isInitialized();                                // return true Or false
        cam.getStream();                                    // return Stream
        cam.getVideo();                                     // return video element
        cam.cssFilter(type, val);                           // CSS3 filters example 'blur', '2px'
        cam.playLocalVideo();                               // open localvideo browser window
        cam.toggleFullScreen();                             // video toggle Full Screen
        cam.options                                         // return options get, set
        cam.version                                         // return version information
        HTMLVideoElement.streamSrc(stream)                  // cross browser createObject url function to play stream 
        /*--------------- for record and upload, merge video please check out the complex demo page source ---------------*/
        </script>
    </body>
</html>