Icontem

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    
Last Updated Ratings Unique User Downloads Download Rankings
2018-01-06 (1 month ago) RSS 2.0 feedNot enough user ratingsTotal: 200 This week: 1All time: 237 This week: 17Up
Version License JavaScript version Categories
je5 0.0.63GNU 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.

Name: Juan Chaves <contact>
Classes: 1 package by
Country: Spain Spain
Age: 54
All time rank: 1167 in Spain Spain
Week rank: 18 Up1 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:200
This week:1
All time:237
This week:17Up