HTML5 diffusion en direct

une alternative possible pour cela:

1. utilisez un encodeur (par ex. VLC ou FFmpeg) pour packetize votre flux d'entrée au format OGG. Par exemple, dans ce cas, J'ai utilisé VLC pour packetize dispositif de capture d'écran avec ce code:

   C:\Program fichiers\VideoLAN\VLC\vlc.écran mannequin exe-I:// :écran ips=16.000000 :écran-mise en cache=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-OUT-rtp-sap :no-OUT-standard-sap :TTL=1: sout-keep

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

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

Cela devrait faire l'affaire. Cependant, C'est un peu une mauvaise performance et AFAIK MP4 type de conteneur devrait avoir un meilleur support parmi les navigateurs que OGG.

en ce moment, il ne fonctionnera que dans certains navigateurs, et pour autant que je puisse voir vous n'avez pas réellement lié à un fichier, donc, cela expliquerait pourquoi il ne joue pas.

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

check out Streaming via RTSP or RTP in HTML5

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

Live streaming en HTML5 est possible via l'utilisation de Media Source Extensions (MSE) - le nouveau standard du W3C: https://www.w3.org/TR/media-source/ MSE est une extension de la balise HTML5 <video> ; le javascript sur la page Web peut récupérer des segments audio/vidéo du serveur et les pousser vers MSE pour la lecture. Le mécanisme de récupération peut être effectué via des requêtes HTTP (MPEG-DASH) ou via des WebSockets. À partir de septembre 2016 tous les principaux navigateurs sur tous les appareils prise en charge MSE. iOS est la seule exception.

pour haute latence (5+ secondes) HTML5 diffusion en direct de la vidéo vous pouvez considérer MPEG-DASH implémentations par vidéo.moteur de streaming js ou Wowza.

pour une faible latence, proche de la diffusion en temps réel de vidéos en direct HTML5, jetez un oeil à EvoStream media server, Unreal media server, et WebRTC.

il n'est pas possible d'utiliser le protocole RTMP en HTML 5, car le protocole RTMP n'est utilisé qu'entre le serveur et le lecteur flash . Vous pouvez donc utiliser les autres protocoles de streaming pour visionner les vidéos en streaming en HTML 5.

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 OS que vous voulez. Tous les moteurs sont compatibles 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/;
    }
}

après la configuration du serveur et le succès de la configuration. vous devez utiliser un logiciel d'encodage rtmp (OBS, wirecast ...) pour démarrer le streaming comme youtube ou twitchtv.

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 plugin comme flash (parce que nous utilisons HLS pas rtmp). Ce lecteur peut bien fonctionner cross browser avec flash.

vous pouvez utiliser un nom de bibliothèque fantastique Videojs . Vous trouverez plus d'informations utiles ici. Mais avec quick start 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>

utiliser ffmpeg + ffserver. Il fonctionne!!! Vous pouvez obtenir un fichier de configuration pour ffserver à partir de ffmpeg.org et fixer les valeurs en conséquence.

<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
            height="285" id="mediaPlayer" standby="Loading Microsoft Windows Media Player components..."
            type="application/x-oleobject" width="360" style="margin-bottom:30px;">
            <param name="fileName" value="mms://my_IP_Address:my_port" />
            <param name="animationatStart" value="true" />
            <param name="transparentatStart" value="true" />
            <param name="autoStart" value="true" />
            <param name="showControls" value="true" />
            <param name="loop" value="true" />
            <embed autosize="-1" autostart="true" bgcolor="darkblue" designtimesp="5311" displaysize="4"
                height="285" id="mediaPlayer" loop="true" name="mediaPlayer" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
                showcontrols="true" showdisplay="0" showstatusbar="-1" showtracker="-1" src="mms://my_IP_Address:my_port"
                type="application/x-mplayer2" videoborder3d="-1" width="360"></embed>
</object>