選択した画面領域のrecordRTCノードモジュールを使用してデスクトップ画面ビデオを記録する方法は？

Question

私はデスクトップ画面の選択領域を記録するために必要なNW.jsを使用してデスクトップアプリケーションに取り組んでいます。現在ビデオを記録するためのRecordRTCノードモジュールを使用しています。しかし、これは私にフルスクリーンビデオ録画を与える。プラットフォーム間でこれを達成するための他のパッケージ（win/linux/mac）があれば、助けてください。

Answer 1

このデモを確認してください（ "RecordRTCを使用して録音クロップド画面" などの名前）：

• https://www.webrtc-experiment.com/RecordRTC/simple-demos/record-cropped-screen.html

ここでは、完全なHTMLコードです（任意のHTTPSページまたはローカルホストまたはノード上で試します-webkit）：

<button id="btn-start-recording">Start Recording</button> 
<button id="btn-stop-recording" style="display: none;">Stop Recording</button> 

<br><hr> 

<div id="edit-panel" style="border-bottom: 1px solid;"> 
    <div> 
     <label for="x">X</label> 
     <input type="number" name="x" id="x" value="0" /> 
    </div> 
    <div> 
     <label for="y">Y</label> 
     <input type="number" name="y" id="y" value="0" /> 
    </div> 
    <div> 
     <label for="w">Width (-1 = Full size)</label> 
     <input type="number" name="w" id="w" value="-1" /> 
    </div> 
    <div> 
     <label for="h">Height (-1 = Full size)</label> 
     <input type="number" name="h" id="h" value="-1" /> 
    </div> 

    <button id="update" style="display: none;">Update X-Y Width-Height Coordinates</button> 

    <canvas></canvas> 
</div> 

<video id="mediaElement"></video> 

<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script> 
<script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"></script> 
<script> 
// this script tag is taken from: https://github.com/andersevenrud/webrtc-screenshare-crop-demo 
var CROP_X = 10; 
var CROP_Y = 20; 
var CROP_W = 320; // default width 
var CROP_H = 240; // default height 
var VIDEO_WIDTH = 0; 
var VIDEO_HEIGHT = 0; 
var MAX_VIDEO_WIDTH = 1920; 
var MAX_VIDEO_HEIGHT = 1080; 
var _canvas; 
var _context; 

var htmlCanvasElement = document.querySelector('canvas'); 

// Form elements 
document.getElementById("x").value = CROP_X; 
document.getElementById("y").value = CROP_Y; 
document.getElementById("w").value = CROP_W; 
document.getElementById("h").value = CROP_H; 

document.getElementById("update").onclick = function() { 
    var x = document.getElementById("x").value << 0; 
    var y = document.getElementById("y").value << 0; 
    var w = document.getElementById("w").value << 0; 
    var h = document.getElementById("h").value << 0; 

    if (x >= 0) { 
     CROP_X = x; 
    } 
    if (y >= 0) { 
     CROP_Y = y; 
    } 

    CROP_W = w || 0; 
    CROP_H = h || 0; 
}; 

_context = htmlCanvasElement.getContext('2d'); 

/** 
* Crops a video frame and shows it to the user 
*/ 
function CropFrame(ev, stream, video, callback) { 
    callback = callback || function() {}; 

    _canvas = htmlCanvasElement; 

    if (CROP_X < 0) { 
     CROP_X = 0; 
    } 
    if (CROP_Y < 0) { 
     CROP_Y = 0; 
    } 
    if (CROP_W <= 0) { 
     CROP_W = VIDEO_WIDTH; 
    } 
    if (CROP_H <= 0) { 
     CROP_H = VIDEO_HEIGHT; 
    } 
    if (CROP_W > MAX_VIDEO_WIDTH) { 
     CROP_W = MAX_VIDEO_WIDTH; 
    } 
    if (CROP_H > MAX_VIDEO_HEIGHT) { 
     CROP_W = MAX_VIDEO_HEIGHT; 
    } 

    _canvas.width = CROP_W; 
    _canvas.height = CROP_H; 

    _context.drawImage(video, CROP_X, CROP_Y, CROP_W, CROP_H, 0, 0, CROP_W, CROP_H); 

    // We need to scale down the image or else we get HTTP 414 Errors 
    // Also we scale down because of RTC message length restriction 
    var scanvas = document.createElement('canvas'); 
    scanvas.width = _canvas.width; 
    scanvas.height = _canvas.height; 

    var wRatio = _canvas.width/320; 
    var hRatio = _canvas.height/240; 
    var maxRatio = Math.max(wRatio, hRatio); 
    if (maxRatio > 1) { 
     scanvas.width = _canvas.width/maxRatio; 
     scanvas.height = _canvas.height/maxRatio; 
    } 
    scanvas.getContext('2d').drawImage(_canvas, 0, 0, scanvas.width, scanvas.height); 

    callback(scanvas.toDataURL("image/jpeg")); 
} 

