Chrome desktopCapture API 带有 MediaStreamRecorder 库

Question

我正在尝试使用 MediaStreamRecorder library 实现 Chrome desktopCapture API。一切都很完美，但视频质量非常模糊和糟糕。 1 分钟的桌面捕获视频占用 14MB。

下面是我的代码：

 var pending_request_id;

 chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
 startRecording();
 sendResponse({"success": true});
  });

function getUserMediaError() {
console.log("getUserMedia() failed.");
}

function onAccessApproved(id) {
 if (!id) {
 console.log("Access rejected.");
 return;
 }
  navigator.webkitGetUserMedia({
     audio:false,
    video: { mandatory: { chromeMediaSource: "desktop",
                        chromeMediaSourceId: id } }
  }, onMediaSuccess, getUserMediaError);
}

function startRecording()  {
pending_request_id = chrome.desktopCapture.chooseDesktopMedia(
   ["window"], onAccessApproved);
}



function onMediaSuccess(stream) {
 console.log("rcvd stream");
 var mediaRecorder = new MediaStreamRecorder(stream);
 mediaRecorder.mimeType = 'video/mp4';

 //i dont want strechy video so i fixed the width and height of recorder equal to window
mediaRecorder.width = window.screen.width; 
mediaRecorder.height = window.screen.height;

mediaRecorder.ondataavailable = function (blob) {

    var blobURL = URL.createObjectURL(blob);
    console.log('<a href="' + blobURL + '">' + blobURL + '</a>');


    var link=blobURL;
var videoInfo="Compiled Video file size: " + Math.ceil(blob.size / 1024) + "KB";

console.log(link);
console.log(videoInfo);

};
mediaRecorder.start(30000); // i want unlimited recording time so i increased the timeslice
  stream.onended = function() {
      mediaRecorder.stop();
  //finalizeVideo();
  console.log("Ended"); };
   }


function onMediaError(e) {
console.error('media error', e);
}

在使用这个库之前，我尝试使用 Whammy.js 保存流媒体视频。但我没有这样做。然后我找到了这个图书馆。

问题：

有什么方法可以提高视频质量并压缩视频大小吗？

如何将 return 的视频保存为 blob:chrome url 作为完全合格的视频保存到桌面？

作为替代方案，如果有人知道如何在 Whammy.js 中执行此操作，请告诉我

谢谢，

Answer 1

这可能有助于提高您的视频质量 -

navigator.webkitGetUserMedia({
    audio:false,
    video: { mandatory: { chromeMediaSource: "desktop",
                          chromeMediaSourceId: id,
                          maxWidth: 4000,
                          maxHeight: 4000 } }
  }, onMediaSuccess, getUserMediaError);
}

Chrome desktopCapture API 带有 MediaStreamRecorder 库

Chrome desktopCapture API with MediaStreamRecorder library

javascript

video

google-chrome-extension

webrtc