chrome浏览器使用RecordRTC进行屏幕与摄像头混合录制

chrome浏览器使用RecordRTC进行屏幕与摄像头混合录制

我们经常看到别人录的教学视频中，能看到自己的电脑桌面，右下角会显示自己的摄像头窗口，那是通过专门的录屏软件实现了，今天我教大家利用chrome浏览器，加上几行代码，就能轻松实现录屏+摄像头混合录制效果

首先需要安装chrome扩展,注意，这需要fanqiang，如果打不开，就查看这篇文章手动安装chrome扩展,点击查看

第二步就是具体的html代码了

<style>
    html, body {
        margin: 0!important;
        padding: 0!important;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1em;
    }

    video {
        width: 30%;
        border-radius: 5px;
        border: 1px solid black;
    }
</style>

<title>使用RecordRTC进行屏幕和摄像头混合录制</title>

<h1>
    使用RecordRTC进行屏幕和摄像头混合录制
</h1>

<p>
    10秒后自动停止录制
</p>
<p>
    首先需要<a href="https://chrome.google.com/webstore/detail/getusermedia/nbnpcmljmiinldficickhdoaiblgkggc">安装chrome扩展</a>,注意，这需要fanqiang，如果打不开，就查看这篇文章手动安装chrome扩展,<a href="http://www.bfw.wiki//user10/15640228901296320096.html">点击查看</a>
</p>
<video controls autoplay playsinline style="width: 40%;"></video>

<script src="http://repo.bfw.wiki/bfwrepo/js/RecordRTC.js"></script>
<script>
    var streamid = null;
    if (!navigator.getUserMedia && !navigator.mediaDevices.getUserMedia) {
        var error = 'Your browser does NOT supports getDisplayMedia API.';
        document.querySelector('h1').innerHTML = error;

        document.querySelector('video').style.display = 'none';
        document.getElementById('btn-start-recording').style.display = 'none';
        document.getElementById('btn-stop-recording').style.display = 'none';
        throw new Error(error);
    }


    function invokeGetDisplayMedia(success, error) {
        var displaymediastreamconstraints = {
            video: {
                displaySurface: 'monitor', // monitor, window, application, browser
                logicalSurface: true,
                cursor: 'always' // never, always, motion
            }
        };

        // above constraints are NOT supported YET
        // that's why overridnig them
        displaymediastreamconstraints = {
            video: {
                mediaSource: 'screen'
            }
        };

        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(displaymediastreamconstraints).then(success).catch(error);
        } else {
            navigator.getUserMedia(displaymediastreamconstraints).then(success).catch(error);
        }
    }

    function captureScreen(callback) {
        invokeGetDisplayMedia(function(screen) {
            addStreamStopListener(screen, function() {
                if (window.stopCallback) {
                    window.stopCallback();
                }

            });
            callback(screen);
        }, function(error) {
            console.error(error);
            alert('Unable to capture your screen. Please check console logs.\n' + error);
        });
    }

    function captureCamera(cb) {
        navigator.mediaDevices.getUserMedia({
            audio: true, video: true
        }).then(cb);
    }

    function keepStreamActive(stream) {
        var video = document.createElement('video');
        video.muted = true;
        video.srcObject = stream;
        video.style.display = 'none';
        (document.body || document.documentElement).appendChild(video);
    }

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

        setTimeout(function() {
            captureCamera(function(camera) {
                keepStreamActive(camera);

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

                camera.width = 320;
                camera.height = 240;
                camera.top = screen.height - camera.height;
                camera.left = screen.width - camera.width;

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

                recorder.startRecording();

                window.stopCallback = function() {
                    window.stopCallback = null;

                    recorder.stopRecording(function() {
                        var blob = recorder.getBlob();
                        document.querySelector('video').srcObject = null;
                        document.querySelector('video').src = URL.createObjectURL(blob);
                        document.querySelector('video').muted = false;

                        [screen, camera].forEach(function(stream) {
                            stream.getTracks().forEach(function(track) {
                                track.stop();
                            });
                        });
                    });
                };

                window.timeout = setTimeout(window.stopCallback, 10 * 1000);
            });

        }, 1000);

    });

    function addStreamStopListener(stream, callback) {
        stream.addEventListener('ended', function() {
            callback();
            callback = function() {};
        }, false);
        stream.addEventListener('inactive', function() {
            callback();
            callback = function() {};
        }, false);
        stream.getTracks().forEach(function(track) {
            track.addEventListener('ended', function() {
                callback();
                callback = function() {};
            }, false);
            track.addEventListener('inactive', function() {
                callback();
                callback = function() {};
            }, false);
        });
    }
</script>

<footer style="margin-top: 20px; text-align: left;">
    <small id="send-message"></small>
</footer>