HTML MediaRecorder 录制在 1080p 流上滞后
HTML MediaRecorder recording lags on 1080p stream
我正在使用以下配置通过 getUserMedia API 读取 1080p 和 720p 外部摄像机流
let c_constraints = {
audio: false,
video: {
deviceId: { exact: videoValue },
width: { min: 320, ideal: 1280, max: 1920 },
height: { min: 144, ideal: 720, max: 1080 },
framerate: { min: 15, ideal: 30, max: 60 }
}
}
navigator.mediaDevices.getUserMedia(c_constraints)
.then((stream) => c_handleStream(stream))
.catch((e) => c_handleError(e));
并使用以下内容录制流
try {
c_recorder = new MediaRecorder(currentCameraStream);
} catch (e) {
throw e
}
问题 -> 这在高端设备上运行良好,但在具有 4GB RAM、Intel core i3 的设备上,在以 1080p 和 720p 录制时我得到 lags 并且视频是前3秒卡顿,后面的视频还好。
另外,在VLC媒体播放器中播放这段录制的视频时,定时器直接从00:01跳到00:03,
如果这是一个 memory/buffer 问题,其他 blob 也会受到影响。我是否遗漏了什么,我应该以不同的方式或任何不同的选项使用 MediaRecorder。
PS:我曾尝试使用 Sir Muaz Khan 的 RecordRTC,但对于 CPU 来说似乎很重,因为 CPU 在上述机器上的使用率超过 70%使机器超级慢。
请说明一下。
终于成功了,如果这对任何人有帮助,如果您正在录制的机器处于省电模式,audio/video 不同步问题可以通过从控制面板启用性能模式来解决
我正在使用以下配置通过 getUserMedia API 读取 1080p 和 720p 外部摄像机流
let c_constraints = {
audio: false,
video: {
deviceId: { exact: videoValue },
width: { min: 320, ideal: 1280, max: 1920 },
height: { min: 144, ideal: 720, max: 1080 },
framerate: { min: 15, ideal: 30, max: 60 }
}
}
navigator.mediaDevices.getUserMedia(c_constraints)
.then((stream) => c_handleStream(stream))
.catch((e) => c_handleError(e));
并使用以下内容录制流
try {
c_recorder = new MediaRecorder(currentCameraStream);
} catch (e) {
throw e
}
问题 -> 这在高端设备上运行良好,但在具有 4GB RAM、Intel core i3 的设备上,在以 1080p 和 720p 录制时我得到 lags 并且视频是前3秒卡顿,后面的视频还好。
另外,在VLC媒体播放器中播放这段录制的视频时,定时器直接从00:01跳到00:03,
如果这是一个 memory/buffer 问题,其他 blob 也会受到影响。我是否遗漏了什么,我应该以不同的方式或任何不同的选项使用 MediaRecorder。
PS:我曾尝试使用 Sir Muaz Khan 的 RecordRTC,但对于 CPU 来说似乎很重,因为 CPU 在上述机器上的使用率超过 70%使机器超级慢。
请说明一下。
终于成功了,如果这对任何人有帮助,如果您正在录制的机器处于省电模式,audio/video 不同步问题可以通过从控制面板启用性能模式来解决