如何下载(或以 blob 形式获取)用于流式传输 HTML5 视频的 MediaSource?
How to download (or get as a blob) a MediaSource used for streaming HTML5 video?
我正在通过 WebSocket 将动态生成的 MP4 流式传输到网页中。当片段进入时,我 assemble 一个 MediaSource (https://developer.mozilla.org/en-US/docs/Web/API/MediaSource),将其用于 HTML5 视频元素,并且我的视频在所有主流浏览器中都能正常播放。
我想做的是添加用户下载此视频的功能。我的第一次尝试是看看我是否可以通过 video.src
属性 访问它,我用 window.URL.createObjectURL(my_media_source)
设置了它。此 URL 是 "blob:null/abb348e0-3459-8344-bf1e-063dd001f09a" 形式的 blob URL。我不知道为什么 url 中有一个空值,但它一直在那里。获取此 blob 的 XMLHttpRequest 失败。
那么,什么是 正确 将播放良好的流媒体视频下载为单个文件的方法? MediaSource 似乎包含整个视频流——我可以将其作为数组缓冲区或 blob 或其他内容访问吗?
我想我自己回答了这个问题。据我了解,这是目前的情况:
首先,从 MediaSource 获取二进制数据 back 目前似乎实际上是不可能的。在 W3C 标准上什至有一个关于这个的问题:https://github.com/w3c/media-source/issues/209
可以使用相对较新的 MediaRecorder (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) API,但并非所有浏览器都支持它。这样做的缺点是浏览器会重新编码视频并且您对输出格式的控制较少——我无法 Chrome 生成 mp4,只能生成 webm。此外,如果之前有二进制数据请求,则每次请求二进制数据时,它只会为您提供从上一次请求开始的数据。
当然,也可以手动在内存中保留第二份视频,但我不想采用这种方法,因为它看起来非常浪费和烦人。
我正在通过 WebSocket 将动态生成的 MP4 流式传输到网页中。当片段进入时,我 assemble 一个 MediaSource (https://developer.mozilla.org/en-US/docs/Web/API/MediaSource),将其用于 HTML5 视频元素,并且我的视频在所有主流浏览器中都能正常播放。
我想做的是添加用户下载此视频的功能。我的第一次尝试是看看我是否可以通过 video.src
属性 访问它,我用 window.URL.createObjectURL(my_media_source)
设置了它。此 URL 是 "blob:null/abb348e0-3459-8344-bf1e-063dd001f09a" 形式的 blob URL。我不知道为什么 url 中有一个空值,但它一直在那里。获取此 blob 的 XMLHttpRequest 失败。
那么,什么是 正确 将播放良好的流媒体视频下载为单个文件的方法? MediaSource 似乎包含整个视频流——我可以将其作为数组缓冲区或 blob 或其他内容访问吗?
我想我自己回答了这个问题。据我了解,这是目前的情况:
首先,从 MediaSource 获取二进制数据 back 目前似乎实际上是不可能的。在 W3C 标准上什至有一个关于这个的问题:https://github.com/w3c/media-source/issues/209
可以使用相对较新的 MediaRecorder (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) API,但并非所有浏览器都支持它。这样做的缺点是浏览器会重新编码视频并且您对输出格式的控制较少——我无法 Chrome 生成 mp4,只能生成 webm。此外,如果之前有二进制数据请求,则每次请求二进制数据时,它只会为您提供从上一次请求开始的数据。
当然,也可以手动在内存中保留第二份视频,但我不想采用这种方法,因为它看起来非常浪费和烦人。