Отправляйте фрагменты из MediaRecorder на сервер и воспроизводите их в браузере

С помощью следующего кода в NodeJS я могу воспроизвести файл webm, обслуживаемый сервером:

app.get('/video', function(req, res){
    res.writeHead(200,{
        'Connection': 'close',
        'Cache-Control': 'private',
        'Content-Type': 'video/webm'
    });

    console.log('Http client connected: Streaming!');

    var readStream = fs.createReadStream('./small.webm');
    readStream.pipe(res);
});

Теперь я хочу получить WebM прямо из API getUserMedia (). Итак, я использовал MediaRecorder в Socket.IO:

 // Client
 var mediaRecorder = new MediaRecorder(stream, options);
 // ...
 mediaRecorder.ondataavailable = function(e) {
     console.log('Data', e.data);
     chunks.push(e.data);
     socket.emit('data', e.data);
 }


// Server
app.get('/video', function(req, res){
    res.writeHead(200,{
        "Content-Type": "video/webm",
        'Transfer-Encoding': 'chunked'
    });
    // Add the response to the clients array to receive streaming
    clients.push(res);
    console.log('Http client connected: Streaming!');
});

console.log("Starting server...");

httpServer.listen(9007);

var io = require('socket.io')(httpServer);
io.on('connection', function (socket) {
    console.log("Listening...");
    socket.on('data', function (data) {
        console.log("[data]", data);
        // Actual HTTP audio Streaming
        if (clients.length > 0){
            console.log("[http("+clients.length+")]", data);
            for (var client in clients){
                clients[client].write(data);
            }
        }
    });
});

Итак, теперь я получаю поток обратно в браузер, но не могу воспроизвести его с помощью:

    function getHttpStreaming() {
        console.log("Getting streaming");
        var d = new Date();
        var n = d.getTime();
        audio = document.getElementById('video-streaming');
        audio.src = 'https://localhost:9007/video?' + n;
        audio.load();
    }

На вкладке сети отображается поток, но ничего не воспроизводится! Что мне не хватает?

ИЗМЕНЕНО

Как указывает @Brad, для работы WebM необходимы некоторые специальные конфигурации, которые не содержат в поток поступает из getUserMedia, поэтому я добавил ffmpeg между потоком и отправил вывод ffmpeg в браузер и воспроизведенное видео! (то же самое на icecast) Но очень запаздывает, и я не знаю почему. Кроме того, в качестве теста вместо отправки напрямую в браузер я отправил его в icecast, но icecast не смог его воспроизвести, что привело к поломке канала ffmpeg. Чтобы отправить его в браузер, я использовал:

const ffmpeg = child_process.spawn('ffmpeg', [
    '-i', 'pipe:0',
    '-f', 'webm',
    '-cluster_size_limit', '2M',
    '-cluster_time_limit', '5100',
    '-content_type', 'video/webm',
    //'-vf', 'scale=1280:-1',
    '-r', '30',
    '-ac', '2',
    '-acodec', 'libopus',
    '-b:a', '96K',
    '-vcodec', 'libvpx',
    '-b:v', '2.5M',
    '-crf', '30',
    '-g', '150',
    '-deadline', 'realtime',
    '-threads', '8',
    //'-y',
    //'icecast://xxx:xxxx@host:port/live',
    'pipe:1'
]);

Мой вывод следующий:

FFmpeg STDERR: ffmpeg version 2.8.11-0ubuntu0.16.04.1 Copyright (c) 2000-2017 the FFmpeg developers
  built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.4) 20160609
  configuration: --prefix=/usr --extra-version=0ubuntu0.16.04.1 --build-suffix=-ffmpeg --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --cc=cc --cxx=g++ --enable-gpl --enable-shared --disable-stripping --disable-decoder=libopenjpeg --disable-decoder=libschroedinger --enable-avresample --enable-avisynth --enable-gnutls --enable-ladspa --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libmodplug --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-librtmp --enable-libschroedinger --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxvid --enable-libzvbi --enable-openal --enable-opengl --enable-x11grab --enable-libdc1394 --enable-libiec61883 --enable-libzmq --enable-frei0r --enable-libx264 --enable-libopencv
  libavutil      54. 31.100 / 54. 31.100
  libavcodec     56. 60.100 / 56. 60.100
  libavformat    56. 40.101 / 56. 40.101
  libavdevice    56.  4.100 / 56.  4.100
  libavfilter     5. 40.101 /  5. 40.101
  libavresample   2.  1.  0 /  2.  1.  0
  libswscale      3.  1.101 /  3.  1.101
  libswresample   1.  2.101 /  1.  2.101
  libpostproc    53.  3.100 / 53.  3.100

