在 session 进行时流式传输 canvas session 发送块到主机服务器

Question

CONTEXT : 记录一个 LONG canvas session.

我现在可以：使用 navigator.mediaDevices 将网络摄像头连接到 canvas，用户点击“拍照”=> 然后将照片发送到主机服务器进行保存。

我想要的：“记录”更长的 session HTML 中有滑块可以添加一些 html 效果....那么长 session 被记录以将其保存在主机服务器中，同时 session 正在完成（发送较小的块而不是等待 session 完成）。

PRECISION ：我强调 WHILE，因为当我搜索它时，我发现了一些关于记录 session (canvas) 然后（只有当用户点击停止时，它可以被发送到主机服务器.....)

小 session 秒（1 分钟、2 分钟）没问题，但是 1 小时、2 小时等呢？？？？

我想：当用户开始 session（点击开始）时，它开始实时发送块而 session 是还在继续。

可能吗？

是否有 javascript 库可以让我先行一步？

Answer 1

听起来 MediaRecorder 就是您要查找的内容。它旨在记录和编码 audio/video 内容。

您可以在调用 start() 时使用 timeslice 参数，或者手动调用 requestData() 来触发 dataavailable 事件，这些事件将发出到目前为止记录的内容（因为最后一个 dataavailable 事件）。

const mediaRecorder = new MediaRecorder(YOUR_STREAM);

mediaRecorder.ondataavailable = ({ data }) => {
    // The data property should be a Blob with encoded media.
};

// This will trigger a dataavailable event every second.
mediaRecorder.start(1000);

// This will trigger a single dataavailable event.
mediaRecorder.requestData();

在 session 进行时流式传输 canvas session 发送块到主机服务器

Stream a canvas session sending chunks to host server WHILE the session is going on

streaming

canvas

html5-canvas

webrtc