关键词:一对一视频录制,btnStartRecording.onclick函数

一、一对一视频录制

1.1 参考网址

https://www.webrtc-experiment.com/RecordRTC/

视频录制下载网址:

https://github.com/muaz-khan/RecordRTC

【金】第123篇 一对一视频录制(二)之btnStartRecording.onclick函数周三_第1张图片

1.2 研究下如下代码

【金】第123篇 一对一视频录制(二)之btnStartRecording.onclick函数周三_第2张图片

我要的是如下这个:

 

<scriptsrc="https://cdn.WebRTC-Experiment.com/RecordRTC.js">script>

<scriptsrc="https://cdn.webrtc-experiment.com/screenshot.js">script>

 

<divid="elementToShare"style="width:100%;height:100%;background:green;">div>

<script>

var elementToShare =document.getElementById('elementToShare');

var recordRTC =RecordRTC(elementToShare, {

    type:'canvas'

});

recordRTC.startRecording();

recordRTC.stopRecording(function(videoURL) {

    video.src= videoURL;

 

    var recordedBlob =recordRTC.getBlob();

    recordRTC.getDataURL(function(dataURL) { });

});

script>

 

注:录制网页。

1.3 视频录制API

http://recordrtc.org/RecordRTC.html

【金】第123篇 一对一视频录制(二)之btnStartRecording.onclick函数周三_第3张图片

注:RecordRTC是一个WebRTC JS库,可以进行音视频的录制,并且支持谷歌、火狐、Opera、安卓及Microsoft Edge浏览器,可以运行在LinuxMacWindows平台上。

1.4 录制过程

1先来一个按钮

开始录制

2上述按钮所依赖的函数如下:

var btnStartRecording =document.querySelector('#btn-start-recording');

这是个选择器,看下面的代码:

 

