使用 RecordRTC 进行屏幕录制 - 无法录制在屏幕上或通过扬声器播放的视频声音答案

【问题标题】：Screen recording using RecordRTC - Unable to record video sounds playing on screen or through speaker使用 RecordRTC 进行屏幕录制 - 无法录制在屏幕上或通过扬声器播放的视频声音
【发布时间】：2018-05-03 11:46:22
【问题描述】：

我正在尝试使用用户的屏幕+麦克风上播放的视频录制屏幕。

查看演示：https://jsfiddle.net/4z447wpn/5/

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Screen recording using RecordRTC</title>
<style>
    html, body{
        margin: 0!important;
        padding: 0!important;
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>

<video controls autoplay height="600" width="800" style="float: left; margin-top: 20px"></video>

<iframe width="420" height="315"  style="float: right; margin-top: 20px"
src="https://www.youtube.com/embed/9Zr2jjg1X-U">
</iframe> 

<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"></script>
<script>
function captureScreen(cb) {
    getScreenId(function (error, sourceId, screen_constraints) {
        navigator.mediaDevices.getUserMedia(screen_constraints).then(cb).catch(function(error) {
          console.error('getScreenId error', error);
          alert('Failed to capture your screen. Please check browser console logs for further information.');
        });
    });
}
function captureAudio(cb) {
    navigator.mediaDevices.getUserMedia({audio: true, video: false}).then(cb);
}
function keepStreamActive(stream) {
    var video = document.createElement('video');
    video.muted = true;
    setSrcObject(stream, video);
    video.style.display = 'none';
    (document.body || document.documentElement).appendChild(video);
}

captureScreen(function(screen) {
    keepStreamActive(screen);

    captureAudio(function(mic) {
        keepStreamActive(mic);

        screen.width = window.screen.width;
        screen.height = window.screen.height;
        screen.fullcanvas = true;

        var recorder = RecordRTC([screen, mic], {
            type: 'video',
            mimeType: 'video/webm',
            previewStream: function(s) {
                document.querySelector('video').muted = true;
                setSrcObject(s, document.querySelector('video'));
            }
        });

        //Start recording
        recorder.startRecording();

        //Stop recording after specific seconds
        setTimeout(function() {
            recorder.stopRecording(function() {
                var blob = recorder.getBlob();
                document.querySelector('video').src = URL.createObjectURL(blob);
                document.querySelector('video').muted = false;
                screen.getVideoTracks().forEach(function(track) {
                    track.stop();
                });
                screen.getAudioTracks().forEach(function(track) {
                    track.stop();
                });
                mic.getVideoTracks().forEach(function(track) {
                    track.stop();
                });
                mic.getAudioTracks().forEach(function(track) {
                    track.stop();
                });
            });
        }, 20 * 1000);

    });
});
</script>
</body>
</html>

注意事项：

(1) 在您允许访问浏览器屏幕和麦克风后快速播放 iframe 视频（加载在右侧），因此它将开始录制所有内容并在 20 秒后自动停止并播放录制的视频。暂停右侧视频以收听录制的声音。

(2) Chrome 用户需要安装扩展：https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk

我面临的问题：

(1) 它没有录制屏幕上视频中播放的声音。虽然它使用用户的麦克风捕获全屏。

(2) 如果我选择当前屏幕作为屏幕截图窗口，它会循环显示相同的屏幕。

查看图片中的问题：

【问题讨论】：

标签： javascript webrtc recordrtc

【解决方案1】：

在 getScreenId 上传递“second”参数后，您的演示可以在 localhost 或基于非 iframe 的 HTTPS 网站上运行，例如

getScreenId(callback, true);

第二个参数，即布尔值true 启用扬声器。

注意：如果仍然不起作用，则在隐身模式下测试以忽略/绕过缓存。

注意 2：在 localhost 或非 iframe HTTPS 网站上进行测试，即在您自己的域而不是 jsfiddle 上进行测试。

2018 年 5 月 8 日星期二更新了答案

请试试这个代码：

<!DOCTYPE html>
<html>
<head>
    <title>Screen recording using RecordRTC</title>
    <style>
        html, body{
            margin: 0!important;
            padding: 0!important;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <button class="btn btn-primary" id="stoprecording">STOP RECORDING</button>

    <video id="preview-screen" controls autoplay height="600" width="800" style="float: left; margin-top: 20px"></video>

    <video width="420" height="315" controls="" autoplay="" loop="" style="float: right; margin-top: 20px" onloadedmetadata="typeof OnLoadedMetaData === 'function' ? OnLoadedMetaData() : setTimeout(function() {OnLoadedMetaData();}, 3000);">
        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    </video>

    <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"></script>
    <script>
    function captureScreen(cb) {
        getScreenId(function (error, sourceId, screen_constraints) {
            navigator.mediaDevices.getUserMedia(screen_constraints).then(cb).catch(function(error) {
              console.error('getScreenId error', error);
              alert('Failed to capture your screen. Please check browser console logs for further information.');
            });
        }, true);
    }
    function captureAudio(cb) {
        navigator.mediaDevices.getUserMedia({audio: true, video: false}).then(cb);
    }
    function keepStreamActive(stream) {
        var video = document.createElement('video');
        video.muted = true;
        setSrcObject(stream, video);
        video.style.display = 'none';
        (document.body || document.documentElement).appendChild(video);
    }

    var recorder = '';
    var screenRec = '';
    var micRec = '';

    function OnLoadedMetaData (){
        captureScreen(function(screen) {
            keepStreamActive(screen);

            captureAudio(function(mic) {
                keepStreamActive(mic);

                screen.width = window.screen.width;
                screen.height = window.screen.height;
                screen.fullcanvas = true;

                recorder = RecordRTC([screen, mic], {
                    type: 'video',
                    mimeType: 'video/webm',
                    previewStream: function(s) {
                        document.querySelector('#preview-screen').muted = true;
                        setSrcObject(s, document.querySelector('#preview-screen'));
                    }
                });

                screenRec = screen;
                micRec = mic;

                //Start recording
                recorder.startRecording();

            });

            addStreamStopListener(screen, function() {
                btnStopRecording.click();
            });
        });
    }

    var btnStopRecording = document.getElementById('stoprecording');
    btnStopRecording.onclick = function() {
        this.disabled = true;

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

            document.querySelector('#preview-screen').src = URL.createObjectURL(blob);
            document.querySelector('#preview-screen').muted = false;

            screenRec.getTracks().concat(micRec.getTracks()).forEach(function(track) {
                track.stop();
            });
        });
    };

    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);
        });
    }
    </script>
</body>
</html>

【讨论】：

更新了 getScreenId(callback, true) 中的参数在 localhost 中使用 https 和非 iframe（这意味着使用 mp4 视频作为源播放的视频元素）和浏览器中的隐私浏览/隐身模式进行测试。但它不会录制麦克风以外的声音。
请为 youtube 视频设置 autoplay=true 或类似标志。在我这边，它将 youtube 音频、麦克风和全屏录制到一个 WebM 中。添加停止录制按钮，而不是自动停止视频或单击“停止屏幕共享”蓝色按钮退出屏幕捕获。
我尝试了自动播放、停止屏幕共享和停止按钮，但没有任何效果。如果您发现代码有任何问题，请在此处查看代码：gist.github.com/hardiktailored/28303f600548e2ccfa7300a65e28689f
更新了答案。请检查。