用RecordRTC在浏览器端进行摄像头视频录制下载

用RecordRTC在浏览器端进行摄像头视频录制下载

用RecordRTC在浏览器端进行摄像头视频录制下载

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

安装后扩展后,可以直接运行下面的代码,点击右上角在编辑器中运行

<style>
    html, body {
        margin: 0!important;
        padding: 0!important;
        text-align: center;

        font-size: 1em;
    }

    video {
        width: 30%;
        border-radius: 5px;
        border: 1px solid black;
    }
</style>
<h1>用 RecordRTC进行摄像头视频录制下载</h1>
<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>


<br>

<button id="btn-start-recording">开始录制</button>
<button id="btn-stop-recording" disabled>停止录制</button>

<hr>
<video controls autoplay playsinline></video>

<script src="http://repo.bfw.wiki/bfwrepo/js/RecordRTC.js"></script>
<script src="http://repo.bfw.wiki/bfwrepo/js/EBML.js"></script>
<!-- ../libs/DBML.js -->

<script>
    var video = document.querySelector('video');

    function captureStream(callback) {
        navigator.mediaDevices.getUserMedia({
            video: true, audio: true
        }).then(function(stream) {
            callback(stream);
        }).catch(function(error) {
            console.error(error);
            alert('Unable to capture your stream. Please check console logs.\n' + error);
        });
    }

    function stopRecordingCallback() {
        video.muted = false;
        video.volume = 1;

        video.src = video.srcObject = null;

        getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
            video.src = URL.createObjectURL(seekableBlob);

            recorder.stream.stop();
            recorder.destroy();
            recorder = null;

            document.getElementById('btn-start-recording').disabled = false;

            invokeSaveAsDialog(seekableBlob, 'seekable-recordrtc.webm');
        });
    }

    var recorder; // globally accessible

    document.getElementById('btn-start-recording').onclick = function() {
        this.disabled = true;
        captureStream(function(stream) {
            video.muted = true;
            video.volume = 0;
            video.srcObject = stream;

            recorder = RecordRTC(stream, {
                type: 'video'
            });

            recorder.startRecording();

            // release stream on stopRecording
            recorder.stream = stream;

            document.getElementById('btn-stop-recording').disabled = false;
        });
    };

    document.getElementById('btn-stop-recording').onclick = function() {
        this.disabled = true;
        recorder.stopRecording(stopRecordingCallback);
    };

    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>

<br><br>

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


{{collectdata}}

网友评论0