Outils pour utilisateurs

Outils du site


diffusion_video_live_-_streaming

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
diffusion_video_live_-_streaming [2019/04/20 13:52]
Benjamin Labomedia
diffusion_video_live_-_streaming [2020/05/14 20:03] (Version actuelle)
Benjamin Labomedia
Ligne 64: Ligne 64:
  
   * **** {{:​Icecast_vlc.png|fig:​Icecast_vlc.png}}   * **** {{:​Icecast_vlc.png|fig:​Icecast_vlc.png}}
-== **Avec OBS Studio vers un serveur Icecast** ==+==Avec OBS Studio vers un serveur Icecast ​et / ou youtube ​==
 +Open Broadcast Studio est un super soft libre pour le streaming audio vidéo https://​obsproject.com/​fr  ​
   * Un bon tutoriel : https://​epir.at/​2018/​03/​08/​obs-icecast-streaming/​   * Un bon tutoriel : https://​epir.at/​2018/​03/​08/​obs-icecast-streaming/​
   * Un paquet Obs-studio prêt à l'​emploi pour Debian Stretch {{ ::​obs-studio_20190420-git-1_amd64.deb |}}   * Un paquet Obs-studio prêt à l'​emploi pour Debian Stretch {{ ::​obs-studio_20190420-git-1_amd64.deb |}}
 +
 +Pour utiliser OBS pour envoyer un stream à icecast, il faut feinter et utiliser la fonction enregistrement plutôt que streaming (du coup ça permet de streamer vers icecast et youtube en même temps !), avec les paramètres ci-dessous
 {{::​osbconfig.png?​direct&​600|}} {{::​osbconfig.png?​direct&​600|}}
 {{::​obsstudioconfigicecastlabomedia.png?​direct&​600|}} {{::​obsstudioconfigicecastlabomedia.png?​direct&​600|}}
 +
 +**Les configurations :**
 +Type : Sortie Personnalisée (FFmpeg)
 +Chemin d'​accès ou URL
 +<​code>​icecast://​source:​****@labomedia.org:​8000/​video.ts</​code>​
 +Format du conteneur : mpegts
 +Paramètre du muxer 
 +  content_type=video/​m2ts ice_genre='​6-Hidden'​ ice_name='​labomedia video stream'​ ice_description=event ice_url='​https://​labomedia.org'​
 +  ​
 +Débit vidéo : voir [[https://​support.google.com/​youtube/​answer/​2853702?​hl=en|les débits conseillés sur youtube en fonction de la résolution]]
 +  4500 Kbps
 +Intervalle d'​images clefs 
 +  50
 +Encodeur vidéo : libx264
 +Débit audio
 +  160 Kbps
 +Encodeur audio : aac
  
 Pour compléter la config et donner un genre, un titre au stream, dans les "​Paramètres du muxer",​ on peut mettre : Pour compléter la config et donner un genre, un titre au stream, dans les "​Paramètres du muxer",​ on peut mettre :
   content_type=video/​m2ts ice_genre='​numerique'​ ice_name='​je m appelle stream'​ ice_description=beau ice_url='​https://​labomedia.org'​   content_type=video/​m2ts ice_genre='​numerique'​ ice_name='​je m appelle stream'​ ice_description=beau ice_url='​https://​labomedia.org'​
   ​   ​
-== **sinon en ligne de commande** ==+Pour compiler [[https://​github.com/​obsproject/​obs-studio/​wiki/​Install-Instructions#​debian-based-build-directions|OBS sous Debian 9]], il faut upgrader CMAKE comme cela : https://​askubuntu.com/​questions/​829310/​how-to-upgrade-cmake-in-ubuntu 
 + 
 +Pour envoyer un flux depuis OBS-Studio: [[https://​obsproject.com/​forum/​resources/​obs-studio-send-an-udp-stream-to-a-second-pc-using-obs.455/​|Send an UDP Stream to a second PC using OBS]] 
 + 
 +=== sinon en ligne de commande ​===
  
   vlc -vv /​home/​bbk/​dvd/​movie.avi :​sout=#​transcode{vcodec=theora,​vb=256,​scale=1,​acodec=vorbis,​ab=32,​channels=1}:​std{access=shout,​mux=ogg,​url=videosource:​passwd@laboratoryplanet.org:​8000}   vlc -vv /​home/​bbk/​dvd/​movie.avi :​sout=#​transcode{vcodec=theora,​vb=256,​scale=1,​acodec=vorbis,​ab=32,​channels=1}:​std{access=shout,​mux=ogg,​url=videosource:​passwd@laboratoryplanet.org:​8000}
Ligne 112: Ligne 136:
   * Les ressources de giss.tv : http://​giss.tv/​wiki/​index.php/​Streaming_Tools   * Les ressources de giss.tv : http://​giss.tv/​wiki/​index.php/​Streaming_Tools
  
-=== Intégrer son stream video dans une page web ===+==== Intégrer son stream video dans une page web ====
  
 **Mode HTML5** **Mode HTML5**
 +<code html>
 <​HTML>​ <​HTML>​
 <video width="​320"​ height="​240"​ controls=""​ src="​http://​laboratoryplanet.org:​8000/​labo.ogg"​ autoplay=""​ tabindex="​0">​ <video width="​320"​ height="​240"​ controls=""​ src="​http://​laboratoryplanet.org:​8000/​labo.ogg"​ autoplay=""​ tabindex="​0">​
 </​video>​ </​video>​
 </​HTML>​ </​HTML>​
-**Code pour compatibilité HTML4 avec applet cortado comme lecteur alternatif**+</​code>​
  
-<​HTML>​ +==== Transcoder un stream provenant de OBS via Icecast et l'​intégrer dans une page web avec un player HTML5 ==== 
-<video width="​480"​ height="​360"​ controls=""​ src="​http://​laboratoryplanet.org:​8000/​labo.ogg"​ autoplay=""​ tabindex="​0">​ +On transcode la vidéo provenant de OBS pour la transformer au format HLS, du stream transporté par HTTP 
-</​HTML>​ +  ​ffmpeg -i http://stream.p-node.org/flusser.ts -s 640x400 -c:v libx264 -f ssegment -hls_flags delete_segments -segment_list playlist.m3u8 -segment_list_type hls -segment_list_size 10 -segment_list_flags +live -segment_time 10 out_%6d.ts
-<​html><​applet width="​480"​ height="​360"​ mayscript=""​ id="​cortado"​ archive="​cortado.jar"​ codebase="​http://giss.tv/​dmmdb//​cortado"​ code="​com.fluendo.player.Cortado.class"><​param value="​http://​laboratoryplanet.org:8000/labo.ogg" name="​url"><​param value="​true"​ name="​local"><​param value="​true"​ name="​keepAspect"><​param value="​true"​ name="​video"><​param value="​true"​ name="​audio"><​param value="​64"​ name="​bufferSize"><​param value="​16"​ name="​statusHeight"><​param value="​auto"​ name="​showStatus"><​param value="​true"​ name="​seekable"><​param value="​113"​ name="​duration"></​applet></​html><​a_espace_href="​http://giss.tv/​dmmdb//​com.fluendo.player.Cortado.class"​ class="​rlarqfzxhwppnvznpczc"><​html></​a></​html>​+
  
-<HTML>+On intégre la vidéo transcodée à l'aide d'un player HTML5 + javascript 
 +<code> 
 +<​!DOCTYPE html> 
 +<​html>​ 
 +<​head>​ 
 +<meta charset=utf-8 /> 
 +<​title>​videojs-contrib-hls embed</​title>​ 
 + 
 +<link href="//​vjs.zencdn.net/​7.3.0/​video-js.min.css"​ rel="​stylesheet">​ 
 +<script src="//​vjs.zencdn.net/​7.3.0/​video.min.js"></​script>​ 
 + 
 +</​head>​ 
 +<​body>​ 
 +  <​h1>​Video.js Example Embed</​h1>​ 
 + 
 +<video id=flusser-video width=640 height=400 class="​video-js vjs-default-skin"​ poster="​../​flusser/​Vilem_Flusser_1940.jpg"​ controls autoplay="​true"​ preload="​auto">​ 
 +  <​source 
 +     ​src="​playlist.m3u8"​ 
 +     ​type="​application/​x-mpegURL"​>
 </​video>​ </​video>​
-</HTML+<script src="​videojs.hls.min.js">​</script
-Attention, remplacer ​dans le code précédent ​<a_espace_href="​http://giss.tv/dmmdb//com par "a href"+<​script>​ 
 +var player = videojs('​flusser-video'​);​ 
 +player.play();​ 
 +</​script>​ 
 + 
 +<p> la ligne de commande brute de transcodage coté serveur : ffmpeg -i http://​stream.p-node.org/​flusser.ts -s 640x400 -c:v libx264 -f ssegment -hls_flags delete_segments -segment_list playlist.m3u8 -segment_list_type hls -segment_list_size 10 -segment_list_flags +live -segment_time 10 out_%6d.ts à lancer ​dans le répertoire où se trouve la page</p> 
 +</​body>​ 
 +</​html>​ 
 +</​code>​ 
 +Voir plus plus d'​infos : 
 +  * http://videojs.github.io/videojs-contrib-hls/ 
 +  * https://​stackoverflow.com/​questions/​39431714/​ffmpeg-transcode-to-live-stream 
 +  * https://​docs.videojs.com/​tutorial-setup.html 
 +  * https://​github.com/​videojs/​videojs-contrib-hls 
 +  * Tuner icecast pour OBS https://​epir.at/​2018/​03/​08/​obs-icecast-streaming/​ 
  
-http://laboratoryplanet.org:8000/labo.ogg+==== Streaming vidéo sur Android ==== 
 +  * Possible avec [[https://f-droid.org/en/​packages/​info.dvkr.screenstream/​|ScreenStream logiciel Android]] qui envoie l'​écran de l'​Android (pas le son) en streaming
  
 ==== Faire du streaming vers les smartphones et tablettes via la balise video en HTML5 ==== ==== Faire du streaming vers les smartphones et tablettes via la balise video en HTML5 ====
Ligne 138: Ligne 195:
 === Etat des lieux des possibilités === === Etat des lieux des possibilités ===
  
-  * http://​blogs.technet.com/​b/​stanislas/​archive/​2011/​06/​21/​html5-ce-qu-il-faut-savoir-sur-la-balise-video.aspx+  * [[http://​blogs.technet.com/​b/​stanislas/​archive/​2011/​06/​21/​html5-ce-qu-il-faut-savoir-sur-la-balise-video.aspx|blogs.technet.com:​ html5 ce qu'il faut savoir sur la balise video]]
   * http://​www.flumotion.com/​blog/​the-current-state-of-html5-video   * http://​www.flumotion.com/​blog/​the-current-state-of-html5-video
  
 Du stream en H264 Du stream en H264
  
-  * via gstreamer http://​gstreamer.freedesktop.org/​data/​doc/​gstreamer/​head/​gst-plugins-ugly-plugins/​html/​gst-plugins-ugly-plugins-x264enc.html+  * via gstreamer: [[http://​gstreamer.freedesktop.org/​data/​doc/​gstreamer/​head/​gst-plugins-ugly-plugins/​html/​gst-plugins-ugly-plugins-x264enc.html|gstreamer.freedesktop.org gst plugins ugly plugins x264enc]]
     * d'​autres ressources sur gstreamer http://​blog.nicolargo.com/​gstreamer     * d'​autres ressources sur gstreamer http://​blog.nicolargo.com/​gstreamer
     * installer toutes les composantes de gstreamer sous ubuntu http://​blog.nicolargo.com/​2010/​05/​installation-de-tout-les-composants-gstreamer-sous-ubuntu.html     * installer toutes les composantes de gstreamer sous ubuntu http://​blog.nicolargo.com/​2010/​05/​installation-de-tout-les-composants-gstreamer-sous-ubuntu.html
diffusion_video_live_-_streaming.1555761150.txt.gz · Dernière modification: 2019/04/20 13:52 par Benjamin Labomedia