FFmpeg STDERR: Input #0, matroska,webm, from 'pipe:0':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)
    Stream #0:1(eng): Video: vp9 (Profile 0), yuv420p(tv), 640x480, SAR 1:1 DAR 4:3, 16.67 tbr, 1k tbn, 1k tbc (default)
    Metadata:
      alpha_mode      : 1

FFmpeg STDERR: [libvpx @ 0x21c32a0] v1.5.0

FFmpeg STDERR: Output #0, webm, to 'pipe:1':

FFmpeg STDERR:   Metadata:

FFmpeg STDERR:     encoder         :
FFmpeg STDERR: Lavf56.40.101
FFmpeg STDERR:

FFmpeg STDERR:     Stream #0:0
FFmpeg STDERR: (eng)
FFmpeg STDERR: : Video: vp8 (libvpx), yuv420p, 640x480 [SAR 1:1 DAR 4:3], q=-1--1, 2500 kb/s
FFmpeg STDERR: ,
FFmpeg STDERR: 30 fps,
FFmpeg STDERR: 1k tbn,
FFmpeg STDERR: 30 tbc
FFmpeg STDERR:  (default)
FFmpeg STDERR:

FFmpeg STDERR:     Metadata:

FFmpeg STDERR:       alpha_mode      :
FFmpeg STDERR: 1
FFmpeg STDERR:

FFmpeg STDERR:       encoder         :
FFmpeg STDERR: Lavc56.60.100 libvpx
FFmpeg STDERR:
    Stream #0:1(eng): Audio: opus (libopus), 48000 Hz, stereo, flt, 96 kb/s (default)
    Metadata:
      encoder         : Lavc56.60.100 libopus
Stream mapping:
  Stream #0:1 -> #0:0 (vp9 (native) -> vp8 (libvpx))
  Stream #0:0 -> #0:1 (opus (native) -> opus (libopus))

