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    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 252 All time: 188 This week: 4Up
Version License JavaScript version Categories
expert-camera-js 1.0.13MIT/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

Picture of Andras Toth
  Performance   Level  
Name: Andras Toth <contact>
Classes: 22 packages by
Country: Hungary Hungary
Age: 49
All time rank: 31 in Hungary Hungary
Week rank: 1 Up
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:252
This week:0
All time:188
This week:4Up