Icontem

Expert JS Camera Capture: Capture video and audio and save to files

Recommend this page to a friend!
  Info   View files Documentation   Demos   Screenshots Screenshots   View files View files (32)   DownloadInstall with Composer Download .zip   Reputation   Support forum (2)   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2017-09-30 (14 hours ago) RSS 2.0 feedNot yet rated by the usersTotal: 207 All time: 225 This week: 11Up
Version License JavaScript version Categories
expert-camera-js 1.0.12MIT/X Consortium ...3.0HTML, Audio, Files and Folders, Video
Description Author

This package can capture video and audio and save to files. Currently it can:

- Capture and play audio and video from available video sources to the current browser
- Display a custom image when no image is being captured
- Play local video or audio file with subtitles
- Grab image from player
- Record captured stream to webm or ogg formats

Recommendations

Take pictures with a camera
Take a shot and upload to server

  Performance   Level  
Name: Andras Toth <contact>
Classes: 19 packages by
Country: Hungary Hungary
Innovation award
Innovation award
Nominee: 15x

Winner: 9x

Details
ExpertCamJS  & ExpertCamJQuery
==============================

javascript Camera handler with some options.

    - Capture video, audio
    - Open local video or audio file with subtitle
    - Forward captured stream to another object
    - Grab image from player
    - Record captured stream to webm or ogg
    - Optimized for all modern browser

* [ExpertCamJS] - Online Demo 

<img src = "compatiblity.png" width="100%"/>

<img src = "demo.png" width="100%"/>

Version
----

2.2.0

    - Extend browser ccompatibility


Version
----

2.0.0

    - Add jquery version (ExpertCamJQuery)

Version
----

1.8.0

    - While playing audio files Display configurable poster.

Version
----

1.7.0

    - Capture image with parameters (type, quality)
    - Capture image with parameters (filename, type, quality) and download

Version
----

1.5.0

    - Optimized for all modern browser
    
Version
----
1.2.0

    - Open local video or audio file with subtitle
      using multiselect
    - some minor modification  

Version
----
1.0.0

    - Capture video, audio
    - Open local video and audio files
    - Forward captured stream to another object
    - Grab image from player
    - Record captured stream to webm or ogg

Included recorder
-----------

Stream recorder ([MediaStreamRecorder])
 

Required HTML & Javascript example
--------------

```sh
<!DOCTYPE html>
<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');
        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>
```

License
----

MIT

Author: Tóth András
---
http://atandrastoth.co.uk/

2015-06-13

[ExpertCamJS]:http://atandrastoth.co.uk/main/pages/plugins/expertcam
[MediaStreamRecorder]:https://github.com/streamproc/MediaStreamRecorder
Screenshots  
  • demo
  Files folder image Files  
File Role Description
Files folder imagecss (9 files)
Files folder imageexamples (6 files)
Files folder imagejs (6 files)
Files folder imagemedia (3 files)
Accessible without login Plain text file AUTHORS.txt Data Documentation
Accessible without login Image file compatiblity.png Data Auxiliary data
Accessible without login Image file demo.png Icon Icon image
Accessible without login Plain text file ffmpeg.txt Data Documentation
Accessible without login HTML file index.html Doc. Documentation
Accessible without login Plain text file MIT-License.txt Lic. Documentation
Accessible without login Plain text file README.md Doc. Auxiliary data
Accessible without login Plain text file save.php Data Auxiliary data

  Files folder image Files  /  css  
File Role Description
  Accessible without login Image file 949320192f43b9d8.png Icon Icon image
  Accessible without login Image file Chrome_Canary_Icon.png Icon Icon image
  Accessible without login Image file firefox-dev.png Icon Icon image
  Accessible without login Image file google-chrome.png Icon Icon image
  Accessible without login Image file Internet_Explorer_9.png Icon Icon image
  Accessible without login Image file mozilla_firefox.png Icon Icon image
  Accessible without login Image file opera.png Icon Icon image
  Accessible without login Image file safari-icon.png Icon Icon image
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  examples  
File Role Description
  Accessible without login Plain text file simple.html Example Documentation
  Accessible without login HTML file simplejquery.html Doc. Documentation
  Accessible without login Plain text file simple_localvideo.html Example Documentation
  Accessible without login HTML file simple_localvideojquery.html Doc. Documentation
  Accessible without login Plain text file simple_selectmenu.html Example Documentation
  Accessible without login HTML file simple_selectmenujquery.html Doc. Documentation

  Files folder image Files  /  js  
File Role Description
  Plain text file expertcam.js Class Class source
  Plain text file expertcamjquery.js Class Class source
  Accessible without login Plain text file jquery.js Example Example script
  Accessible without login Plain text file MediaStreamRecorder.js Appl. Application script
  Accessible without login Plain text file page.js Test Unit test script
  Accessible without login Plain text file pagejquery.js Example Example script

  Files folder image Files  /  media  
File Role Description
  Accessible without login Image file edgeaudio.jpg Icon Icon image
  Accessible without login Image file hqdefault.jpg Icon Icon image
  Accessible without login Image file no_signal.png Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 96%
Total:207
This week:0
All time:225
This week:11Up