web-dev-qa-db-fra.com

Diffusion en direct HTML5

Pour l'école, j'ai besoin de configurer un site de flux en direct HTML5. Ils utilisent un lecteur de flux flash qu'ils utilisent, mais ils souhaitent maintenant utiliser HTML5 au lieu de cela. Comment puis-je faire ceci? J'ai essayé d'utiliser la balise video mais je n'arrive pas à la faire fonctionner. Ci-dessous le code que j'ai. Quelqu'un pourrait-il m'indiquer dans la bonne direction?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Deltion Live Streaming</title>
    <script language="javascript" type="text/javascript" src="../swfobject.js"></script>
</head>

<body>  

    <video id="movie" width="460" height="306" preload autoplay>
        <source src="rtmp://fl2.sz.xlcdn.com:80/sz=Deltion_College=lb1"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
            <!-- HERE THE CODE FOR THE ALTERNATIVE PLAYER (FLASH) WILL BE! -->
    </video>
</body>
</html>
html5video-streaminghtml5-video
67
Bernhard

Une alternative possible pour cela:

  1. Utilisez un encodeur (par exemple, VLC ou FFmpeg) pour mettre en paquets votre flux d’entrée au format OGG. Par exemple, dans ce cas, j'ai utilisé VLC pour mettre en paquets le périphérique de capture d'écran avec ce code:

    C:\Program Files\VideoLAN\VLC\vlc.exe - Je suis un dummy screen: //: screen-fps = 16.000000: screen-caching = 100: sout = # transcode {vcodec = theo, vb = 800, scale = 1, width = 600, height = 480, acodec = mp3}: http {mux = ogg, dst = 127.0.0.1: 8080/desktop.ogg}: no-sud-rtp-sap: no-sud-standard-sap: ttl = 1: donjon

  2. Intégrez ce code dans une balise <video> de votre page HTML comme ceci:

    <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />

Cela devrait faire l'affaire. Cependant, ses performances sont médiocres et le type de conteneur AFAIK MP4 devrait mieux être pris en charge par les navigateurs que OGG.

20
Osi

Pour le moment, cela ne fonctionnera que sur certains navigateurs et, autant que je sache, vous n'avez pas encore lié à un fichier, ce qui expliquerait pourquoi il ne joue pas.

mais comme vous voulez un flux en direct (que je n'ai pas testé avec)

check out diffusion en continu via RTSP ou RTP en HTML5

et http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/25-HTML5-Video-Resources-You-Might-Have-Missed-74010.aspx

14
Richard

La diffusion en direct en HTML5 est possible via l’utilisation de Media Source Extensions (MSE) - le standard relativement nouveau du W3C: https://www.w3.org/TR/media-source/ MSE est un extension de la balise HTML5 <video>; le javascript sur la page Web permet d'extraire des segments audio/vidéo du serveur et de les transmettre à MSE pour les lire. Le mécanisme de récupération peut être effectué via des requêtes HTTP (MPEG-DASH) ou via WebSockets. Depuis septembre 2016, tous les principaux navigateurs sur tous les appareils prennent en charge MSE. iOS est la seule exception.

Pour le streaming vidéo en direct HTML5 avec une latence élevée (plus de 5 secondes), vous pouvez envisager une implémentation MPEG-DASH via video.js ou le moteur de streaming Wowza.

Pour une diffusion vidéo en direct HTML5 en temps quasi réel et à faible latence, jetez un coup d'œil à EvoStream Media Server, Unreal Media Server et WebRTC.

12
user1390208

Il n'est pas possible d'utiliser le protocole RTMP dans HTML 5, car le protocole RTMP est uniquement utilisé entre le serveur et le lecteur flash. Vous pouvez donc utiliser les autres protocoles de diffusion en continu pour visualiser les vidéos en streaming au format HTML 5.

8
Kalai

Tout d'abord, vous devez configurer un serveur de diffusion multimédia en continu. Vous pouvez utiliser Wowza, red5 ou nginx-rtmp-module . Lisez leur documentation et leur configuration sur le système d'exploitation de votre choix. Tous les moteurs supportent HLS (protocole Http Live Stream développé par Apple). Vous devriez lire la documentation pour config. Exemple avec nginx-rtmp-module:

rtmp {
    server {
        listen 1935; # Listen on standard RTMP port
        chunk_size 4000;

        application show {
            live on;
            # Turn on HLS
            hls on;
            hls_path /mnt/hls/;
            hls_fragment 3;
            hls_playlist_length 60;
            # disable consuming the stream from nginx as rtmp
            deny play all;
        }
    }
} 

server {
    listen 8080;

    location /hls {
        # Disable cache
        add_header Cache-Control no-cache;

        # CORS setup
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        add_header 'Access-Control-Allow-Headers' 'Range';

        # allow CORS preflight requests
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Headers' 'Range';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        types {
            application/vnd.Apple.mpegurl m3u8;
            video/mp2t ts;
        }

        root /mnt/;
    }
}

Une fois le serveur installé et la configuration réussie. vous devez utiliser un logiciel d'encodage rtmp (OBS, wirecast ...) pour démarrer le streaming comme youtube ou twitchtv.

Du côté client (navigateur dans votre cas), vous pouvez utiliser Videojs ou JWplayer pour lire la vidéo pour l'utilisateur final. Vous pouvez faire quelque chose comme ci-dessous pour Videojs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Streaming</title>
    <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/5.8/video.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
    <source src="http://localhost:8080/hls/stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
    var player = videojs('#player');
</script>
</body>
</html>

Vous n'avez pas besoin d'ajouter d'autres plugins comme Flash (car nous utilisons HLS pas RTMP). Ce lecteur peut bien fonctionner avec plusieurs navigateurs sans flash.

8
ypn

Vous pouvez utiliser un nom de bibliothèque fantastique Videojs . Vous trouverez plus d'informations utiles ici. Mais avec démarrage rapide, vous pouvez faire quelque chose comme ceci:

<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
<video 
id="Video" 
class="video-js vjs-default-skin vjs-big-play-centered" 
controls 
preload="none" 
width="auto" 
height="auto" 
poster="poster.jpg" 
data-setup='{"techOrder": ["flash", "html5", "other supported tech"], "nativeControlsForTouch": true, "controlBar": { "muteToggle": false, "volumeControl": false, "timeDivider": false, "durationDisplay": false, "progressControl": false } }'
>
<source src="rtmp://{domain_server}/{publisher}" type='rtmp/mp4'/>
</video>
<script>
var player = videojs('Video');
player.play();
</script>
3
ypn

Utilisez ffmpeg + ffserver. Ça marche!!! Vous pouvez obtenir un fichier de configuration pour ffserver à partir de ffmpeg.org et définir en conséquence les valeurs.

2
Rajditya Shahdeo