是否有办法将视频数据从视频标签/MediaStream发送到OffscreenCanvas?
基本上,我希望能够有效执行相同的代码: const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const draw = () => { context.drawImage(video, 0, 0); requestAnimationFrame(draw); } video.onplay = () => { requestAnimationFrame(draw); } 仅使用屏幕外画布.我可以将图像通过消息发送给工人屏幕外画布的打开,但由于直接与HTMLElement绑定的视频而不是视频.目前,是否有一种方法可以以某种方式呈现视频数据或MediaStream? 解决方案 您可以通过修改以下更改来修改脚本: ,将视频帧发送到网络工作
4 2023-12-03
编程技术问答社区
如何使用ffmpeg通过websocket串流mp4
我已经在nodejs中编写了一个示例,该样本通过MP4格式通过WebSocket连接将一些输入传输到客户端.在客户端,将MP4软件包添加到MediaSourceBuffer中. 这运行良好,但前提是客户端从开始使用第一个软件包开始流.因此,另一个客户无法播放当前流,因为他不会从一开始就获得流. 我尝试过(尝试&错误)保存第一个软件包ffmpeg发送并在新连接的开头发送,然后在当前流中发送.然后由于编码错误,MediaSourceBuffer断开. 这是ffmpeg命令: -i someInput -g 59 -vcodec libx264 -profile:v baseline -f mp4 -movflags empty_moov+omit_tfhd_offset+frag_keyframe+default_base_moof -reset_timestamps 1 - 零件" empty_moov+omit_tfhd_offset+frag_keyfr
4 2023-12-02
编程技术问答社区
显示带有媒体流扩展(MSE)的getUserMediaStream实时视频
我正在尝试使用getusermedia从网络摄像头显示媒介,并使用任何可能的机制播放它(作为实验)将其传递给远程对等.我不想控制原始数据. 我遇到的问题是我的视频元素什么都没显示,我没有回到任何错误.我正在使用Chrome版本51.0.2704.103(64位)(基于Ubuntu 14.04 Linux OS). 作为旁注,如果我将所有斑点记录到数组中,然后创建一个新的斑点,然后将视频的SRC元素设置为url.createobjecturl(blob),它将正确显示视频. > 这是我尝试完成此操作的代码(减去继电器,我只是想在本地玩它): var ms = new MediaSource(); var video = document.querySelector("video"); video.src = window.URL.createObjectURL(ms); ms.addEventListener("sourceopen", function()
6 2023-12-01
编程技术问答社区
无法从使用socket.io的媒体源的媒体记录器跳入流中
首先加载视频观察客户端时,以下代码可行,然后加载网络摄像头客户端,它可以完美地工作,但是,如果切换订单或以任何方式中断流,例如,通过刷新任何一个客户端,流都将流.失败,媒体来源将将其现成状态更改为关闭. 我的假设是,在开始时收到的视频需要初始化标题开始,并且由于中游读取了流,因此从未得到所述初始化标题.我不确定如何什至将此类标头添加到WebM文件中. 我试图在源缓冲区上更改序列模式,这无助.我尝试重新启动视频录像机,这有效,但是我的最终计划是让多个观察客户端,并且在每个重新连接上重新启动视频录音机并不是最佳的. 相机客户端 main(); function main() { if (hasGetUserMedia()) { const constraints = { video: { facingMode: 'environment', frameRat
4 2023-11-18
编程技术问答社区
在HTML5视频流中,当用户寻求其他时间时,计算.m4s段文件后缀
我使用MP4Box为长MP4视频创建了固定长度段. mp4box创建一个元信息文件mv_init.mp4和mv_1.m4s,mv_2.m4s,…我使用HTML5媒体源扩展流式传输视频,流媒体流量正常. . 问题是我无法利用我的HTML5播放器的时间.当用户使用Seekbar来寻找另一个时间点时,我需要为此currentTime. 例如: 视频持续时间:2小时 段尺寸:10秒 用户寻求时间:25分钟 25分钟= 25×60秒= 1500秒.由于每个段为10秒,我需要段编号1500/10 =150.所需的段文件为mv_150.m4s. 计算显然似乎正确,但是HTML5播放器然后在mv_150.m4s之后下载了更多文件,然后它继续使用流媒体.. 如何正确计算段文件编号,以便在寻求流程后平稳运行,而无需下载任何额外的文件? 要创建MP4视频的片段,我使用了以下命令: MP4Box -dash 10000 -out video.mpd -dash-
2 2023-11-18
编程技术问答社区
如何保持MediaSource视频流的同步性?
我有一个服务器应用程序,该应用程序呈现30 fps视频流,然后将其实时编码并实时编码为a webm byte流. 在客户端,HTML5页面向服务器打开了一个Websocket,该网站在接受连接时开始生成流.交付标题后,每个后续的WebSocket框架都由一个WebM SimpleBlock组成.每15帧会发生一个密钥帧,当发生这种情况时,启动了一个新的群集. 客户端还创建 MediaSource ,然后从WS接收帧时,将内容附加到其活动缓冲区. 在附加第一个帧后立即开始播放. 一切正常.我唯一的问题是,网络抖动会导致播放位置从一段时间后的实际时间流动.我当前的解决方案是挂接updateend事件,请检查video.currentTime和传入群集上的时间代码之间的差异,并在可接受的范围内手动更新currentTime.不幸的是,这会导致明显的停顿并跳入播放,这是令人不快的. 该解决方案也有些奇怪:我确切地知道最新的密钥帧在哪里,但是我必须将其转换为一
2 2023-11-18
编程技术问答社区
在FFMPEG中创建碎片化的MP4时的冲洗和延迟问题
使用以下命令: -i rtsp://172.20.28.52:554/h264 -vcodec copy -an -f mp4 -reset_timestamps 1 -movflags empty_moov+default_base_moof+frag_keyframe -loglevel quiet - " - i rtsp://172.20.28.52:554/h264",因为来自IP摄像头的RTP数据包流中的源为H264. 为了进行测试,将相机设置为GOP为1(即所有帧都是关键帧) " - vcodec副本",因为我不需要转码,而只能恢复到mp4. " - movflags empty_moov+default_base_moof+frag_keyframe"根据媒体源扩展规格创建一个碎片的mp4 " - "最后,将MP4输出到Stdout.我正在抓住Ouput并通过Web插座将其发送到网络电机. 一切正常,期望我要解决的延迟问题. 如果我每次来自Stdout
8 2023-11-18
编程技术问答社区
使用mp4box直播冲刺内容
我正在尝试使用媒体源扩展API. 以下方法效果很好: ffmpeg -i rtsp://10.50.1.29/media/video1 -vcodec copy -f mp4 -reset_timestamps 1 -movflags frag_keyframe+empty_moov -loglevel quiet out.mp4 ,然后: mp4box -dash 1000 -frag 1000 -frag-rap out.mp4 我可以将 mp4box 输出(out_dashinit.mp4)带到Web插座,块块,将其发送给将其馈送到媒体源API的JavaScript客户端. 但是,这不是实时内容的好方法. 我现在要做的是创建一个管道,以实时和最小可能的延迟. 使用FFMPEG,可以将输出重定向到stdout而不是out.mp4并抓住内容. 我无法弄清楚是否可以将MP4Box组合到管道中. MP4BOX可以从不是文件的来源获取输入数据吗? MP
12 2023-11-18
编程技术问答社区
使用MediaSource API蒸煮一个不断增长的文件。
所以我有一个下载.mp4文件.我想使用MediaSource API将下载文件传输到视频元素中.我该怎么做? const NUM_CHUNKS = 5; var video = document.querySelector('video'); video.src = video.webkitMediaSourceURL; video.addEventListener('webkitsourceopen', function(e) { var chunkSize = Math.ceil(file.size / NUM_CHUNKS); // Slice the video into NUM_CHUNKS and append each to the media element. for (var i = 0; i
2 2023-11-18
编程技术问答社区
媒体源Api对自定义webm文件不起作用(Chrome 23.0.1271.97 m版本)
我在此链接 它适用于给定的测试WebM文件,但是当我尝试将文件名更改为自定义WebM文件时,代码停止工作. 它正在生成以下错误:Uncaught Error: INVALID_STATE_ERR: DOM Exception 11在以下代码:sourceBuffer.append(new Uint8Array(e.target.result)); 要检查自定义WebM文件是否有效,我创建了一个测试页面,其中我定义了一个具有自定义WebM文件源的视频标签. 当我运行代码时,它可以正常工作. 我无法理解这种奇怪行为的原因. 解决方案 最有可能的问题是您的WebM文件的群集不会从密钥帧开始. 在Chrome dev-chnannel构建中(即25或更高版本),您可以通过以下步骤对此进行验证. 开放式铬:另一个选项卡中的媒体界面. 使用您的测试页面返回选项卡并重新加载. 再次发生错误时,请切换回Chrome:Media Internals选项卡,并在
4 2023-11-18
编程技术问答社区
是否有可能在html画布元素和html视频元素中添加一个流作为源?
根据MDN: HTMLMediaElement HTMLMediaElement 属性 以及支持基本媒体相关功能所需的方法 音频和视频是常见的. HTMLMediaElement.captureStream() .它可以与和元素一起使用以捕获其流. 相反,可以将视频流作为srcObject添加到元素,然后显示它. 元素也可能吗? 是否可以将流作为 source 添加到html 元素? 解决方案 否任何帆布API中没有任何东西可以消耗媒介. 帆布API仅与原像素一起使用,并且不包含任何类型的解码器.您必须使用能够执行此解码的JavaScript对象(例如ImageBitMap)或HTMLELEMENTS. 因此,在媒体流的情况下,当前唯一能够解码其视频内容的对象将是htmlvideoelement,您可以轻松地绘制画布. 2021 Update webcode
4 2023-09-30
编程技术问答社区
在React中,MediaSource从未发出sourceopen事件
我正在尝试使用React自定义挂钩中使用JavaScript的MediaSource API流式传输视频文件. 这是我的代码的片段: const useMyHook = (videoRef: React.MutableRefObject) => { ... useEffect(() => { const mediaSource = new MediaSource(); videoRef.current!.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', () => { // this never happens }); }, []); ... } const MyComponent = () => { const videoRef = useRef
22 2023-06-12
编程技术问答社区
在HTML中加载大型视频文件
这是我的问题:我想播放存储在S3存储桶中的大型视频文件(3.6GB),但是似乎该文件太大,加载30秒后页面崩溃. 这是我播放视频的代码: var video = document.getElementById("video"); const mediaSource = new MediaSource(); video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', sourceOpen, { once: true }); function sourceOpen() { URL.revokeObjectURL(video.src); const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.f40028"'); fetch('URL_TO_VID
4 2023-06-12
编程技术问答社区
FMP4的蹄铁盒序列号排序
我想使用Avformat Libs和HTML5视频和MSE进行基本零散的MP4 广播程序. 这是一个实时流,我使用Avformat将H264数据复制到MP4片段. 这是我对流到流的客户的基本图: so,用文字: C1J:第一个客户端加入: avformat过程启动 FTYP,MOOV,MOOF,MDAT盒子将提供给客户端 FTYP和MOOV原子都可以保存以供以后再利用 C2J:第二个客户端加入(稍后时间): Avformat过程正在进行中(因为它仍在为客户端提供MOOF和MDAT框) 先前保存的FTYP和MOOV盒子将首先提供给客户端 提供了FTYP和MOOV盒后,客户端将在下一个MOOF盒中加入流. 我已将MP4文件保存到两个客户端的磁盘. 两个文件中的原子订单看起来不错:ftype,moov,moof,mdat,moof,mdat ... 两个文件都可以由媒体播放器(例如VLC)和浏览器直接播放(Opera). . cl
16 2023-04-20
编程技术问答社区
Chrome: 播放正在通过fetch/XHR下载的视频
我要实现的目标是使Chrome加载视频文件作为数据(通过fetch api,xhr等),并在仍在下载它的同时使用播放它,而无需对此发出两个单独的请求相同的URL,不等待直到文件完全下载. 很容易从fetch api(response.body)获得ReadableStream,但是我找不到将其馈入video元素的方法.我已经发现我需要一个blob URL,可以使用MediaSource对象创建.但是, SourceBuffer#appendStream 正是所需的,没有在Chrome中实现,因此我无法将流直接连接到MediaSource对象. 我可能可以在块中读取流,创建Uint8Array s,并使用SourceBuffer#appendBuffer,但这意味着除非块大小真的很小,否则播放不会立即开始.同样,感觉就像手动做所有这些API应该能够开箱即用的事情.如果没有其他解决方案,我会这样,我应该期待哪些警告? 是否还有其他方法可以为ReadableSt
36 2023-04-20
编程技术问答社区
究竟什么是碎片化的mp4(fMP4)?它与普通mp4有什么不同?
媒体源扩展( MSE )需要零碎的MP4才能在浏览器中进行播放. 解决方案 零散的MP4包含一系列段,如果您的服务器支持字节范围请求,则可以单独请求. 盒子又名原子 所有mp4文件均使用面向对象的格式,其中包含盒子P> 您可以使用在线工具中查看MP4中盒子的表示形式,例如 mp4 parser 重新使用Windows, mp4 Explorer .让我们将普通MP4与碎片的MP4进行比较: 非碎片MP4 此屏幕截图(来自 mp4 parser )显示了一个没有分散的MP4,并且很简单地具有一个巨大的mdat(电影数据)框. 如果我们正在构建支持自适应比特率的视频播放器,我们可能需要知道10秒钟的字节位置在0.5Mbps和1Mbps文件中,以便当时在两个文件之间切换视频源.在每个文件中确定一个巨大的mdat中的精确字节位置并不是微不足道的. 碎片MP4 此屏幕截图显示了一个零散的MP4,该截面已使用 mp4box onDemand配置文件
76 2023-04-02
编程技术问答社区
在Firefox MediaSourceExtension上支持MP3
我正在考虑在没有插件的浏览器中实现自适应和渐进的音频流. 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;
18 2023-04-02
编程技术问答社区