Question

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

以下代码：

<!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）如果我选择当前屏幕作为屏幕捕获窗口，它会循环显示相同的屏幕。

查看图片中的问题：

Answer 1

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

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>

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

1 个答案: