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

教你用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 = 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>

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

点击分享，我们发现可以录制视频并且播放了

二、阿里云oss自动上传

我们首先引入bfwone.js基础框架

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>

下面use aliyun-oss-sdk，直接调用上传代码就行了

        use(["aliyun-oss-sdk.min"], function() {
            const client = new OSS({
                region: 'oss-cn-beijing',
                accessKeyId: 'LTAI4FxV5ZvuoQ1mF5XhhuG5',
                accessKeySecret: 'IYw8mnQgLj6Q7GRhhB9tzqiLz3VRqi',
                bucket: 'bfwtest',
            });

            client.put('test.webm', blob);//此处blob就是视频录制的视频文件的二进制信息
        });

三、完整代码

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

<h3>10秒钟自动停止录屏并自动上传oss</h3>
<video controls autoplay playsinline style="width: 40%;"></video>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<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;
                        use(["aliyun-oss-sdk.min"], function() {
                            const client = new OSS({
                                region: 'oss-cn-beijing',
                                accessKeyId: 'LTAI4FxV5ZvuoQ1mF5XhhuG5',
                                accessKeySecret: 'IYw8mnQgLj6Q7GRhhB9tzqiLz3VRqi',
                                bucket: 'bfwtest',
                            });

                            client.put('test.webm', blob).then(function(res){alert("录屏上传阿里云oss成功，地址："+res.url);});
                        });

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

1ok，今天就说到录屏和上传，下一节课我们主要说明怎么进行白板共享绘制，让所有人都能同时绘制白板

打赏博主×

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

网友评论0

Linux下5种网络IO模型

flutter的生命周期

架构设计的10种设计模式，你都知道哪几种

centos安装和配置Firejail过程及命令大全

利用burpsuite暴力破解网站账号密码

介绍四款浏览器中拖拽设计网页的js插件VvvebJs、GrapesJS、ContentBuilder

php与js的十六进制字符串互转

AI可以模仿你的声音，播音员要失业了

centos下安装nodejs、babel、less、uglifyjs环境

创业必看-不懂合伙，必定散伙

{{item.title}}

何为BFWSOA框架

BFWSOA框架特性

BFWSOA框架程序流程图

MVCVPSCW七层架构

BFWSOA框架创建一个小应用

BFWSOA框架路由模式与Apache、Nginx配置

BFWSOA框架表单验证与提交

BFWSOA框架数据库操作

BFWSOA 缓存设置

BFWSOA模型简介

为啥meta ceo认为这几年无法实现真正的AGI?

bootstrap如何给dom元素添加页面滚动入场动画？

chatgpt3.5免注册使用了，有没有开放的api接口可免费无限调用？

bfwsoa如何开启异步缓存和缓存依赖？

同一个bfwsoa应用如何实现不同域名跳转到不同的子应用空间？

js中文分词后如何对多个标题按文字匹配度排序？

如果openai等ai人工智能变成黑客的工具，那么全球信息系统如何应对？

如何获取浏览器当前的网络类型和网速是否畅通？

php代码如何进行混淆不可读？

如何将网页交互逻辑代码封装打包成wasm防止被破解？