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
       ...

点击查看剩余70%