为啥我录制出来的视频很卡？

Posted 2023-04-12

你录制出来的视频很卡，那是因为你的手机内存不够，所以导致你录出来视频很卡，一般像录制视频的话一定要手机运行内存很大的话，这样录出来的视频就不会卡。 参考技术A 回答

您好，亲。若手机播放视频较卡，请检查：本地播放：1.建议使用设备内置三星视频功能，播放观察(排除第三方播放器软件问题)。2.通过设备自身拍摄一段视频，播放观察（排除源文件问题，可能与视频分辨率、帧速等相关参数有关）。3.若问题依然存在，建议更新机器固件版本。（升级之前将手机中数据如电话本、图片等备份）。在线播放：1.建议检查网络是否正常（由于网络速度不稳定或网速较慢导致）。2.建议使用其他在线播放器软件进行播放观察（播放器软件服务器不稳定等问题）。

感谢您的咨询，很高兴回答您的问题。

为啥我的 JS 生成的视频无法在 Firefox 中播放？

【中文标题】为啥我的 JS 生成的视频无法在 Firefox 中播放？

【英文标题】：Why are my JS-generated videos not playing in Firefox?为什么我的 JS 生成的视频无法在 Firefox 中播放？

【发布时间】：2019-02-16 08:10:27

【问题描述】：

我有一个屏幕录像机网络扩展程序，可以将录制的视频生成为下载。在 Chrome 中一切正常，但生成的视频在 Firefox 中都没有播放。

我已经尝试过 .webm（通过 VP9 编解码器）和 .mp4（通过 H264）。相关代码为：

recorder.addEventListener('stop', evt => 
    blob = new Blob(recorder.chunks, 'type': 'video/webm; codecs=vp9');
    blob_url = window.URL.createObjectURL(blob);
    //...

也试过

'type': 'video/mp4; codecs=H264'

在 Firefox 中我只看到：

我做错了什么？

[编辑]

按照@epistemex 的有用回答，我现在在创建MediaRecorder 时指定webm，而不是指定任何编解码器。

MediaRecorder(master_stream, mimeType: 'video/webm');

后来

blob = new Blob(recorder.chunks); //<-- not setting mime here now

...但 Firefox 仍然说它无法播放生成的文件，即使

MediaRecorder.isTypeSupported("video/webm") //true

[编辑 2 - 包括更多代码]

    if (rec_prefs.rec_vid == 'screen') listen_for_stop_screen_sharing();
    recorder = new MediaRecorder(master_stream, mimeType: 'video/webm');
    recorder.start();
    recorder.chunks = [];
    recorder.addEventListener('dataavailable', evt => 
        recorder.chunks.push(evt.data);
    , false);
    rec_stopped_dfd = new Promise((resolve) => 
        recorder.addEventListener('stop', evt => 
            blob = new Blob(recorder.chunks);
            blob_url = window.URL.createObjectURL(blob);
            resolve();
        , false);
    );

对recorder.stop() 的调用是在响应按钮点击的回调中：

function stop_recording() 
    master_stream.getTracks().forEach(track => track.stop());
    if (recorder && recorder.state != 'inactive') 
        recorder.stop();

是的，我可以确认数组不为空。一切都在 Chrome 中完美运行 - 没有错误、控制台等。

【问题讨论】：

您是否尝试过下载视频并在专用播放器中播放？如果文件以任何方式格式错误，它可能会给出一些错误或警告，这可能是一个提示。在文件有效性方面，Chrome 可能会更宽松。

Chrome 确实似乎更宽松。我认为下面的答案是我失败的原因。谢谢。

请包括recorder 声明、recorder.chunks 声明、ondataavailable 处理程序（如果有）以及对recorder.stop() 的调用。另外，您实际录制流媒体多久了？根据经验，1s 以下不会被记录...如果您可以确认 recorder.chunks 确实是一个包含至少一个非 0 的 Blob 的数组 .size。

@Kaiido 谢谢，见编辑 2。

奇怪...您确实从 MediaRecorder 构造函数中删除了所有选项，对吗？ （我看到它仍然存在于您的编辑 2 中）。即recorder = new MediaRecorder(master_stream);.

【参考方案1】：

Firefox 不支持使用 vp9 编解码器的音频/webm，也不支持使用 H.264 编码数据的 MP4 容器（这可能与许可/法律方面有关）。

您可以使用MediaRecorder.isTypeSupported() 测试支持以检查支持：

console.log("video/webm: ", MediaRecorder.isTypeSupported("video/webm"))
console.log("video/webm; codecs=vp9: ", MediaRecorder.isTypeSupported("video/webm; codecs=vp9"))
console.log("video/mp4; codecs=H264: ", MediaRecorder.isTypeSupported("video/mp4; codecs=H264"))

您需要注意的另一件事是，为 Blob 设置 mime-type 不会影响任何形式的数据 本身 - 这只是元数据。您必须在 MediaRecorder 的选项对象中指定 mime-type（您没有在问题中显示此部分，因此您可能已经这样做了，但以防万一）：

const mediaRecorder = new MediaRecorder(stream, 
    mimeType: "video/webm"
  );

那么该怎么办：好吧，如果不支持，除了使用受支持的编解码器之外，您可以做的事情真的不多。您可以简单地省略更具体的 vp9 要求，让浏览器决定使用什么，或者使用简化的后备，例如：

const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm";  // here: assumed support (todo)

const mediaRecorder = new MediaRecorder(stream, 
    mimeType: mime
  );

希望这会有所帮助！

【讨论】：

真的很有帮助，谢谢。查看我的代码，我目前没有在实例化MediaRecorder 时指定媒体类型，所以这对我来说是新的。我试试看。

已编辑的问题...仍然没有乐趣。 Firefox 显示同样的错误。