P280P676行,如下:

 

           btnStartRecording.onclick= function(event) {

                var button = btnStartRecording;

 

                if(button.innerHTML === 'StopRecording') {

                   btnPauseRecording.style.display = 'none';

                    button.disabled = true;

                    button.disableStateWaiting= true;

                    setTimeout(function() {

                        button.disabled =false;

                       button.disableStateWaiting = false;

                    }, 2000);

 

                    button.innerHTML = 'StarRecording';

 

                    function stopStream() {

                        if(button.stream&& button.stream.stop) {

                           button.stream.stop();

                            button.stream =null;

                        }

 

                        if(button.stream instanceof Array) {

                           button.stream.forEach(function(stream) {

                                stream.stop();

                            });

                            button.stream =null;

                        }

 

                        videoBitsPerSecond =null;

                    }

 

                    if(button.recordRTC) {

                       if(button.recordRTC.length) {

                           button.recordRTC[0].stopRecording(function(url) {

                               if(!button.recordRTC[1]) {

                                   button.recordingEndedCallback(url);

                                   stopStream();

 

                                   saveToDiskOrOpenNewTab(button.recordRTC[0]);

                                    return;

                                }

 

                               button.recordRTC[1].stopRecording(function(url) {

                                   button.recordingEndedCallback(url);

                                   stopStream();

                                });

                            });

                        }

                        else {

                           button.recordRTC.stopRecording(function(url) {

                                button.recordingEndedCallback(url);

                                stopStream();

 

                               saveToDiskOrOpenNewTab(button.recordRTC);

                            });

                        }

                    }

 

                    return;

                }

 

                if(!event) return;

 

                button.disabled = true;

 

                var commonConfig = {

                    onMediaCaptured:function(stream) {

                        button.stream = stream;

                       if(button.mediaCapturedCallback) {

                           button.mediaCapturedCallback();

                        }

 

                        button.innerHTML ='Stop Recording';

                        button.disabled = false;

                    },

                    onMediaStopped: function(){

                        button.innerHTML ='Start Recording';

 

                       if(!button.disableStateWaiting) {

                            button.disabled =false;

                        }

                    },

                    onMediaCapturingFailed:function(error) {

                        if(error.name ==='PermissionDeniedError' && !!navigator.mozGetUserMedia) {

                           intallFirefoxScreenCapturingExtension();

                        }

 

                       commonConfig.onMediaStopped();

                    }

                };

 

                if(mediaContainerFormat.value=== 'h264') {

                    mimeType ='video/webm\;codecs=h264';

                    fileExtension = 'mp4';

 

                    if(typeofMediaRecorder.isTypeSupported === 'function') {

                       if(MediaRecorder.isTypeSupported('video/mpeg')) {

                            mimeType = 'video/mpeg';

                        }

                        else {

                            mimeType ='video/webm\;codecs=h264';

                        }

                    }

                }

 

                if(mediaContainerFormat.value=== 'vp8') {

                    mimeType ='video/webm\;codecs=vp8';

                    fileExtension = 'webm';

                    recorderType = null;

                    type = 'video';

                }

 

                if(mediaContainerFormat.value=== 'vp9') {

                    mimeType ='video/webm\;codecs=vp9';

                    fileExtension = 'webm';

                    recorderType = null;

                    type = 'video';

                }

 

                if(mediaContainerFormat.value=== 'pcm') {

                    mimeType = 'audio/wav';

                    fileExtension = 'wav';

                    recorderType =StereoAudioRecorder;

                    type = 'audio';

                }

 

                if(mediaContainerFormat.value=== 'opus') {

                    mimeType = 'audio/webm';

                    fileExtension = 'webm'; //ogg or webm?

                    recorderType = null;

                    type = 'audio';

               }

 

                if(mediaContainerFormat.value=== 'whammy') {

                    mimeType = 'video/webm';

                    fileExtension = 'webm';

                    recorderType =WhammyRecorder;

                    type = 'video';

               }

 

                if(mediaContainerFormat.value=== 'gif') {

                    mimeType = 'p_w_picpath/gif';

                    fileExtension = 'gif';

                    recorderType = GifRecorder;

                    type = 'gif';

                }

 

                if(recordingMedia.value ==='record-audio') {

                    captureAudio(commonConfig);

 

                   button.mediaCapturedCallback = function() {

                        var options = {

                            type: type,

                            mimeType: mimeType,

                            leftChannel:params.leftChannel || false,

                            disableLogs:params.disableLogs || false

                        };

 

                        if(params.sampleRate) {

                            options.sampleRate= parseInt(params.sampleRate);

                        }

 

                        if(params.bufferSize) {

                            options.bufferSize= parseInt(params.bufferSize);

                        }

 

                        if(recorderType) {

                           options.recorderType = recorderType;

                        }

 

                        if(videoBitsPerSecond){

                           options.videoBitsPerSecond = videoBitsPerSecond;

                        }

 

                        button.recordRTC =RecordRTC(button.stream, options);

 

                       button.recordingEndedCallback = function(url) {

                            setVideoURL(url);

                        };

 

                       button.recordRTC.startRecording();

                       btnPauseRecording.style.display = '';

                    };

                }

 

                if(recordingMedia.value ==='record-audio-plus-video') {

                   captureAudioPlusVideo(commonConfig);

 

                   button.mediaCapturedCallback = function() {

                        if(typeof MediaRecorder=== 'undefined') { // opera or chrome etc.

                            button.recordRTC =[];

 

                           if(!params.bufferSize) {

                                // it fixesaudio issues whilst recording 720p

                               params.bufferSize = 16384;

                            }

 

                            var options = {

                                type: 'audio',// hard-code to set "audio"

                                leftChannel:params.leftChannel || false,

                                disableLogs:params.disableLogs || false,

                                video:recordingPlayer

                            };

 

                           if(params.sampleRate) {

                                options.sampleRate= parseInt(params.sampleRate);

                            }

 

                           if(params.bufferSize) {

                               options.bufferSize = parseInt(params.bufferSize);

                            }

 

                            if(params.frameInterval) {

                               options.frameInterval = parseInt(params.frameInterval);

                            }

 

                            if(recorderType) {

                               options.recorderType = recorderType;

                            }

 

                           if(videoBitsPerSecond) {

                               options.videoBitsPerSecond = videoBitsPerSecond;

                            }

 

                            if(chkMultiStreamRecorder.checked=== true) {

                               options.previewStream = function(previewStream) {

                                   setVideoURL(previewStream, true);

                                };

                            }

 

                            var audioRecorder =RecordRTC(button.stream, options);

 

                            options.type =type;

                            var videoRecorder =RecordRTC(button.stream, options);

 

                            // to sync audio/videoplaybacks in browser!

                           videoRecorder.initRecorder(function() {

                               audioRecorder.initRecorder(function() {

                                   audioRecorder.startRecording();

                                    videoRecorder.startRecording();

                                   btnPauseRecording.style.display = '';

                                });

                            });

 

                           button.recordRTC.push(audioRecorder, videoRecorder);

 

                           button.recordingEndedCallback = function() {

                                var audio = newAudio();

                                audio.src =audioRecorder.toURL();

                                audio.controls= true;

                                audio.autoplay= true;

 

                               recordingPlayer.parentNode.appendChild(document.createElement('hr'));

                               recordingPlayer.parentNode.appendChild(audio);

 

                               if(audio.paused) audio.play();

                            };

                            return;

                        }

 

                        var options = {

                            type: type,

                            mimeType: mimeType,

                            disableLogs:params.disableLogs || false,

                            getNativeBlob:false, // enable it for longer recordings

                            video:recordingPlayer

                        };

 

                        if(recorderType) {

                           options.recorderType = recorderType;

 

                            if(recorderType ==WhammyRecorder || recorderType == GifRecorder) {

                                options.canvas = options.video = {

                                    width:defaultWidth || 320,

                                    height:defaultHeight || 240

                                };

                            }

                        }

 

                        if(videoBitsPerSecond){

                           options.videoBitsPerSecond = videoBitsPerSecond;

                        }

 

                       if(chkMultiStreamRecorder.checked === true) {

                           options.previewStream = function(previewStream) {

                               setVideoURL(previewStream, true);

                            };

 

                            var width = 320;

                            var height = 240;

 

                            var select =document.querySelector('.media-resolutions');

                            var value =select.value;

 

                            if(value !='default') {

                                value =value.split('x');

 

                                if(value.length== 2) {

                                    width =parseInt(value[0]);

                                    height =parseInt(value[1]);

                                }

                            }

 

                            options.video = {

                                width: width,

                                height: height

                            };

                        }

 

                        button.recordRTC =RecordRTC(button.stream, options);

 

                       button.recordingEndedCallback = function(url) {

                            setVideoURL(url);

                        };

 

                       button.recordRTC.startRecording();

                       btnPauseRecording.style.display = '';

                    };

                }

 

                if(recordingMedia.value ==='record-screen') {

                   captureScreen(commonConfig);

 

                    button.mediaCapturedCallback= function() {

                        var options = {

                            type: type,

                            mimeType: mimeType,

                            disableLogs:params.disableLogs || false,

                            getNativeBlob:false, // enable it for longer recordings

                            video:recordingPlayer

                        };

 

                        if(recorderType) {

                           options.recorderType = recorderType;

 

                            if(recorderType == WhammyRecorder|| recorderType == GifRecorder) {

                                options.canvas= options.video = {

                                    width:defaultWidth || 320,

                                    height: defaultHeight|| 240

                                };

                            }

                        }

 

                        if(videoBitsPerSecond){

                           options.videoBitsPerSecond = videoBitsPerSecond;

                        }

 

                        button.recordRTC =RecordRTC(button.stream, options);

 

                       button.recordingEndedCallback = function(url) {

                            setVideoURL(url);

                        };

 

                        button.recordRTC.startRecording();

                       btnPauseRecording.style.display = '';

                    };

                }

 

                // note: audio+tab is supportedin Chrome 50+

                // todo: add audio+tabrecording

                if(recordingMedia.value ==='record-audio-plus-screen') {

                   captureAudioPlusScreen(commonConfig);

 

                   button.mediaCapturedCallback = function() {

                        var options = {

                            type: type,

                            mimeType: mimeType,

                            disableLogs:params.disableLogs || false,

                            getNativeBlob:false, // enable it for longer recordings

                            video: recordingPlayer

                        };

 

                        if(recorderType) {

                           options.recorderType = recorderType;

 

                            if(recorderType ==WhammyRecorder || recorderType == GifRecorder) {

                                options.canvas= options.video = {

                                    width:defaultWidth || 320,

                                    height: defaultHeight || 240

                                };

                            }

                        }

 

                        if(videoBitsPerSecond){

                           options.videoBitsPerSecond = videoBitsPerSecond;

                        }

 

                        button.recordRTC =RecordRTC(button.stream, options);

 

                       button.recordingEndedCallback = function(url) {

                            setVideoURL(url);

                        };

 

                       button.recordRTC.startRecording();

                       btnPauseRecording.style.display = '';

                    };

                }

           };//eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

2017503日星期三

1073金牌