File "webcam.html"
Full Path: /home/analogde/www/New/update/webcam.html
File size: 5.24 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta charset="UTF-8" />
<title>Accès caméra en HTML5 avec getUserMedia() - Doc’ Alex</title>
<meta name="description" content="Test caméra HTML5" />
<meta name="keywords" content="HTML5,webcam,cybercaméra,caméra,getUserMedia,device,multimédia,vidéo,MediaStream" />
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
<link rel="stylesheet" type="text/css" href="../../styles/general.css" title="Normal" />
<link rel="author" href="../../cv/" title="Alexandre Alapetite" />
<link rel="start" href="../../index.fr.html" />
<link rel="up" href="../index.fr.html" />
<link rel="shortlink" href="http://a80.fr/cam" />
<link rel="alternate" hreflang="en-GB" href="index.en.html" xml:lang="en-GB" title="HTML5 webcam demo with getUserMedia() in English" />
<style type="text/css">
input { font-size:x-large; }
</style>
</head>
<body>
<address><small>par <a href="../../cv/alexandre-alapetite.fr.html">Alexandre Alapetite</a> le 2012-06-02 ;
mis à jour le 2012-10-08</small></address>
<h1>Accès caméra en HTML5 avec <code>getUserMedia()</code></h1>
<h2>Introduction</h2>
<div class="langue"><a href="index.en.html" rel="alternate" hreflang="en-GB"><img src="../../images/en.gif" alt="English" width="34" height="34" /></a></div>
<p>
Voici une démonstration de l’accès caméra depuis une page Web en HTML5,
en utilisant la fonction standard <a href="http://www.w3.org/TR/mediacapture-streams/" rel="external" hreflang="en"><code>getUserMedia()</code></a>.
</p><p>
Testé avec succès depuis :
</p>
<ul>
<li>Opera 12, Opera 12 Mobile</li>
<li>Chrome 21 à 24</li>
<li>Firefox 16.0a1 (pas de prise de photo), 17.0a1 à 18.0a1</li>
</ul>
<hr class="n2"/>
<h2 id="demo">Démonstration</h2>
<pre id="preLog">Chargement…</pre>
<p><video id="video" autoplay="autoplay"></video></p>
<p><input type="button" id="buttonSnap" value="Prendre une photo" disabled="disabled" onclick="snapshot()" /></p>
<p>
<input type="button" id="buttonStart" value="Démarrer" disabled="disabled" onclick="start()" />
<input type="button" id="buttonStop" value="Arrêter" disabled="disabled" onclick="stop()" />
</p>
<p><canvas id="canvas"></canvas></p>
<div class="sb"><a href="http://alexandre.alapetite.fr" title="Site Web original" class="top">http://alexandre.alapetite.fr</a></div>
<hr />
<p><a href="../index.fr.html">Retour</a></p>
<script type="text/javascript">//<![CDATA[
"use strict";
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var videoStream = null;
var preLog = document.getElementById('preLog');
function log(text)
{
if (preLog) preLog.textContent += ('\n' + text);
else alert(text);
}
function snapshot()
{
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
}
function noStream()
{
log('L’accès à la caméra a été refusé !');
}
function stop()
{
var myButton = document.getElementById('buttonStop');
if (myButton) myButton.disabled = true;
myButton = document.getElementById('buttonSnap');
if (myButton) myButton.disabled = true;
if (videoStream)
{
if (videoStream.stop) videoStream.stop();
else if (videoStream.msStop) videoStream.msStop();
videoStream.onended = null;
videoStream = null;
}
if (video)
{
video.onerror = null;
video.pause();
if (video.mozSrcObject)
video.mozSrcObject = null;
video.src = "";
}
myButton = document.getElementById('buttonStart');
if (myButton) myButton.disabled = false;
}
function gotStream(stream)
{
var myButton = document.getElementById('buttonStart');
if (myButton) myButton.disabled = true;
videoStream = stream;
log('Flux vidéo reçu.');
video.onerror = function ()
{
log('video.onerror');
if (video) stop();
};
stream.onended = noStream;
if (window.webkitURL) video.src = window.webkitURL.createObjectURL(stream);
else if (video.mozSrcObject !== undefined)
{//FF18a
video.mozSrcObject = stream;
video.play();
}
else if (navigator.mozGetUserMedia)
{//FF16a, 17a
video.src = stream;
video.play();
}
else if (window.URL) video.src = window.URL.createObjectURL(stream);
else video.src = stream;
myButton = document.getElementById('buttonSnap');
if (myButton) myButton.disabled = false;
myButton = document.getElementById('buttonStop');
if (myButton) myButton.disabled = false;
}
function start()
{
if ((typeof window === 'undefined') || (typeof navigator === 'undefined')) log('Cette page requiert un navigateur Web avec les objets window.* et navigator.* !');
else if (!(video && canvas)) log('Erreur de contexte HTML !');
else
{
log('Demande d’accès au flux vidéo…');
if (navigator.getUserMedia) navigator.getUserMedia({video:true}, gotStream, noStream);
else if (navigator.oGetUserMedia) navigator.oGetUserMedia({video:true}, gotStream, noStream);
else if (navigator.mozGetUserMedia) navigator.mozGetUserMedia({video:true}, gotStream, noStream);
else if (navigator.webkitGetUserMedia) navigator.webkitGetUserMedia({video:true}, gotStream, noStream);
else if (navigator.msGetUserMedia) navigator.msGetUserMedia({video:true, audio:false}, gotStream, noStream);
else log('getUserMedia() n’est pas disponible depuis votre navigateur !');
}
}
start();
//]]></script>
</body>
</html>