1

Two Chrome apps/extensions have caught my eye on the webstore:

  1. Screencastify
  2. Snagit

I am aware of chrome.desktopCapture and how I can use getUserMedia() to capture a live stream of a user's desktop.

Example:

navigator.webkitGetUserMedia({
    audio: false,
    video: {
        mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: desktop_id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
        }
    }
}, successCallback, errorCallback);

I'd love to create my own screencast app that allows audio recording as well as embedding webcam capture in a given corner of the video like Screencastify.

I understand capturing the desktop and the audio and video of the user, but how do you put it all together and make it into a video file?

I'm assuming there is a way to create a video file from a getUserMedia() stream on ChromeOS. Something that only ChromeOS has implemented?

How is it done? Thanks in advance for your answers.

4

1 回答 1

2

视频文件的实际编码和保存尚未在 Chrome 中实现。Mozilla 目前拥有它的新生形式。我不确定它在 ChromeOS 中的状态。不过，我可以向您提供一些我在使用 Chrome 浏览器进行开发期间收集到的信息。

将媒体流编码、保存和分发为视频的两种方法是客户端和服务器端。

服务器端：
需要某种媒体服务器。到目前为止，我发现的最好的免费/开源解决方案是Kurento。媒体流被上传（块或整体）或流式传输到媒体服务器，在其中对其进行编码并保存以供以后使用。这也适用于点对点，充当中间人，记录数据流。

客户端：
这都是关于基于浏览器的编码。目前我已经在 Chrome 中成功测试了两个工作选项。

  1. Whammy.js：
    此方法使用 canvas hack 来保存 webp 图像数组，然后将它们编码到 webm 容器中。虽然速度很慢，但它适用于视频。不支持音频。我正在努力解决这个问题。
  2. videoconverter.js（原为 ffmpeg-asm.js）：
    这是使用Emscripten将ffmpeg直接移植到 JavaScript 。它适用于音频和视频。它也是巨大的，脚本方面的，大约 25MB 未压缩。我不在生产中使用它的另一个原因是 ffmpeg 目前处于不稳定的许可基础上。它没有得到尽可能多的优化。使其可靠地投入生产可能是一个相当大的项目。

希望这至少可以为您提供研究途径。

于 2015-03-18T20:56:28.647 回答