var recorder; 

function captureScreen(cb) { 
    getScreenId(function(error, sourceId, screen_constraints) { 
     navigator.getUserMedia(screen_constraints, cb, function(error) { 
      console.error('getScreenId error', error); 

      alert('Failed to capture your screen. Please check Chrome console logs for further information.'); 
     }); 
    }); 
} 

var mediaElement = document.querySelector('#mediaElement'); 

document.querySelector('#btn-start-recording').onclick = function() { 
    document.querySelector('#btn-start-recording').style.display = 'none'; 

    navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia; 
    captureScreen(function(screen) { 
     var inited = false; 

     mediaElement.ontimeupdate = function(ev) { 
      if (!inited) { 
       VIDEO_WIDTH = mediaElement.offsetWidth; 
       VIDEO_HEIGHT = mediaElement.offsetHeight; 

       mediaElement.style.display = 'none'; 
       document.querySelector('#edit-panel').style.display = 'block'; 

       inited = true; 
      } 

      CropFrame(ev, screen, mediaElement); 
     }; 

     mediaElement.src = URL.createObjectURL(screen); 
     mediaElement.play(); 
     mediaElement.screen = screen; 

     addStreamStopListener(screen, function() { 
      document.querySelector('#btn-stop-recording').onclick(); 
     }); 

     // RecordRTC goes here 
     var captureStream = htmlCanvasElement.captureStream(); 
     recorder = RecordRTC(captureStream, { 
      type: 'video' 
     }); 
     recorder.startRecording(); 

     document.querySelector('#btn-stop-recording').style.display = 'inline'; 
    }); 
}; 

document.querySelector('#btn-stop-recording').onclick = function() { 
    document.querySelector('#btn-stop-recording').style.display = 'none'; 

    recorder.stopRecording(function() { 
     var blob = recorder.getBlob(); 

     document.querySelector('#edit-panel').style.display = 'none'; 
     mediaElement.style.display = 'block'; 

     mediaElement.src = URL.createObjectURL(blob); 
     mediaElement.play(); 

     if (mediaElement.screen && mediaElement.screen.getVideoTracks) { 
      mediaElement.screen.stop(); 
      mediaElement.screen = null; 
     } 

     document.querySelector('#btn-start-recording').style.display = 'inline'; 
    }); 
}; 

function addStreamStopListener(stream, callback) { 
    var streamEndedEvent = 'ended'; 
    if ('oninactive' in stream) { 
     streamEndedEvent = 'inactive'; 
    } 
    stream.addEventListener(streamEndedEvent, function() { 
     callback(); 
     callback = function() {}; 
    }, false); 
    stream.getAudioTracks().forEach(function(track) { 
     track.addEventListener(streamEndedEvent, function() { 
      callback(); 
      callback = function() {}; 
     }, false); 
    }); 
    stream.getVideoTracks().forEach(function(track) { 
     track.addEventListener(streamEndedEvent, function() { 
      callback(); 
      callback = function() {}; 
     }, false); 
    }); 
} 

function querySelectorAll(selector) { 
    return Array.prototype.slice.call(document.querySelectorAll(selector)); 
} 

querySelectorAll('input').forEach(function(input) { 
    input.onkeyup = input.oninput = function() { 
     if (!document.querySelector('#update').onclick) return; 
     document.querySelector('#update').onclick(); 
    }; 
}); 
</script>