标签: media-source

我正在寻找从NodeJS服务器到客户端的流媒体解决方案,然后将它们与MediaStream API合并.

关键是我不知道流媒体是如何工作的.

我如何通过HTTP协议发送视频块？我看到状态代码206是"部分内容".我认为这些块会生成大量的206代码,而最后一个块生成200个代码,如下所示:

chunck 1/5 --> 206 'Partial Content'
chunck 2/5 --> 206 'Partial Content'
chunck 3/5 --> 206 'Partial Content'
chunck 4/5 --> 206 'Partial Content'
chunck 5/5 --> 200 'OK'

那就对了？

服务器端

我找到了许多使用文件路径生成块的示例,但是我有一个带有视频二进制的Buffer,我如何生成块？

客户端

我看到没有关于MediaSource API的完善文档.在我在网络中找到的示例中使用了webkitsourceopen或sourceopen事件,但我不明白它们何时被呼叫.

有人可以向我解释一下有关流视频的更多信息,甚至可以解决我对服务器和客户端代码的疑虑吗？

非常感谢!:)

我正在尝试流式传输使用gstreamer生成的WebM格式视频，并通过websocket发送单个帧。webm文件的典型字节排列是这样的（您可能已经对此很熟悉）。

EBML (head size: 12 bytes, data: 16 bytes, pos: 0, '0x0')
    DocType (head size: 3 bytes, data: 5 bytes, pos: 12L, '0xcL') : 'webm\x00'
    DocTypeVersion (head size: 3 bytes, data: 1 bytes, pos: 20L, '0x14L') : 2
    DocTypeReadVersion (head size: 3 bytes, data: 1 bytes, pos: 24L, '0x18L') : 2
