{"id":1936,"date":"2022-06-07T00:07:30","date_gmt":"2022-06-06T22:07:30","guid":{"rendered":"https:\/\/nuage.ch\/site\/?p=1936"},"modified":"2022-06-07T14:10:42","modified_gmt":"2022-06-07T12:10:42","slug":"streamer-une-camera-sur-internet","status":"publish","type":"post","link":"https:\/\/nuage.ch\/site\/streamer-une-camera-sur-internet\/","title":{"rendered":"Streamer une cam\u00e9ra sur internet"},"content":{"rendered":"\n

J’avais des cam\u00e9ras raspberry pi. Toutes les minutes je prenais une photo et je la stockait pour ensuite l’afficher sur mon site internet. Ayant refait l’isolation de ma maison, je n’ai jamais pris la peine de les remettre, mais suite \u00e0 la demande de plusieurs voisins qui appr\u00e9ciaient de venir sur mon site pour voir la situation \u00e0 Montpreveyres, je me suis dirig\u00e9 vers une nouvelle solution.

Installation de la cam\u00e9ra<\/strong>

J’ai achet\u00e9 une cam\u00e9ra sur digitec \u00e0 80.- de tr\u00e8s bonne qualit\u00e9, la Reolink RLC-410W<\/a> . J’ai mis sur mon routeur une ip statique. La cam\u00e9ra n’est pas ouverte sur l’ext\u00e9rieur.<\/p>\n\n\n\n

Apr\u00e8s l’avoir install\u00e9e, j’ai cherch\u00e9 le lien RTSP:
rtsp:\/\/{user}:{password}@{ipdelacam\u00e9ra}:554\/h264Preview_01_main
Beaucoup de cam\u00e9ras ont un lien similaire!

On peut ouvrir ce lien RTSP par exemple dans VLC (media, open network stream). Mais le lien RTSP ne peut pas \u00eatre vu directement dans un navigateur.

Installation d’un logiciel pour streamer la cam\u00e9ra sur un browser<\/strong><\/p>\n\n\n\n

Il y a un logiciel opensource permettant de voir une cam\u00e9ra sur un site internet (depuis un serveur linux): RTSPtoWeb<\/a>. J’ai cr\u00e9e un nouvel utilisateur sur mon serveur et je lance ce programme depuis cet utilisateur. ( go run *.go ).<\/p>\n\n\n\n

On peut rajouter diff\u00e9rents flux sur {ipdevotreserveur}:8083 – ce port n’est pas ouvert sur l’ext\u00e9rieur! J’ai donc rajout\u00e9 dessus mes diff\u00e9rentes cam\u00e9ras.<\/p>\n\n\n\n

Ouverture sur l’ext\u00e9rieur (sur https \/ s\u00e9curis\u00e9).<\/strong><\/p>\n\n\n\n

J’ai li\u00e9 mon nom de domaine cam.nuage.ch \u00e0 une ip dynamique correspondant \u00e0 mon syst\u00e8me \u00e0 la maison (CNAME). J’ai aussi configur\u00e9 mon routeur pour rediriger le port 80 (http) et 443 (https) sur ce syst\u00e8me.<\/p>\n\n\n\n

J’ai ensuite rajout\u00e9 depuis apache2 (le serveur d’application que j’utilise) un proxy sur ce port.
Je demande un mot de passe sauf pour le stream de la cam\u00e9ra!<\/p>\n\n\n\n

Dans \/etc\/apache2\/sites-available\/monsite.conf, j’ai mis:<\/p>\n\n\n\n

<VirtualHost *:80>   \n    ServerAdmin gabriel.klein@nuage.ch\n    ServerName cam.nuage.ch\n\n    <Location \/>\n        AuthType Basic\n        AuthName \"Restricted Content\"\n        AuthUserFile \/etc\/apache2\/htpasswd\n        Require valid-user\n        satisfy any\n        deny from all\n    <\/Location>\n\n    <Location \/stream\/19c5065b-8904-4293-9fe3-87858b5c0a8d\/channel\/0\/webrtc>\n        Allow from All\n        Satisfy Any\n    <\/Location>\n\n    <Location \/stream\/19c5065b-8904-4293-9fe3-87858b5c0a8d\/channel\/0\/hls>\n        Allow from All\n        Satisfy Any\n    <\/Location>\n\n    ProxyRequests On\n    ProxyPreserveHost on\n\n    ProxyPass \/ http:\/\/localhost:8083\/\n    ProxyPassReverse \/ http:\/\/localhost:8083\/\n\n\n    ErrorLog \/var\/log\/apache2\/error-cam.nuage.ch.log\n\n    # Possible values include: debug, info, notice, warn, error, crit,\n    # alert, emerg.\n    LogLevel warn\n\n    CustomLog \/var\/log\/apache2\/access-cam.nuage.ch.log combined\n<VirtualHost><\/code><\/pre>\n\n\n\n
Remplacez 19c5065b-8904-4293-9fe3-87858b5c0a8d par votre propre identifiant de cam\u00e9ra!<\/em><\/p>\n\n\n\n
Je red\u00e9marre mon serveur <\/p>\n\n\n\n
\/etc\/init.d\/apache2 reload).<\/p><\/blockquote>\n\n\n\n
Ensuite je s\u00e9curise mon serveur de cam\u00e9ra avec<\/p>\n\n\n\n
certbot -tvv –apache -m gabriel.klein@nuage.ch –redirect –hsts –uir –reinstall -d cam.nuage.ch<\/p><\/blockquote>\n\n\n\n
Je peux maintenant acc\u00e9der \u00e0 mon flux vid\u00e9o depuis <\/p>\n\n\n\n
https:\/\/cam.nuage.ch\/stream\/19c5065b-8904-4293-9fe3-87858b5c0a8d\/channel\/0\/hls\/live\/index.m3u8<\/a><\/p><\/blockquote>\n\n\n\n
Rajouter ma cam\u00e9ra sur wordpress \/ mon site internet<\/strong><\/p>\n\n\n\n
J’ai essay\u00e9 WebRtc, mais malheureusement pas compatible avec mon t\u00e9l\u00e9phone et certains navigateurs. Donc je me suis dirig\u00e9 sur le format HLS.<\/p>\n\n\n\n
J’ai rajout\u00e9 dans ma page wordpress un block html.<\/p>\n\n\n\n
<input type=\"hidden\" name=\"hls-url\" id=\"hls-url\" value=\"https:\/\/cam.nuage.ch\/stream\/19c5065b-8904-4293-9fe3-87858b5c0a8d\/channel\/0\/hls\/live\/index.m3u8\">\n\n<p><video id=\"wc-video\" autoplay=\"\" muted=\"\" playsinline=\"\" controls=\"\" style=\"max-width: 100%; max-height: 100%;\"><\/video><\/p>\n\n<script>\n\n      document.addEventListener('DOMContentLoaded', function () {\n        const videoEl = document.querySelector('#wc-video')\n        const hlsUrl = document.querySelector('#hls-url').value\n\n        if (Hls.isSupported()) {\n          const hls = new Hls()\n          hls.loadSource(hlsUrl)\n          hls.attachMedia(videoEl)\n        } else if (video.canPlayType('application\/vnd.apple.mpegurl')) {\n          videoEl.src = hlsUrl\n        }\n      })\n\n\n<\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\n<\/code><\/pre>\n\n\n\n
Remplacez 19c5065b-8904-4293-9fe3-87858b5c0a8d par votre propre identifiant de cam\u00e9ra!<\/em><\/p>\n\n\n\n
Et succ\u00e8s (apr\u00e8s quand m\u00eame plusieurs heures de recherche….).<\/p>\n\n\n\n
J’esp\u00e8re que cet article va vous aider, m\u00eame si il reste techniquement assez complexe.<\/p>\n","protected":false},"excerpt":{"rendered":"
J’avais des cam\u00e9ras raspberry pi. Toutes les minutes je prenais une photo et je la stockait pour ensuite l’afficher sur mon site internet. Ayant refait l’isolation de ma maison, je n’ai jamais pris la peine de les remettre, mais suite \u00e0 la demande de plusieurs voisins qui appr\u00e9ciaient de venir sur mon site pour voir […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[9,10,11],"tags":[],"class_list":["post-1936","post","type-post","status-publish","format-standard","hentry","category-embeeded","category-geek","category-linux-and-servers"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p50cYU-ve","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/posts\/1936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/comments?post=1936"}],"version-history":[{"count":1,"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/posts\/1936\/revisions"}],"predecessor-version":[{"id":2087,"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/posts\/1936\/revisions\/2087"}],"wp:attachment":[{"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/media?parent=1936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/categories?post=1936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nuage.ch\/site\/wp-json\/wp\/v2\/tags?post=1936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}