JE5: jQuery plugin to generate canvas, audio and video

Recommend this page to a friend!
  Info   Demos   Screenshots Screenshots   View files View files (26)   DownloadInstall with Composer Download .zip   Reputation   Support forum (2)   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 209 All time: 238 This week: 6Up
Version License JavaScript version Categories
je5 0.0.65GNU General Publi...1.10jQuery, Graphics, Audio, Video
Description Author

This is jQuery plugin to generate canvas, audio, video, save webcam captures and statistics.

It can generate HTML5 canvas elements rendering all sorts of graphics like lines, rectangles, circles, ovals, quadratic and bezier curves, areas filled with patterns, images and text.

I can save and view captures of images stored in a database on the server side.

The plugin can also generate audio and video HTML 5 elements to play streams from one or more sources in different formats, one time or in loops, showing or hiding controls, among other options.

Picture of Juan Chaves
Name: Juan Chaves <contact>
Classes: 1 package by
Country: Spain Spain
Age: 59
All time rank: 1197 in Spain Spain
Week rank: 6 Up2 in Spain Spain Up

Details
je5 ========== En este ejemplo añadimos la clase Drag and Drop a je5 Con la función getBrowser(): Capturamos el tipo de navegador. Iniciamos con startNow(): Una vez capturado la posición del cursor Llamamos a los métodos: moving() movingOrder() <pre> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;img src="https://www.je5.es/img/1.jpg" id="1" style="width:300px; top:100px; left:100px; position:absolute" /&gt; &lt;img src="https://www.je5.es/img/2.jpg" id="2" style="width:300px; top:150px; left:150px; position:absolute" /&gt; &lt;img src="https://www.je5.es/img/3.jpg" id="3" style="width:300px; top:200px; left:200px; position:absolute" /&gt; &lt;h1 style="font-family: Verdana; color: #fff; background-color: rgba(0, 0, 0, 0.3); padding-right: 10px; padding-left: 10px; font-size: 3.4em; margin-top: 0.5%;"&gt; je5 Drag and Drop%&lt;/h1&gt; &lt;script&gt; $('#1').je5({ sort:'dragDrop' }); $('#2').je5({ sort:'dragDrop' }); $('#3').je5({ sort:'dragDrop' }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </pre> Save Cam Captures En esta ocasión capturamos las imágenes de la web cam y las guardamos en una base de datos. https://github.com/jschaves/je5/tree/master/examples/save_cam_captures Ejemplo con Node.js: capture.html El objeto "media" con el valor capture es el encargado de activar la webcam <pre> &lt;script&gt; $('#video').je5({ sort:{media:'capture'},//select webcam att:{ video:true, audio:true, width:450, controls:false, muted:true }, capture:{ video_in:'video',//id capture video_out:'output',//id output img btton_id:'cap',//id button of capture img scale:0.2,//scale img x:0,//ini img x y:0//ini img y } }); setInterval( function () { document.getElementById('cap').click(); $.post('https://localhost:8000/capture',{ img:dataStreaming }, function(data, textStatus, jqXHR) { console.log(data); }); }, 9000); &lt;/script&gt; </pre> El objeto "capture.video_in" selecciona la etiqueta video html5 que queremos guardar los frames El objeto "capture.output" identidad de la etiqueta donde mostramos la captura El objeto "capture.btton_id" identidad del disparador de la captura El objeto "capture.scale" determina el tamaño de la imagen a capturar Los objetos "capture.x" y "capture.y" determina la posición de inicio de la imagen La función "setInterval" determinamos el tiempo que transcurre de una captura a otra y guardamos en la base de datos mediante la llamada al servidor https://localhost:8000/capture Hay que crear una tabla ejemplo archivo db.sql Lanzar el servidor con capture.js Para ver capturas lanzar otro servidor con view.js https://localhost:8001/view Hay otro ejemplo en php https://github.com/jschaves/je5/tree/master/examples/save_cam_captures/php <p><a href="https://github.com/jschaves/je5/tree/master/examples/save_cam_captures">Save WebCam captures examples PHP & NODE.JS</a></p> <p>Section "je5 Background Animate 100%"</p> <p>Section "Canvas"</p> <p>Section "SVG"</p> <p>Section "Animate"</p> <p>Section "Media"</p> <p>Section "Stats"</p> Audio, video, webcam, Stats Code example je5 Background Animate 100% <a href="https://je5.es/je5-background-animate-100.html">Demo "je5 Background Animate 100%"</a> <pre> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1 style="font-family: Verdana; color: #fff; background-color: rgba(0, 0, 0, 0.3); padding-right: 10px; padding-left: 10px; font-size: 3.4em; margin-top: 0.5%;"&gt; je5 Background Animate 100%&lt;/h1&gt; &lt;script&gt; $('html').je5({ sort:'background', attrs:{ type:'css', //frames src:[ 'https://je5.es/images/img-frames/1.png', 'https://je5.es/images/img-frames/2.png', 'https://je5.es/images/img-frames/3.png', 'https://je5.es/images/img-frames/4.png', 'https://je5.es/images/img-frames/5.png', 'https://je5.es/images/img-frames/6.png', 'https://je5.es/images/img-frames/7.png', 'https://je5.es/images/img-frames/8.png' ], change:{//optinal only animation mode time:160,//Time-out to next frame in ms rerun:100//Total repetitions of the animation } } }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </pre> Code example Stats Pie Graph <a href="https://je5.es/je5-stats-scalable-vector-graphics-stats-pie-graph.html">Demo "Media" Stats Pie Graph</a> <pre> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;je5 "stats" Scalable Vector Graphics stats Pie Graph&lt;/title&gt;&lt;meta charset="UTF-8"&gt; &lt;script src="https://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; &lt;script src="https://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"&gt;&lt;/script&gt; &lt;style&gt; svg { cursor: pointer; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;svg id="pie" style="display:none" width="100%" height="900" viewBox="193 8 710 1806"&gt;&lt;/svg&gt; &lt;script type="text/javascript"&gt; $('#pie').je5({ sort:'stats', draw:{ type:'pie', att:{ size:2,//scale pie data:{ squares:{//colored squares, and titles att:{ x:900, y:200, width:30, height:30 }, separation:50 }, perc:[//sharing percentages 10, 20, 30, 10, 10, 20 ], 'text-perc':{//style text percentages att:{ fill:'#fff', 'font-size':'180%', 'font-family':'Arial', 'text-anchor':'middle' }, position:1.1 }, 'text-titles':{//style text titles att:{ x:944, y:226, fill:'red', 'font-size':'180%', 'font-family':'Arial', 'text-anchor':'start' }, separation:50 }, balloon:{//balloons over portions att:{ width:540, height:100, fill:'#fff', opacity:0.7, stroke:'#41f', 'stroke-width':5, rx:3, ry:3 }, separation:50, text:{//style text balloons fill:'red', 'font-size':'135%', 'font-family':'Arial', 'text-anchor':'start' }, text_separation:{ x:40, y:30 }, comments:{ fill:'#000', 'font-size':'140%', 'font-family':'Arial', 'text-anchor':'start' }, comments_separation:{ x:10, y:60 } }, attrs:{/* it is not mandatory, only if you want some specific colors fill:[ 'purple', 'blue', 'orange', '#000', '#ccc', '#ddd' ],*/ 'stroke':[ '#fff', '#fff', '#fff', '#fff', '#fff', '#fff' ], 'stroke-width':[ 2, 2, 2, 2, 2, 2 ], titles:[ 'Cats:', 'Ducks:', 'Dolphins:', 'Horses:', 'Dogs:', 'Eagles:' ], comments:[ ' &#9632; Domestic carnivorous mammal round head', ' &#9632; Aquatic birds Anseriformes flattened peak', ' &#9632; Whales and 2-3 m long, with large head', ' &#9632; Mammal perissodactyle about 1,5 m. in height', ' &#9632; Domestic carnivorous mammal of the family Canidae', ' &#9632; raptors hawks, approximately 2 m wingspan' ] } } } } }).show('slow'); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </pre> Code example WebCam <a href="https://je5.es/plugin-jquery-je5-media-section/jquery-je5-media-plugin-jquery-je5-media-webcam-examples-html.html">Demo "Media" WebCam je5</a> <pre> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="https://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; &lt;script src="https://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"&gt;&lt;/script&gt; &lt;title&gt;Instant video and webcam with JE5 "MEDIA"&lt;/title&gt; &lt;meta charset="utf8"&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td colspan="2"&gt;&lt;h1&gt;Instant webcam photo with je5 "Media" Chrome 32.0.1700.102 m Firefox 27.0&lt;/h1&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;video id="video" autoplay&gt;&lt;/video&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div style="border: solid 1px #ccc; padding: 10px; text-align: center;position:relative"&gt; &lt;p&gt;&lt;button id="cap"&gt;&lt;h2&gt;Capture Photo&lt;/h2&gt;&lt;/button&gt;&lt;/p&gt; &lt;div id="output" style="display: inline-block; top: 4px; position: relative ;border: dotted 1px #ccc; padding: 2px;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt;deo:true, $('#video').je5({ sort:{media:'capture'},//select webcam att:{ video:true, audio:true, width:450, controls:false, muted:true }, capture:{ video_in:'video',//id capture video_out:'output',//id output img btton_id:'cap',//id button of capture img scale:0.7,//scale img x:0,//ini img x y:0//ini img y } }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </pre> Mores examples: <a href="https://je5.es">je5 site</a>
  drag_and_dropExternal page   je5 Background AnimateExternal page   je5 homeExternal page  

Open in a separate window

Open in a separate window

Open in a separate window

Screenshots  
  • slideshow_je5.png
  • je5
  Files folder image Files  
File Role Description
Files folder imageexamples (3 directories)
Accessible without login HTML file animate-canvas-je5 Example Animate image canvas je5
Accessible without login HTML file class_html5_examples.html Example class html5 je5 demo
Accessible without login Plain text file CODE_OF_CONDUCT.md Data Auxiliary data
Accessible without login Plain text file CONTRIBUTING.md Data Auxiliary data
Accessible without login HTML file example_webcam_photo_je5.html Example Example webcam photo je5
Accessible without login HTML file je5-background-animate Example je5 Background Animate 100%
Accessible without login HTML file je5_media_audio.html Example Plugin jquery-je5 - Media - Audio Example
Accessible without login Plain text file LICENSE Example Example script
Plain text file plugin-jquery-je5-beta.0.2.1.3.js Class Add the Statistics section "Stats", starting Stats Pie Graph
Accessible without login Plain text file README.md Data Auxiliary data
Accessible without login HTML file stats-bar-graph-je5 Example Stats Bar Graph je5
Accessible without login HTML file stats-lines-graph-je5 Example Lines Stats Graph
Accessible without login HTML file stats-pie-graph-je5 Example Stats Pie Graph je5
Accessible without login HTML file svg-je5-scalable-vector-raphics Example Plugin jquery-je5 - SVG "Scalable Vector Graphics"

  Files folder image Files  /  examples  
File Role Description
Files folder imagebackground_animate (1 file)
Files folder imagedrad_and_drop (1 file)
Files folder imagesave_cam_captures (2 directories)

  Files folder image Files  /  examples  /  background_animate  
File Role Description
  Accessible without login HTML file je5-background-animate-100.html Doc. Documentation

  Files folder image Files  /  examples  /  drad_and_drop  
File Role Description
  Accessible without login HTML file je5-drag-and-drop.html Doc. Documentation

  Files folder image Files  /  examples  /  save_cam_captures  
File Role Description
Files folder imagenode.js (6 files)
Files folder imagephp (4 files)

  Files folder image Files  /  examples  /  save_cam_captures  /  node.js  
File Role Description
  Accessible without login HTML file capture.html Doc. Documentation
  Accessible without login Plain text file capture.js Example Example script
  Accessible without login Plain text file db.sql Data Auxiliary data
  Accessible without login Plain text file package.json Data Auxiliary data
  Accessible without login Plain text file play.js Example Example script
  Accessible without login Plain text file view.js Example Example script

  Files folder image Files  /  examples  /  save_cam_captures  /  php  
File Role Description
  Accessible without login HTML file capture.html Doc. Documentation
  Accessible without login Plain text file capture.php Data Auxiliary data
  Accessible without login Plain text file db.sql Data Auxiliary data
  Accessible without login Plain text file view.php Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 60%
Total:209
This week:0
All time:238
This week:6Up