...
...
SegmentInfo (head size: 12 bytes, data: 91 bytes, pos: 192L, '0xc0L')
    TimecodeScale (head size: 4 bytes, data: 3 bytes, pos: 204L, '0xccL') : 1000000
    Duration (head size: …

我正在研究在没有插件的浏览器中实现自适应和渐进式音频流。MSE是我一直在等待的HTML5 API，可在FF 42中使用，但似乎不存在Firefox中的音频格式支持吗？...使用MSE API时，mp3音频无法正常工作。

这是一个代码片段：

var mediaSource = new window.MediaSource();
var audioSourceBuffer;

mediaSource.addEventListener('sourceopen', function (e) {
    try {
        var mimeType = "audio/mpeg";
        audioSourceBuffer = mediaSource.addSourceBuffer(mimeType);
    } catch (e) {
        log('Exception calling addSourceBuffer', e);
        return;
    }
}

调用addSourceBuffer时收到NotSupportedError异常。

Firefox不支持mp3吗？从MDN支持的格式列表中（https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats），这意味着如果操作系统支持mp3支持，那么-我正在测试的操作系统（OSX）确实支持。

任何帮助表示赞赏！

我正在做一个我想要的项目

getUserMedia -> MediaRecorder -> socketIO -> MediaSource appendbuffer

我让它工作,但几秒后它随机停止.

我知道WebRTC,但在我正在开发的项目中,它基于一个不支持WebRTC的Chrome嵌入版本的环境.

服务器:

'use strict';

const io = require('socket.io')();

io.on('connection', (socket) => {
  console.log('connection');

  socket.on('stream', (data) => {
    socket.emit('stream', data);
  });
});

io.listen(3001);

客户:

//Codecs
var SOURCE_BUFFER_MIME = 'video/webm; codecs="vp8, vorbis"';
var RECORDER_MIME      = 'video/webm; codecs="vp8"';

//Here buffers are stored when sourcebuffer is still 'updating'
var buffers            = [];

//Video1: Directly from get user media
var $video1      = document.getElementById('video1');

//Video2: Using mediasource
var $video2      = document.getElementById('video2');
var mediaSource  = new MediaSource(); …

在下面的代码中，console.log(sb.buffered) 给了我一个长度为 0 的 TimeRanges 对象。这是为什么？我检查了 xhr.response 是什么，它是一个大约 58000 byteLength 的 ArrayBuffer。

var ms;
var sb;
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

function example() {
  ms = new MediaSource;
  var video = document.querySelector('video');
  video.src = URL.createObjectURL(ms);
  ms.addEventListener('sourceopen', function() {
    sb = ms.addSourceBuffer(mimeCodec);
    fetch('test0.mp4');
  }, false);
}

function fetch(url) {
  var xhr = new XMLHttpRequest;
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function() {
    if (ms.readyState === 'open') {
      sb.appendBuffer(xhr.response);
      sb.addEventListener('updateend', function() {
        console.log(sb.buffered);
      });
    }
  };
  xhr.send();
}

目前,使用libavformat从代码生成碎片化MP4文件时遇到问题.我的文件可以使用VLC播放,但无法在(Chrome)浏览器中流式传输(通过WebSocket)和播放(通过MediaSource).(我用它来通过WebSocket测试流式分段MP4文件到浏览器).

注意:下面的文件由Baseline profile 4级编码.因此,您应该将MIME类型(在index.html中)更改为const mimeCodec ='video/mp4; 编解码器= "avc1.42C028"'; 能够发挥它们.

我检查并发现我生成的Mp4文件与使用ffmpeg工具生成的文件略有不同.

这就是我所做的:

我有一个.h264 文件

1. 第一种方法,我使用ffmpeg生成碎片化的MP4文件.

   ffmpeg -i temp.h264 -vcodec copy -f mp4 -movflags empty_moov+default_base_moof+frag_keyframe ffmpeg.mp4
   

   Run Code Online (Sandbox Code Playgroud)

   生成的文件可以由Quicktime播放器和VLC播放器播放

2. 第二种方法,我使用libavformat以 programmaticaly方式生成碎片化的Mp4文件

   首先我初始化上下文,codecin代码是AVCodecContext*输入流的

    av_register_all();
    avcodec_register_all();
    int ret;
    AVOutputFormat* fmt = av_guess_format("mp4", 0, 0);
    if(!fmt) {
      return;
    }
   
    AVFormatContext* ctx = avformat_alloc_context();
    // Create AVIO context to capture generated Mp4 contain
    uint8_t *avio_ctx_buffer = NULL;
    size_t avio_ctx_buffer_size = 50000;
    IOOutput buffer = {};
    const …

   Run Code Online (Sandbox Code Playgroud)

让我们从一个例子开始：

1. 您访问 youtube.com，该网站在某些设备上使用带有 HTML5 的媒体源扩展 (MSE)。
2. MSE 使用 blob URL 注入 <video> 标记。它看起来像这样：blob： https: //www.youtube.com/blahblahblah ”
3. 在流式传输整个视频的过程中，您的浏览器会进行多次网络调用来下载各个视频块，并将它们附加到 MSE 的 SourceBuffer
4. 因此，Meda Source 对象作为一个整体在整个视频流中更新
5. 但是，最初附加到 <video> 元素（假设表示媒体源对象）的 blob URL 保持不变。

对我来说，这似乎没有多大意义。Blob URL 应该代表永远不会改变的不可变数据块。但 MSE 似乎能够使它们代表一个可变的内存缓冲区。

这在幕后是如何工作的？如果我们还想让 blob URL 代表一些可变的内存缓冲区，我们如何使用 javascript 自己做到这一点？

我正在fetch()从 API 获取视频。

这response.body是一个可读的流。所以我把它读进了reader.

然后将所有块 ( value) 推入块数组 ( chunks.push(value)) 中。

然后，块数组被转换为 arrayBuffer ( let buffer = await blob.arrayBuffer())，因为 blob 无法附加到 sourceBuffer。

以上所有步骤均正确运行！我唯一的问题是将缓冲区附加到 sourceBuffer ( sourceBuffer.appendBuffer(buffer)) 中。

控制台没有弹出错误，但 sourceBuffer 没有更新。它保持空着。

有人知道发生了什么事吗？

多谢

<body>
<video id="test-video-api">
</video>
<script>

    const fetchUrl = "https://myserver/api/video?fuid=12345";
    const videoTag = document.getElementById("test-video-api");

    function getVideo(){
        if (window.MediaSource) {
            var mediaSource = new MediaSource();
            videoTag.src = URL.createObjectURL(mediaSource);
            mediaSource.addEventListener('sourceopen', sourceOpen);
        } else {
            console.log("The Media Source Extensions API is not …

我使用以下示例程序追加媒体文件,但得到"Uncaught InvalidStateError:尝试使用一个不可用或不再可用的对象"错误,它在第一个瞬间命中"mediaSource.sourceBuffers [0] .appendBuffer(mediaSegment);".我使用的是Chrome 31.0.1650.57.谁能建议我解决这个问题？

https://github.com/jbochi/media-source-playground/blob/master/test.html

我已完成以下修改以附加文件.

var buffer_len = 0;

function HaveMoreMediaSegments(){
//return false; //return buffers.length > 0;
return buffers.length > buffer_len;
}

//var GetNextMediaSegment = GetInitializationSegment;

function GetNextMediaSegment(){
var buffer = buffers[buffer_len];
buffers = buffers.slice(1);
buffer_len = buffer_len + 1;
return buffer;
}

并改变了

mediaSource.sourceBuffers [0] .append(mediaSegment);
to
mediaSource.sourceBuffers [0] .appendBuffer(mediaSegment);

和

sourceBuffer.append(ini​​tSegment);
to
sourceBuffer.appendBuffer(initSegment);

因为append方法在我的环境中不起作用.

我在window.setTimeout()事件中使用sourceopen而不是webkitsourceopen.

mediaSource.addEventListener('sourceopen',onSourceOpen.bind(this,video));

我是媒体流新手，刚刚开始学习自适应流媒体。我有几个疑问，请澄清 -

1. MSE 是否仅支持 DASH 流媒体，我的意思是如果任何使用 DASH 的网站并且我的浏览器支持带有 DASH 的 MSE，它就会播放。但如果网站使用 HLS，那么我的浏览器虽然具有 MSE，但无法播放视频内容。是因为MSE不支持HLS，还是我的浏览器MSE没有HLS的实现？

2. 如果我检查播放视频流的网页，我检查了许多网站使用带有“src”属性的视频标签作为 blob。blob 是否意味着它正在使用 MSE。我们是否可以在 DASH（我在 Youtube 中查看）和 HLS（如 dailymotion 或 twitch.tv 中）的“src”属性中包含 blob？

3. 我在 twitch.tv 上读了几篇文章，twitch.tv 仅支持带有 html5 播放器或 flash 的 HLS 吗？如果假设浏览器不通过html5播放器支持flash和HLS，那么就无法在浏览器上播放twitch.tv内容？

谢谢