Comment intégrer une webcam live sur votre site : Guide complet
Ajouter un flux webcam live à votre site permet streaming temps réel pour événements, monitoring, ou expériences interactives. Guide pratique d'implémentation.
Prérequis
- Webcam fonctionnelle (USB, caméra IP, ou intégrée)
- Serveur web ou hébergement (mutualisé, VPS, cloud)
- Connaissances base HTML/JavaScript
- Logiciel ou service streaming
Méthode 1 : Logiciel streaming + Embed (Recommandé)
Avec OBS Studio (Gratuit, Open Source)
- Installez OBS Studio sur ordinateur connecté à la webcam.
- Ajoutez source « Périphérique capture vidéo » → sélectionnez votre webcam.
- Configurez sortie : Paramètres → Diffusion → « Personnalisé » → entrez votre serveur streaming (voir ci-dessous).
- Lancez diffusion dans OBS.
Options serveur streaming
- Auto-hébergé : OBS WebSocket + NodeMediaServer (RTMP) ou MediaMTX (SRT/RTMP/HLS). Nécessite compétences admin serveur.
- Services gérés : Mux, Livepeer, Cloudflare Stream, Vimeo Livestream, StreamYard. Plus simple ; fournissent codes embed.
- Plateformes sociales : YouTube Live, Twitch, Facebook Live — récupérez code embed depuis leurs options « Partager ».
Méthode 2 : WebRTC (Navigateur-à-navigateur, pas de serveur)
Pour pair-à-pair simple ou petites audiences, utilisez WebRTC avec serveur signalisation. Librairies : PeerJS, simple-peer. Plus complexe à scaler.
Intégrer le flux
HLS (HTTP Live Streaming) — Plus compatible
<video id="webcam" controls playsinline> <source src="https://your-stream.m3u8" type="application/x-mpegURL"> Votre navigateur ne supporte pas HLS. </video> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script> <script> if (Hls.isSupported()) { var video = document.getElementById('webcam'); var hls = new Hls(); hls.loadSource('https://your-stream.m3u8'); hls.attachMedia(video); } </script>Embed Mux / Cloudflare Stream / Vimeo
Utilisez leur iframe ou SDK player JavaScript fourni.
Considérations critiques
- Vie privée/RGPD/CCPA : Informez visiteurs, obtenez consentement si enregistrement, évitez capturer non-consentants.
- Bande passante/Coûts : Streaming consomme bande sortante significative. Surveillez usage plans payants.
- Sécurité : Streams authentifiés (URLs signées, tokens) pour flux privés. Désactivez listing répertoire.
- Fallback : Fournissez image statique ou message « hors ligne » quand flux down.
- Mobile : Testez iOS Safari (requiert
playsinline) et Android Chrome.
Alternative plus simple : Rafraîchissement image statique
Pour mises à jour basse fréquence (météo, chantier), utilisez script qui FTP/HTTP POST snapshots depuis caméra vers votre serveur, puis affichez avec rafraîchissement JavaScript :
<img id="cam" src="latest.jpg?nocache=1"> <script>setInterval(()=>document.getElementById('cam').src='latest.jpg?'+Date.now(),30000)</script>