教你用js屏幕录屏加摄像头捕获视频合成后自动上传阿里云oss

教你用js屏幕录屏加摄像头捕获视频合成后自动上传阿里云oss

本节课主要分享两个技术点，一个是怎么调用js进行屏幕录屏，第二个是怎么将录屏文件自动上传到阿里云oss，这个在视频会议和在线教育的时候用的比较多。

一、js录屏+摄像头

首先需要安装chrome扩展,注意，这需要fanqiang，如果打不开，就查看这篇文章手动安装chrome扩展,http://www.bfw.wiki//user10/15640228901296320096.html

安装好chrome插件后，运行下面的代码

<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>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<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 = ...

点击查看剩余70%