Déclenchement action sur bouton

Version imprimable

Bonjour a tous,

J'a récupéré un script permettant de lancer la caméra de l'utilisateur et de faire une photo.
J'aimerai que la photo prise soit enregistrée dans un dossier particulier au moment ou je clique sur le bouton "Enregistrer photo !".
Cependant, je ne sais pas comment m'y prendre. Est ce que quelqu'un aurait'il une idée svp ?

Voici les infos qui se trouve dans le body de mon fichier index.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<body>
 
  <div id="container">
 
<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<button id="enregistre">Enregistrer photo !</button>
<canvas id="snapshot" width=320 height=240></canvas>
 
<script>
  var player = document.getElementById('player'); 
  var snapshotCanvas = document.getElementById('snapshot');
  var captureButton = document.getElementById('capture');
  var EnregistrerButton = document.getElementById('enregistre');
 
  var handleSuccess = function(stream) {
    // Attach the video stream to the video element and autoplay.
    player.src = URL.createObjectURL(stream);
  };
 
  captureButton.addEventListener('click', function() {
    var context = snapshot.getContext('2d');
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, snapshotCanvas.width, snapshotCanvas.height);
  });
 
  EnregistrerButton.addEventListener('click', function() {
 
 
 
 
  }) ;
 
  navigator.mediaDevices.getUserMedia({ audio: false, video: true })
      .then(handleSuccess);
 
</script>
 
  </div>
 
  <script src="../../../js/adapter.js"></script>
  <script src="../../../js/common.js"></script>
  <script src="js/main.js"></script>
 
  <script src="../../../js/lib/ga.js"></script>
 
</body>

Je ne sais pas quoi mettre dans la partie "EnregistrerButton" pour déclencher l'enregistrement de la photo qui est stocké dans la balise canvas.

Merci d'avance pour votre aide.
Cordialement

Je viens de tenter ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
  EnregistrerButton.addEventListener('click', function() {
	var dataURL = snapshot.toDataURL("image/png");
				 $.ajax({
						type: "post",
						url:  "save_to_img.php",
						data: {'img_data' : dataURL },
						success: function(data){
								alert('Enregistrement effectué !');
						}
				}); 
  }) ;

mais j'ai une erreur au niveau du $.ajax : "$ is not defined"

Est ce que quelqu'un aurait-il une idée svp ?

Merci d'avance
Cordialement,

Voici le fichier qui fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
 
  <base target="_blank">
 
  <title>Prendre une photo</title>
 
 
 
</head>
 
<body>
 
  <div id="container">
 
  <script src="js/jquery-1.11.0.min.js"></script>
 
<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<button id="enregistre">Enregistrer photo !</button>
<canvas id="snapshot" width=320 height=240></canvas>
 
<script>
  var player = document.getElementById('player'); 
  var snapshotCanvas = document.getElementById('snapshot');
  var captureButton = document.getElementById('capture');
  var EnregistrerButton = document.getElementById('enregistre');
 
  var handleSuccess = function(stream) {
    // Attach the video stream to the video element and autoplay.
    player.src = URL.createObjectURL(stream);
  };
 
  captureButton.addEventListener('click', function() {
    var context = snapshot.getContext('2d');
    context.drawImage(player, 0, 0, snapshotCanvas.width, snapshotCanvas.height);
  });
 
 
  EnregistrerButton.addEventListener('click', function() {
	var dataURL = snapshot.toDataURL("image/png");
				 $.ajax({
						type: "post",
						url:  "save_to_img.php",
						data: {'img_data' : dataURL },
						success: function(data){
								alert('Enregistrement effectué !');
						}
				}); 
  });
 
  navigator.mediaDevices.getUserMedia({ audio: false, video: true })
      .then(handleSuccess);
</script>
 
  </div>
 
</body>
</html>

Il manquait le lien vers le fichier JS pour que le $ soit interprété correctement !

Ciao