Présentation faite lors du meetup #parisjs de mai 2011. Un article en français (et un autre en anglais) sont à venir, avec plus de détails.

1. Capture vidéo avec
HTML5
#ParisJS — 25 Mai 2011
Thomas Bassetto — @tbassetto

2. • HTML5 == buzzword // true
• L’audio, une autre fois

3. Introduction
• Pourquoi ? Tchat, avatar, etc.
• ~ 3 specs + 10 implémentations
• Desktop, Mobile, Runtimes
• Flash le fait depuis au moins 2005
• “Débuts” en 2008 (Mozilla camera://,
Google Gears)

4. W3C

5. DAP WG au W3C
• Device APIs and Policy Working Group
• HTML Media Capture + Media Capture API

6. HTML Media Capture
<input type="file" accept="image/*">
<input type="file" accept="image/*"
capture="camera">
capture = camera, camcorder,
microphone, filesystem

7. Media Capture API
navigator.device.capture.capture
Image(success, error, { limit:
1 });
navigator.device.capture.support
edImageFormats;

8. Implémentations
• Android Stock Browser
• PhoneGap

9. Android
<input type="file"
accept="image/
*;capture=camera">
</input>

10. PhoneGap
navigator.device.capture.capture
Image(success, error, { limit:
1 });
navigator.device.capture.support
edImageModes;

11. WHATWG

12. HTML Living Standard
• Video conferencing and peer-to-peer
communication
• Stream API
• PeerConnection

13. Code
window.navigator.getUserMedia
(options, successCallback [,
errorCallback ] );

14. Code
stream.label
stream.stop()
stream.audioTracks
stream.videoTracks
stream.getRecordedData(callback)

15. Code
window.URL.createObjectURL
(stream);

16. Implémentations
• Opera
• WebKit bientôt ?

17. WAC

18. Wholesale Applications
Community
• OMPT BONDI + JIL => WAC
• ~ 50 membres : opérateurs et
constructeurs
• WAC 1.0 et WAC 2.0

19. Code — WAC 1.0
Widget.Multimedia.Camera.capture
Image("/home/usr1/a.jpg",
false);
Widget.Multimedia.Camera.onCamer
aCaptured = myCallBack;

20. Code — WAC 2.0
var mainCamera;
var pendop = deviceapis.camera.getCameras
(onCamerasObtained, onGetCamerasError);
mainCamera = cams[0];
var op = mainCamera.captureImage(onCaptureImageSuccess,
onCaptureImageError, {destinationFilename:"images/
a.jpg", highRes:true});
// startVideoCapture()

21. Implémentations
WAC Spec Version Runtime Vendor Device OS
WAC 2.0 beta Aplix Android 2.2+
WAC 1.0 & 2.0 beta Borqs Android 2.2+
WAC 1.0 Obigo Android 2.2x
WAC 1.0 & 2.0 beta Opera Android 2.1+

22. Ericsson Labs

23. Juste pour les yeux
• Travail sur WebKit
• 5 articles
• Aucun code ou binaire public

24. Code
<script>
window.onload = function () {
var videoDevice = document.getElementById
("video_device");
videoDevice.onchange = function (evt) {
var videoStream = this.data;
var video = document.getElementById("video");
video.src = videoStream.url;
video.play();
};
}
</script>
<device type="video_capture" id="video_device"></device>
<video width="320" height="240" id="video" controls />

25. Code
var transceiver = new MediaStreamTransceiver("ws://
150.132.141.60:8880/delayswitch?sid=0");
// dans le onchange
transceiver.localStream = videoStream;
transceiver.onconnect = function () {
var remoteVideo = document.getElementById
("remote_video");
remoteVideo.src = transceiver.remoteStream.url;
remoteVideo.play();
};

26. Mozilla

27. Rainbow
• Projet de Mozilla Labs
• API perso
• Extension disponible pour Firefox 4
• /! (sur Mac Firefox doit être lancé en 32-
bit)

28. Code
window.navigator.media.beginSession(params, ctx, observer);
function observer(type, data)
{
switch (type) {
case "session-began": window.navigator.media.beginRecord();
break;
case "record-began": break;
case "record-ended": break;
case "record-finished": break;
case "session-ended": break;
}
}
// endRecord() // fetchImage()

29. Démos
• https://photobooth.mozillalabs.com/
• https://theband.mozillalabs.com/theband.html

30. Les autres

31. En JavaScript aussi
• BlackBerry® WebWorks™
• Nokia WRT pour Symbian

32. Conclusion
“Il est probable que la Media Capture API s'aligne sur getUserMedia() de WHAT, ou
quelque chose du genre — c'est une question de priorité accordée par les
participants.
Au final, le W3C publiera forcément autour du stream, et ça sera en accord avec le
WHAT. Aussi, le W3C vient de lancer un groupe Real Time Web qui va traiter (avec
l'IETF) de beaucoup d'aspects du streaming.”
— Un membre du DAP Working Group :)
Prédiction : Spécifications stabilisées et implémentations plus solides fin 2012, début
2013.