Transmissão em directo para HTML5

Para a escola, preciso de criar um local de transmissão em directo do HTML5. Eles têm um flash stream-player que eles têm usado, mas agora eles querem que ele use HTML5 em vez disso. Como posso fazer isto? Tentei usar a etiqueta de vídeo, mas não consigo pô-la a funcionar. Abaixo está o código que tenho. Alguém me pode indicar a direcção correcta?

<!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>
Author: TRiG, 2011-05-02
Source

8 answers

Uma alternativa possível para isso:

  1. Utilize um codificador (por exemplo, VLC ou FFmpeg) para embalar o seu fluxo de entrada para o formato OGG. Por exemplo, neste caso eu usei VLC para embalar dispositivo de captura do ecrã com este código:

    C:\Program ficheiros\VideoLAN\VLC\vlc.ecrã falso exe-I:// : 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-sout-rtp-sap: no-sout-standard-sap: ttl=1: sout-keep

  2. Insira este código numa marca <video> na sua página HTML assim:

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

Isto deve servir. No entanto, é um tipo de desempenho ruim e AFAIK MP4 container type deve ter um melhor suporte entre navegadores do que OGG.
 15
Author: Osi, 2013-02-12 15:33:52
Neste momento, só vai funcionar em alguns navegadores., e pelo que vejo, ainda não ligou a um ficheiro., isso explicaria porque não está a tocar.

Mas como queres uma corrente ao vivo (com a qual não testei)

Check out Streaming via RTSP ou RTP em HTML5

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

 13
Author: Richard, 2017-05-23 10:31:10

A transmissão ao vivo em HTML5 é possível através do uso de extensões de fonte de mídia (MSE) - a relativamente nova norma W3C: https://www.w3.org/TR/media-source/ MSE é uma extensão da tag HTML5 <video>; o javascript na página web pode obter segmentos de áudio/vídeo do servidor e empurrá-los para MSE para reprodução. O mecanismo de obtenção pode ser feito através de solicitações HTTP (MPEG-DASH) ou através de WebSockets. A partir de setembro de 2016 todos os navegadores principais em todos os dispositivos suportam MSE. iOS é o único excepcao.

Para alta latência (5+ segundos) HTML5 streaming de vídeo ao vivo você pode considerar implementações MPEG-DASH por vídeo.JS ou Wowza streaming engine.

Para baixa latência, quase em tempo real HTML5 streaming de vídeo ao vivo, Dê uma olhada no servidor de mídia EvoStream, Unreal Media server, e WebRTC.

 9
Author: user1390208, 2016-10-08 06:58:24

Não é possível usar o protocolo RTMP no HTML 5, porque o protocolo RTMP só é usado entre o servidor e oflash player. Então você pode usar os outros protocolos de streaming para ver os vídeos de streaming no HTML 5.

 6
Author: Kalai, 2012-12-11 11:34:17

Primeiro precisa de configurar um servidor de streaming de mídia. Pode utilizar Wowza, red5 ou nginx-rtmp-module . Leia sua documentação e configuração no sistema operacional que você deseja. Todos os motores são HLS de suporte (Http Live Stream protocol que foi desenvolvido pela Apple). Você deve ler a documentação para a configuração. Exemplo com 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/;
    }
}

Depois que o servidor foi configurado e a configuração foi bem sucedida. você deve usar algum software de codificação rtmp (OBS, wirecast ...) para começar a streaming como youtube ou twitchtv.

Do lado do cliente (navegador no seu caso) pode usar Videojs ou JWplayer para reproduzir vídeo para o utilizador final. Você pode fazer algo como abaixo para videojogos: 

<!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>

Você não precisa adicionar outros plugin como flash (porque nós usamos HLS não rtmp). Este jogador pode trabalhar bem cross browser sem flash.

 4
Author: ypn, 2017-07-08 14:39:37

Pode usar um nome de biblioteca fantástico Videojs . Você encontrará informações mais úteis aqui. Mas com início rápido você pode fazer algo assim: 

<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>
 2
Author: ypn, 2017-04-27 01:23:50

Utilizar ffmpeg + ffserver. Funciona!!! Você pode obter um ficheiro de configuração para o ffserver de ffmpeg.org e, consequentemente, definir os valores.

 1
Author: Rajditya Shahdeo, 2014-09-29 10:34:09 
<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>
 -7
Author: Asong Amagin, 2016-01-13 03:10:20