RecordRTC实现录视频录声音音频录屏幕效果代码
代码语言:html
所属分类:多媒体
代码描述:RecordRTC实现录视频录声音音频录屏幕效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script> <script src="https://cdn.webrtc-experiment.com/gif-recorder.js"></script> <script src="https://cdn.webrtc-experiment.com/getScreenId.js"></script> <!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support --> <script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script> </head> <body> <article> <section class="experiment recordrtc"> <h2 class="header"> <select class="recording-media"> <option value="record-video">Video</option> <option value="record-audio">Audio</option> <option value="record-screen">Screen</option> </select> into <select class="media-container-format"> <option>WebM</option> <option disabled>Mp4</option> <option disabled>WAV</option> <option disabled>Ogg</option> <option>Gif</option> </select> <button>Start Recording</button> </h2> <div style="text-align: center; display: none;"> <button id="save-to-disk">Save To Disk</button> <button id="open-new-tab">Open New Tab</button> </div> <br> <video controls muted></video> </section> <script> (function() { var params = {}, r = /([^&=]+)=?([^&]*)/g; function d(s) { return decodeURIComponent(s.replace(/\+/g, ' ')); } var match, search = window.location.search; while (match = r.exec(search.substring(1))) { params[d(match[1])] = d(match[2]); if(d(match[2]) === 'true' || d(match[2]) === 'false') { params[d(match[1])] = d(match[2]) === 'true' ? true : false; } } window.params = params; })(); function addStreamStopListener(stream, callback) { var streamEndedEvent = 'ended'; if ('oninactive' in stream) { streamEndedEvent = 'inactive'; } stream.addEventListener(streamEndedEvent, function() { callback(); callback = function() {}; }, false); stream.getAudioTracks().forEach(function(track) { track.addEventListener(streamEndedEvent, function() { callback(); callback = function() {}; }, false); }); stream.getVideoTracks().forEach(function(track) { track.addEventListener(streamEndedEvent, function() { callback(); callback = function() {}; }, false); }); } </script> <script> function intallFirefoxScreenCapturingExtension() { InstallTrigger.install({ 'Foo': { // URL: 'https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/', URL: 'https://addons.mozilla.org/firefox/downloads/file/355418/enable_screen_capturing_in_firefox-1.0.006-fx.xpi?src=cb-dl-hotness', toString: function() { return this.URL; } } }); } var recordingDIV = document.querySelector('.recordrtc'); var recordingMedia = recordingDIV.querySelector('.recording-media'); var recordingPlayer = recordingDIV.querySelector('video'); var mediaContainerFormat = recordingDIV.querySelector('.media-container-format'); window.onbeforeunload = function() { recordingDIV.querySelector('button').disabled = false; recordingMedia.disabled = false; mediaContainerFormat.disabled = false; }; recordingDIV.querySelector('button').onclick = function() { var button = this; if(button.innerHTML === 'Stop Recording') { button.disabled = true; button.disableStateWaiting = true; setTimeout(function() { button.disabled = false; button.disableStateWaiting = false; }, 2 * 1000); button.innerHTML = 'Star Recording'; function stopStream() { if(button.stream && button.stream.stop) { button.stream.stop(); button.stream = 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; } 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(); } }; var mimeType = 'video/webm'; if(mediaContainerFormat.value === 'Mp4') { mimeType = 'video/mp4'; } if(recordingMedia.value === 'record-video') { captureVideo(commonConfig); button.mediaCapturedCallback = function() { button.recordRTC = RecordRTC(button.stream, { type: mediaContainerFormat.value === 'Gif' ? 'gif' : 'video', mimeType: isChrome ? null: mimeType, disableLogs: params.disableLogs || false, canvas: { width: params.canvas_width || 320, height: params.canvas_height || 240 }, frameInterval: typeof params.frameInterval !== 'undefined' ? parseInt(params.frameInterval) : 20 // minimum time between pushing frames to Whammy (in milliseconds) }); button.recordingEndedCallback = function(url) { recordingPlayer.src = null; if(mediaContainerFormat.value === 'Gif') { recordingPlayer.pause(); recordingPlayer.poster = url; recordingPlayer.onended = function() { recordingPlayer.pause(); recordingPlayer.poster = URL.createObjectURL(button.recordRTC.blob); }; return; } recordingPlayer.src = url; recordingPlayer.play(); recordingPlayer.onended = function() { recordingPlayer.pause(); recordingPlayer.src = URL.createObjectURL(button.recordRTC.blob); }; }; button.recordRTC.startRecording(); }; } if(recordingMedia.value === 'record-audio') { captureAudio(commonConfig); button.mediaCapturedCallback = function() { var options = { type: 'audio', mimeType: mimeType, bufferSize: typeof params.bufferSize == 'undefined' ? 0 : parseInt(params.bufferSize), sampleRate: typeof params.sampleRate == 'undefined' ? 44100 : parseInt(params.sampleRate), leftChannel: params.leftChannel || false, disableLogs: params.disableLogs || false, recorderType: webrtcDetectedBrowser === 'edge' ? StereoAudioRecorder : null }; if(typeof params.sampleRate == 'undefined') { delete options.sampleRate; } button.recordRTC = RecordRTC(button.stream, options); button.recordingEndedCallback = function(url) { var audio = new Audio(); audio.src = url; audio.controls = true; recordingPlayer.parentNode.appendChild(document.createElement('hr')); recordingPlayer.parentNode.appendChild(audio); if(audio.paused) audio.play(); audio.onended = function() { audio.pause(); audio.src = URL.createObjectURL(button.recordRTC.blob); }; }; button.recordRTC.startRecording(); }; } 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 fixes audio issues whilst recording 720p params.bufferSize = 16384; } var options = { type: 'audio', bufferSize: typeof params.bufferSize == 'undefined' ? 0 : parseInt(params.bufferSize), sampleRate: typeof params.sampleRate == 'undefined' ? 44100 : parseInt(params.sampleRate), leftChannel: params.leftChannel || false, disableLogs: params.disableLogs || false, recorderType: webrtcDetectedBrowser === 'edge' ? StereoAudioRecorder : null }; if(typeof params.sampleRate == 'undefined') { delete options.sampleRate; } var audioRecorder = RecordRTC(button.stream, options); var videoRecorder = RecordRTC(button.stream, { type: 'video', disableLogs: params.disableLogs || false, canvas: { width: params.canvas_width || 320, height: params.canvas_height || 240 }, frameInterval: typeof params.frameInterval !== 'undefined' ? parseInt(params.frameInterval) : 20 // minimum time between pushing frames to Whammy (in milliseconds) }); // to sync audio/video playbacks in browser! videoRecorder.initRecorder(function() { audioRecorder.initRecorder(function() { audioRecorder.startRecording(); videoRecorder.startRecording(); }); }); button.recordRTC.push(audioRecorder, videoRecorder); button.recordingEndedCallback = function() { var audio = new Audio(); audio.src = audioRecorder.toURL(); audio.controls = true; audio.autoplay = true; audio.onloadedmetadata = function() { recordingPlayer.src = videoRecorder.toURL(); recordingPlayer.play(); }; recordingPlayer.parentNode.appendChild(document.createElement('hr')); recordingPlayer.parentNode.appendChild(audio); if(audio.paused) audio.play(); }; return; } button.recordRTC = RecordRTC(button.stream, { type: 'video', mimeType: mimeType, disableLogs: params.disableLogs || false, // bitsPerSecond: 25 * 8 * 1025 // 25 kbits/s getNativeBlob: false // enable it for longer recordings }); button.recordingEndedCallback = function(url) { recordingPlayer.muted = false; recordingPlayer.removeAttribute('muted'); recordingPlayer.src = url; recordingPlayer.play(); recordingPlayer.onended = function() { recordingPlayer.pause(); recordingPlayer.src = URL.createObjectURL(button.recordRTC.blob); }; }; button.recordRTC.startRecording(); }; } if(recordingMedia.value === 'record-screen') { captureScreen(commonConfig); button.mediaCapturedCallback = function() { button.recordRTC = RecordRTC(button.stream, { type: mediaContainerFormat.value === 'Gif' ? 'gif' : 'video', mimeType: mimeType, disableLogs: params.disableLogs || false, canvas: { width: params.canvas_width || 320, height: params.canvas_height || 240 } }); button.recordingEndedCallback = function(url) { recordingPlayer.src = null; if(mediaContainerFormat.value === 'Gif') { recordingPlayer.pause(); recordingPlayer.poster = url; reco.........完整代码请登录后点击上方下载按钮下载查看
网友评论0