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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: Prendre des photos avec la webcam
slug: Web/API/WebRTC_API/Taking_still_photos
tags:
- API
- Avancé
- WebRTC
- getusermedia
translation_of: Web/API/WebRTC_API/Taking_still_photos
original_slug: WebRTC/Prendre_des_photos_avec_la_webcam
---
<h2 id="Introduction_et_demo">Introduction et demo</h2>
<p>Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir <a href="http://jsfiddle.net/codepo8/agaRe/4/">le code final en action dans JSFiddle</a>. Il y a aussi une version plus avancée pour charger des photos sur <strong>imgur</strong> en JavaScript, disponible en <a href="https://github.com/codepo8/interaction-cam/">code source sur GitHub</a> ou <a href="http://codepo8.github.com/interaction-cam/">en demo</a>.</p>
<h2 id="Les_balises_HTML">Les balises HTML</h2>
<p>La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.</p>
<pre class="brush:html;"><video id="video"></video>
<button id="startbutton">Prendre une photo</button>
<canvas id="canvas"></canvas>
<img src="http://placekitten.com/g/320/261" id="photo" alt="photo">
</pre>
<h2 id="Le_script_complet">Le script complet</h2>
<p>Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après.</p>
<pre class="brush:js;">(function() {
var streaming = false,
video = document.querySelector('#video'),
cover = document.querySelector('#cover'),
canvas = document.querySelector('#canvas'),
photo = document.querySelector('#photo'),
startbutton = document.querySelector('#startbutton'),
width = 320,
height = 0;
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
function takepicture() {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
})();</pre>
<h2 id="Les_explications_pas_à_pas.">Les explications pas à pas.</h2>
<p>Voici ce qui se passe.</p>
<h3 id="Fonction_anonyme">Fonction anonyme</h3>
<pre class="brush:js;">(function() {
var streaming = false,
video = document.querySelector('#video'),
cover = document.querySelector('#cover'),
canvas = document.querySelector('#canvas'),
photo = document.querySelector('#photo'),
startbutton = document.querySelector('#startbutton'),
width = 320,
height = 0;</pre>
<p>Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.</p>
<div class="warning">
<p><strong>Attention :</strong> À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.</p>
</div>
<h3 id="Obtenir_la_vidéo">Obtenir la vidéo</h3>
<p>Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:</p>
<pre class="brush:js;"> navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);</pre>
<p>Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback:</p>
<pre class="brush:js;"> navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);</pre>
<p>Firefox Nightly nécessite de définir la propriété <code>mozSrcObject</code> de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut <code>src</code>. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche.</p>
<h3 id="Redimensionner_la_vidéo">Redimensionner la vidéo</h3>
<p>Ensuite nous devons redimensionner la vidéo aux bonnes dimensions.</p>
<pre class="brush:js;"> video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);</pre>
<p>Nous nous abonnons à l'évènement <code>canplay</code> de la vidéo et lisons ses dimensions en utilisant <code>videoHeight</code> et <code>videoWidth</code>. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons <code>streaming</code> à true pour faire cette vérification une seule fois vu que l'évènement <code>canplay</code> se déclenchera à répétition.</p>
<p>C'est tout ce qu'il faut pour jouer la vidéo.</p>
<h3 id="Prendre_une_photo">Prendre une photo</h3>
<p>Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction <code>takepicture</code> function.</p>
<pre class="brush:js;"> startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);</pre>
<p>Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL.</p>
<pre class="brush:js;"> function takepicture() {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
})();</pre>
<p>C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox.</p>
<h2 id="Support">Support</h2>
<p>Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration:</p>
<ul>
<li>Entrez "about:config" dans la barre d'adresse et confirmez les changements</li>
<li>Trouver l'entrée "media.navigator.enabled" et positionnez la à true</li>
</ul>
|
