将块从 MediaRecorder 发送到服务器并在浏览器中播放答案

【问题标题】：Send chunks from MediaRecorder to server and play it back in the browser将块从 MediaRecorder 发送到服务器并在浏览器中播放
【发布时间】：2018-02-20 18:25:21
【问题描述】：

使用 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);
});

现在我想直接从 getUserMedia() API 获取 WebM。所以我在 Socket.IO 中使用了 MediaRecorder：

 // 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 指出的那样，需要some special configs 才能工作，它不包含在来自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

chrome 问题似乎与 ffmpeg 输出有关。通过以下内容，我可以在 chrome 和 firefox 上播放 icecast 流：

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'
]);

【问题讨论】：

标签： node.js getusermedia webm

【解决方案1】：

您不能只对 WebM 流进行针刺。 WebM/Matroska 需要一些设置来初始化轨道信息和什么不是。之后，您将拥有集群，并且您必须从集群开始。此外，Chrome 将要求每个集群从一个关键帧开始，您无法使用 MediaRecorder 的数据来保证这一点。因此，需要进行服务器端转码（或至少对 VP8 流进行一些令人讨厌的黑客攻击）。

【讨论】：

如果我在两者之间添加 ffmpeg 是否有效？在这种情况下，我应该使用哪些参数来生成所需的流？
@Valdir 这个代码让你成功了一半：github.com/fbsamples/Canvas-Streaming-Example 去掉 RTMP 部分并使用-f webm。另外，不需要自己写这个HTTP Progressive服务器，Icecast可以用这种方式处理WebM，可以直接从FFmpeg接收。
我已经用 ffmpeg 部分编辑了问题，但是在发送到浏览器时出现了一些延迟，无法发送到 icecast。如果您知道解决此问题的任何提示，您能否更新您的答案？
@Valdir 该示例中的 MediaRecorder API 只会每秒转储数据，因此会有延迟。此外，如果您在服务器端进行转码，除非您将编解码器配置为低延迟，否则会有额外的延迟。如果延迟对您很重要，那么您从根本上使用了错误的技术。您应该改用 WebRTC。
@Brad，实际上不是延迟问题，而是视频突然停止了几秒钟，然后又恢复并再次停止，一遍又一遍。也无法将相同的流发送到 icecast。

【解决方案2】：

感谢Brad's FB sample 的关键帮助，我能够组装一个工作版本，将音频/视频流发送到icecast，然后可以轻松地在浏览器中播放。由于直接复制音视频编解码器，所以只有5-10秒的延迟。

这是链接：

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

【讨论】：

【解决方案3】：

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 */);

如果您想了解更多关于如何使用它的详细信息，可以在存储库中找到一些示例。

【讨论】：