1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <title>Record Desktop</title>
    5.     </head>
    6.     <body>
    7.         <h1>Record Desktop with webRTC</h1>
    8.         <div>
    9.             <button id = "record">record</button>
    10.             <button id = "pause">pause</button>
    11.         </div>
    13.         <script>
    14.             'use strict'
    16.             var mediaRecorder;
    17.             const pauseBtn = document.getElementById('pause');
    18.             pauseBtn.disabled = true;
    19.             pauseBtn.onclick = function(ev) {
    20.                 if (!mediaRecorder) {
    21.                     return;
    22.                 }
    24.                 if (pauseBtn.textContent == "pause") {
    25.                     mediaRecorder.pause();
    26.                     pauseBtn.textContent = "resume";
    27.                 }
    28.                 else {
    29.                     mediaRecorder.resume();
    30.                     pauseBtn.textContent = "pause";
    31.                 }
    32.             }
    34.             var buffer = [];
    35.             function onDataAvailable(d) {
    36.                 if (d && d.data && d.data.size > 0) {
    37.                     buffer.push(d.data);
    38.                 }
    39.             }
    41.             function onRecordError(e) {
    42.                 console.error('Recorder error', e);
    43.             }
    45.             const recordBtn = document.getElementById('record');
    46.             function onGetStream(stream) {
    47.                 recordBtn.textContent = "stop";
    48.                 var options = {mimeType: 'video/webm;codecs=vp8'};
    49.                 if (!MediaRecorder.isTypeSupported(options.mimeType)) {
    50.                     console.error(`${options.mimeType} is not supported!`);
    51.                     return;
    52.                 }
    54.                 try {
    55.                     mediaRecorder = new MediaRecorder(stream, options);
    56.                 }
    57.                 catch (e) {
    58.                     console.error('Filed to create MediaRecorder', e);
    59.                     return;
    60.                 }
    62.                 mediaRecorder.ondataavailable = onDataAvailable;
    63.                 mediaRecorder.onerror = onRecordError;
    64.                 mediaRecorder.start(10);
    65.             }
    67.             function saveVideo() {
    68.                 if (buffer) {
    69.                     var blob = new Blob(buffer, {type: 'video/webm'});
    70.                     var url = window.URL.createObjectURL(blob);
    71.                     var a = document.createElement('a');
    73.                     a.href = url;
    74.                     a.style.display = 'none';
    75.                     a.download = 'record.webm';
    76.                     a.click();
    77.                 }
    78.                 else {
    79.                     console.error("record failed");
    80.                 }
    81.             }
    83.             // 捕获视频
    84.             const streamContrains = {
    85.                 video: {
    86.                     width: 1280,
    87.                     height: 720,
    88.                     frameRate: 15,
    89.                 },
    90.                 audio: false
    91.             };
    93.             function onGetStreamError(error) {
    94.                 console.log('getDisplayMedia error', error);
    95.             }
    97.             recordBtn.onclick = function(ev) {
    98.                 if (mediaRecorder && recordBtn.textContent != "record") {
    99.                     recordBtn.textContent = "record";
    100.                     pauseBtn.disabled = false;
    102.                     let tracks = mediaRecorder.stream.getTracks();
    103.                     tracks.forEach(track => track.stop());
    104.                     saveVideo();
    105.                     return;
    106.                 }
    108.                 pauseBtn.disabled = false;
    109.                 const mDevices = navigator.mediaDevices;
    110.                 const promise = mDevices.getDisplayMedia(streamContrains);
    111.                 promise.then(
    112.                     onGetStream
    113.                 ).catch(
    114.                     onGetStreamError
    115.                 );
    116.             }
    117.         </script>
    118.     </body>
    119. </html>

    https://blog.csdn.net/leapmotion/article/details/108611151