☰

问题

tag-icon • tag-icon firefox ffmpeg streaming hls mpeg-dash
问题

我正在尝试使用 ffmpeg 将实时视频从摄像头传输到浏览器。我在 StackOverflow 和这里找到了几个关于此问题的问题，但它们都与从摄像头创建视频文件有关。幸运的是，我能够从摄像头输入制作视频文件，没有太多问题。但我需要帮助从摄像头制作视频流，最好是作为浏览器播放的 .mpd 文件。

问题

基于 Chromium 的浏览器播放流音频和视频，但 Firefox 仅播放音频而不显示视频。

背景

一个优秀的 Udemy 教程为我提供了这个命令：

ffmpeg -f dshow -i video="HD Pro Webcam C920":audio="Microphone (HD Pro Webcam C920)" -rtbufsize 256M -hls_master_name stream.m3u8 -hls_playlist 1 -seg_duration 2 stream.mpd

请注意，我现在正在使用 Windows，但我希望一切在我的最终目标 Linux 上也能顺利进行。

我尝试过不同的相机，结果相同，所以我认为相机本身并不重要。

此命令按我的预期创建了 .mpd 文件和各种块文件。我使用的是dashjs 播放器播放流媒体视频。总之，代码如下：

JS

import dashjs from 'dashjs'
import { ref, onMounted } from 'vue'
const thevideo = ref(null)
onMounted(() => {
  const player = dashjs.MediaPlayer().create();
               player.initialize(thevideo.value!, '/stream/stream.m3u8', true);
}

HTML

<video width=600 height=300 ref="thevideo" controls></video>

我现在正在使用 Vue，但您可以按照自己喜欢的任何方式进行设置，因为我只是想测试一下。

正如我所提到的，此设置在 Chrome 和 Edge 等浏览器中运行良好。我直接在文件夹中ffmpeg创建，dash.js 播放器就可以播放视频和音频。stream.mpdpublic

但是，在 Firefox 中，同一页面只加载了音频。我没有发现与视频下载或浏览器处理相关的错误。它就是无法加载视频。

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

顺便说一句，当我尝试这样的命令来创建 HLS 流时：

ffmpeg -f dshow -i video="HD Pro Webcam C920":audio="Microphone (HD Pro Webcam C920)" -rtbufsize 265M -fflags flush_packets -max_delay 5 -flags -global_header -hls_time 5 -hls_list_size 3 -y stream.m3u8

没有浏览器能够播放 .m3u8 文件。我在 Chrome 中没有看到任何错误，但 Firefox 却说它无法将 stream.m3u8 解析为 XML 文件。我不知道它为什么要尝试这样做，因为它不是 XML 文件，而且我从未说过要将其视为 XML 文件。然而，当我使用此命令并使用实际视频文件作为输入而不是相机输入时，它运行良好。

我使用 mpeg-dash 就没问题了，但如果有人能帮我从相机输入制作一个 m3u8，我也会很感激。但至少我很乐意帮助让 MPEG-DASH 流在 Firefox 中工作。非常感谢。

答案1

我终于找到了Shaka 播放器中的这个问题，它说的正是我的问题。现在我发誓我已经尝试添加-vf format=yuv420p，但我又做了一次，现在视频出现在 Firefox 中。我不清楚所有细节，但它是关于 Firefox 如何期望一种更常见的“色彩空间“对于这个视频。

相关内容