javascript在更高的分辨率下获取显示媒体记录

问题描述 投票：0回答：1

我正试图用 MediaRecorder API 这是相当直接的：从getDisplayMedia获取流，然后记录它。

问题：这只记录最大屏幕尺寸，但没有更多。所以，如果我的屏幕是1280720，它不会记录19201080。

这可能看起来很明显，但我的意图是，它应该记录较大的分辨率里面的较小分辨率。例如，我的屏幕是1280720。enter image description here

红色的矩形代表了我的实际屏幕记录的内容 周围的黑色矩形只是简单的黑色空间 但整个视频现在是一个更高的分辨率，19201080，这对youtube来说很有用，因为youtube会缩小720和1080分辨率之间的任何东西，这是个问题。

总之，我试着简单地将getDisplayMedia的流添加到视频元素的视频中。vid.srcObject = stream然后做了一个新的画布，分辨率为19201080，并在animate循环中只做了 ctx.drawImage(vid, offsetX, offsetY)循环外，在制作MediaRecorder的地方，简单地做了 newStream = myCanvas.captureStream() 按照 API的文档然而，问题是由于巨大的画布开销，一切都很慢，帧率绝对糟糕（没有视频示例，但自己测试一下）。

那么有没有什么方法可以优化画布，使其不影响帧率呢（试着研究了一下 屏外画布 但我找不到从它本身获取流的方法来与MediaRecorder一起使用，所以这并没有什么帮助），或者有没有更好的方法来捕捉和记录画布，或者有没有更好的方法在更大的分辨率内，用客户端大小的JavaScript来记录屏幕？如果不是用客户端大小的JavaScript，是否有某种实时视频编码器（ffmpeg太慢了）可以在服务器上运行，然后将画布的每一帧发送到服务器并保存在那里？有没有什么更好的方法可以用任何一种JavaScript来制作一个视频录像机--客户端或服务器或两者兼而有之？

javascript node.js html5-canvas mediarecorder get-display-media
1个回答
1
投票

不知道你的代码是什么样的，但我设法用这段代码获得了顺利的体验。

(你也可以在这里找到非常好的例子: https:/mozdevs.github.ioMediaRecorder-examples）。)

<!doctype html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="script.js"></script>
</head>
<body>
  <canvas id="canvas" style="background: black"></canvas>
</body>

// DISCLAIMER: The structure of this code is largely based on examples
// given here: https://mozdevs.github.io/MediaRecorder-examples/.

window.onload = function () {
  navigator.mediaDevices.getDisplayMedia({
    video: true
  })
  .then(function (stream) {

    var video = document.createElement('video');
    // Use "video.srcObject = stream;" instead of "video.src = URL.createObjectURL(stream);" to avoid
    // errors in the examples of https://mozdevs.github.io/MediaRecorder-examples/
    // credits to https://stackoverflow.com/a/53821674/5203275
    video.srcObject = stream;
    video.addEventListener('loadedmetadata', function () {
      initCanvas(video);
    });
    video.play();
  });
};

function initCanvas(video) {

  var canvas = document.getElementById('canvas');

  // Margins around the video inside the canvas.
  var xMargin     = 100;
  var yMargin     = 100;
  
  var videoWidth  = video.videoWidth;
  var videoHeight = video.videoHeight;

  canvas.width  = videoWidth  + 2 * xMargin;
  canvas.height = videoHeight + 2 * yMargin;

  var context = canvas.getContext('2d');
  var draw = function () {
    // requestAnimationFrame(draw) will render the canvas as fast as possible
    // if you want to limit the framerate a particular value take a look at
    // https://stackoverflow.com/questions/19764018/controlling-fps-with-requestanimationframe
    requestAnimationFrame(draw);
    context.drawImage(video, xMargin, yMargin, videoWidth, videoHeight);
  };

  requestAnimationFrame(draw);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.