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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0