FFmpeg STDERR: frame=  118 fps=3.6 q=0.0 size=     660kB time=00:00:15.05 bitrate= 359.4kbits/s
[data] <Buffer 43 c6 81 0b 03 80 fb 03 3f 22 89 95 18 c5 f0 68 67 7c 25 76 9d b6 e7 b4 2d dc 9c b4 da a3 0c 47 e1 aa ae 3d f2 84 1e 65 08 22 9e a7 af b6 50 7d a2 c7 ... >
FFmpeg STDERR: frame=  123 fps=3.6 q=0.0 size=     989kB time=00:00:15.65 bitrate= 517.6kbits/s
[data] <Buffer 43 c6 81 0d 20 80 fb 03 40 75 4b 59 48 46 42 79 37 d8 44 de f5 ef 7b ec ce 05 c4 44 48 bc 12 6e a2 a9 1e bd 73 59 bc 27 fd ab ec bf a1 8a 32 67 c4 ee ... >
FFmpeg STDERR: frame=  127 fps=3.5 q=0.0 size=     989kB time=00:00:16.19 bitrate= 500.4kbits/s
[data] <Buffer 43 c6 81 0f 77 80 fb 03 43 f6 ef d2 61 b5 47 bb e9 06 5f 7e 37 eb 58 a5 4d a2 30 ff e1 4c 41 28 90 f1 dd 4f 45 b0 44 5b d2 de c3 85 47 0d d5 36 44 39 ... >
FFmpeg STDERR: frame=  132 fps=3.5 q=0.0 size=     989kB time=00:00:16.79 bitrate= 482.5kbits/s
[data] <Buffer 43 c6 81 11 93 80 fb 03 52 2d 4d 14 48 6c 14 63 aa de e8 14 0f 31 31 c4 13 a5 f6 0b 06 ad a2 e3 99 ec 77 de c7 ae 92 13 73 df 8b 80 25 bc fc 21 14 33 ... >
FFmpeg STDERR: frame=  136 fps=3.5 q=0.0 size=     989kB time=00:00:17.33 bitrate= 467.5kbits/s
[data] <Buffer 43 c6 81 13 73 80 fb 03 40 3a 72 51 05 2d 5e 70 84 92 99 4f 1f 7b 39 05 b9 43 15 d9 a1 47 76 9b cc bf 58 ff dd 2f d7 af f2 56 9a b5 8c 1a af 30 48 f1 ... >
FFmpeg STDERR: frame=  140 fps=3.4 q=0.0 size=     989kB time=00:00:17.81 bitrate= 454.9kbits/s
[data] <Buffer 43 c6 81 15 53 80 fb 03 3f 66 84 ff f2 b9 44 64 c0 ed e4 40 bf e2 43 89 d7 44 4d f1 f7 10 fb 92 a7 1a 20 8a 5a c7 fa 9d ff 8a 83 aa 3f 70 e5 a3 05 00 ... >
FFmpeg STDERR: frame=  144 fps=3.4 q=0.0 size=     989kB time=00:00:18.29 bitrate= 442.9kbits/s
[data] <Buffer 43 c9 81 17 70 80 fb 83 ff 10 fc 11 43 d3 8f 64 b4 d3 a3 74 c6 87 be c0 94 39 78 a0 8c 12 60 76 cc 0b d5 a4 2e d8 7b ab 59 11 d2 44 bf a2 5a 76 32 04 ... >
FFmpeg STDERR: frame=  148 fps=3.3 q=0.0 size=     989kB time=00:00:18.83 bitrate= 430.2kbits/s
[data] <Buffer 43 c6 81 19 50 80 fb 03 1a 70 8a fe 75 d9 56 19 b3 91 cc 5d 17 d8 4c 29 c0 30 61 37 ae 53 c4 8b 18 a5 bc 74 0c ab 6d 7e 32 cc 8d 89 35 6a a3 3a eb 65 ... >
FFmpeg STDERR: frame=  152 fps=3.2 q=0.0 size=    1204kB time=00:00:19.31 bitrate= 510.8kbits/s
[data] <Buffer 43 c6 81 1b e3 80 fb 03 51 93 d5 35 c0 0b 06 13 d6 b2 67 86 98 1e 4b 8e 72 1d 3a a6 81 09 97 ef f8 d6 c2 b6 1a ee f3 bb c9 f3 3f 16 e8 be d3 d0 90 72 ... >
FFmpeg STDERR: frame=  157 fps=3.2 q=0.0 size=    1204kB time=00:00:19.97 bitrate= 493.9kbits/s
[data] <Buffer 43 c6 81 1d c3 80 fb 03 44 52 8f e0 6d db 60 9d 43 1d 0e ae dc 9c 0b 94 f8 b0 f1 13 d0 f5 1b b6 f9 8e 2b 0d f6 93 fa d5 99 d9 bb fe b5 29 3d 61 2d bf ... >
FFmpeg STDERR: frame=  161 fps=3.2 q=0.0 size=    1204kB time=00:00:20.45 bitrate= 482.4kbits/s
[data] <Buffer 43 c6 81 20 57 80 fb 03 4f c1 d1 78 88 0c 6b 82 a7 51 3e 65 71 a6 62 07 09 60 6f ce 7c 83 7d 15 4f 4b 46 3e e3 b7 78 49 e5 a7 3d bf e2 37 93 7a 17 1a ...

EDITED2

Chrome не может воспроизвести видеопоток icecast со следующими ошибками:

00:00:13 736    video_decoder   FFmpegVideoDecoder
00:00:13 736    info    Selected FFmpegVideoDecoder for video decoding, config: codec: vp8 format: 4 profile: vp8 coded size: [640,480] visible rect: [0,0,640,480] natural size: [640,480] has extra data? false encrypted? false rotation: 0°
00:00:13 739    error   Failed to send video packet for decoding: timestamp=24300000 duration=33000 size=201 side_data_size=0 is_key_frame=0 encrypted=0 discard_padding (ms)=(0, 0)
00:00:13 739    error   video decode error
00:00:13 739    audio_buffering_state   BUFFERING_HAVE_ENOUGH
00:00:13 739    pipeline_error  PIPELINE_ERROR_DECODE
00:00:13 739    pipeline_state  kStopping
00:00:13 740    pipeline_state  kStopped
00:00:13 731    duration    unknown

EDITED3

Похоже, проблема с хромом связана с выводом ffmpeg. С помощью следующего я смог воспроизвести поток icecast как на Chrome, так и на firefox:

const ffmpeg = child_process.spawn('ffmpeg', [
    '-i', 'pipe:0',
    '-f', 'webm',
    '-cluster_size_limit', '2M',
    '-cluster_time_limit', '5100',
    '-content_type', 'video/webm',
    '-r', '30',
    '-ac', '2',
    '-acodec', 'libopus',
    '-b:a', '96K',
    '-vcodec', 'libvpx',
    '-b:v', '1M',//'2.5M',
    '-crf', '60',
    '-bufsize', '2M',
    '-g', '10',
    '-deadline', 'realtime',
    '-threads', '8',
    '-keyint_min', '10',
    'icecast://source:hackme@localhost:8004/live'
]);

person Valdir    schedule 20.02.2018    source источник


Ответы (3)


Вы не можете просто попасть в поток WebM. WebM / Matroska требуют некоторых настроек для инициализации информации о треке, а что нет. После этого у вас будут кластеры, и вам нужно будет начать кластер. Кроме того, Chrome потребует, чтобы каждый кластер запускался с ключевого кадра, что вы не сможете гарантировать с данными из MediaRecorder. Следовательно, требуется транскодирование на стороне сервера (или, по крайней мере, какое-то неприятное взломание потока VP8).

person Brad    schedule 20.02.2018
comment
Если я добавлю ffmpeg между ними, это сработает? В этом случае, какие аргументы я должен использовать, чтобы сгенерировать желаемый поток? - person Valdir; 20.02.2018
comment
@Valdir Этот код поможет вам на полпути: github.com/fbsamples/Canvas-Streaming-Example Отключите часть RTMP и используйте -f webm. Кроме того, нет необходимости самостоятельно писать этот HTTP-сервер Progressive, Icecast может обрабатывать WebM таким образом и может напрямую получать от FFmpeg. - person Brad; 20.02.2018
comment
Я отредактировал вопрос с помощью части ffmpeg, но при отправке в браузер у меня возникает задержка, и я не могу отправить в icecast. если вы знаете какие-либо советы по решению этой проблемы, не могли бы вы обновить свой ответ? - person Valdir; 21.02.2018
comment
@Valdir API MediaRecorder в этом примере будет сбрасывать данные только каждую секунду, поэтому будет задержка. Кроме того, если вы перекодируете на стороне сервера, возникнет дополнительная задержка, если вы не настроите кодек на низкую задержку. Если для вас важна задержка, вы, по сути, используете неправильную технологию. Вместо этого вам следует использовать WebRTC. - person Brad; 21.02.2018
comment
@Brad, на самом деле проблема не в задержке, но видео внезапно останавливается на несколько секунд, а затем возобновляется и останавливается снова, снова и снова. Также невозможно отправить тот же поток на icecast. - person Valdir; 21.02.2018
comment
Похоже, моя скорость загрузки была слишком низкой. В том-то и проблема ... при смене подключения видео воспроизводится плавнее. Но icecast все еще не может воспроизвести его, получая доступ к URL-адресу потоковой передачи http - person Valdir; 21.02.2018
comment
Замечу, что icecast воспроизводит его на firefox, но не на chrome - person Valdir; 21.02.2018
comment
@Valdir Проверьте свои данные на chrome: // media-internals, чтобы узнать, есть ли какие-нибудь подсказки. Я подозреваю, что элементы вашего кластера WebM не начинаются с ключевых кадров. Особенно разборчив в этом Chrome. - person Brad; 22.02.2018
comment
@Brad Я добавил лог по вопросу от media-internals. Есть подсказка? - person Valdir; 22.02.2018
comment
Что нужно сделать? stackoverflow.com/ questions / 61303618 / - person quarks; 20.04.2020

Благодаря ключевой помощи образец FB Брэда, мне удалось собрать рабочую версию который отправляет аудио / видеопоток в icecast, который затем можно легко воспроизвести в браузере. Поскольку аудио- и видеокодеки копируются напрямую, задержка составляет всего 5-10 секунд.

Вот ссылка:

https://gitlab.com/jamie/icecast-web-source-client

person Jamie    schedule 22.02.2018

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

//* Broadcaster
var presenterMedia = new ScarletsMediaPresenter(/*{options}*/);

// Send the packet below somewhere
presenterMedia.onRecordingReady = function(bufferHeader){};
presenterMedia.onBufferProcess = function(packet){};

//* Streamer
var audioStreamer = new ScarletsAudioStreamer();
audioStreamer.playStream();

// Receive from somewhere
audioStreamer.setBufferHeader(/* bufferHeader */);
audioStreamer.receiveBuffer(/* packet */);

В репозитории есть несколько примеров, если вы хотите получить более подробную информацию о том, как его использовать.

person StefansArya    schedule 18.05.2020