Прямая трансляция HTML5

Ответ 1

Возможная альтернатива для этого:

• Используйте кодировщик (например, VLC или FFmpeg) для пакетирования входного потока в формат OGG. Например, в этом случае я использовал VLC для пакетирования устройство захвата экрана с помощью этого кода:

  C:\Program Files\VideoLAN\VLC\vlc.exe -I фиктивный экран://: screen-fps = 16.000000: screen-caching = 100: Sout = # перекодировать {vcodec = Theo, VB = 800, масштаб = 1, ширина = 600, высота = 480, acodec = mp3}: {HTTP Мультиплексор = OGG, ДСТ = 127.0.0.1: 8080/desktop.ogg}: no-sout-rtp-sap: no-sout-standard-sap: ttl = 1: sout-keep

• Вставьте этот код в тег <video> на странице HTML, например:

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

Это должно сделать трюк. Однако такая низкая производительность и тип контейнера AFAIK MP4 должны иметь лучшую поддержку среди браузеров, чем OGG.

Ответ 2

Сейчас он будет работать только в некоторых браузерах, и, насколько я вижу, вы фактически не связаны с файлом, так что это объясняет, почему он не играет.

но поскольку вы хотите жить в потоке (с которым я не тестировался)

проверить Поток через RTSP или RTP в HTML5

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

Ответ 3

Невозможно использовать протокол RTMP в HTML 5, поскольку протокол RTMP используется только между сервером и проигрывателем flash. Таким образом, вы можете использовать другие потоковые протоколы для просмотра потоковых видео в HTML 5.

Ответ 4

Прямая трансляция в HTML5 возможна с использованием Media Source Extensions (MSE) - относительно нового стандарта W3C: https://www.w3.org/TR/media-source/ MSE является расширением тега HTML5 <video>; javascript на веб-странице может извлекать сегменты аудио/видео с сервера и нажимать их на MSE для воспроизведения. Механизм выборки можно выполнить с помощью HTTP-запросов (MPEG-DASH) или через WebSockets. По состоянию на сентябрь 2016 года все основные браузеры на всех устройствах поддерживают MSE. Исключение составляет только iOS.

Для потоковой передачи потокового видео HTML5 с высокой задержкой (5+ секунд) вы можете рассматривать реализации MPEG-DASH с помощью видеороликов video.js или Wowza.

Для низкой латентности, потокового потокового видео в реальном времени HTML5, посмотрите медиа-сервер EvoStream, медиа-сервер Unreal и WebRTC.

Ответ 5

Во-первых, вам нужно настроить медиа-потоковый сервер. Вы можете использовать Wowza, red5 или nginx-rtmp-module. Прочтите их документацию и настройки на нужную ОС. Весь двигатель поддерживает HLS (протокол Http Live Stream, разработанный Apple). Вы должны прочитать документацию для конфигурации. Пример с nginx-rtmp-модулем:

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/;
    }
}

После успешной настройки и конфигурации сервера. вы должны использовать некоторое программное обеспечение кодировщика rtmp (OBS, wirecast...) для запуска потоковой передачи, например youtube или twitchtv.

На стороне клиента (браузер в вашем случае) вы можете использовать Videojs или JWplayer для воспроизведения видео для конечного пользователя. Вы можете сделать что-то вроде 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>

Вам не нужно добавлять другие плагины, такие как flash (потому что мы используем HLS, а не rtmp). Этот проигрыватель может хорошо работать с перекрестным браузером без вспышки.

Ответ 6

Используйте ffmpeg + ffserver. Оно работает!!! Вы можете получить файл конфигурации для ffserver с ffmpeg.org и соответственно установить значения.

Ответ 7

Вы можете использовать имя фантастической библиотеки Videojs. Здесь вы найдете более полезную информацию. Но с быстрым началом вы можете сделать что-то вроде этого:

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

Ответ 8

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