第10章 函数与方法
在本章中,我们将详细介绍RecordRTC提供的核心函数和方法,帮助您更好地掌握这个库的使用。
10.1 核心构造函数
RecordRTC的核心构造函数用于创建录制器实例:
RecordRTC构造函数
// RecordRTC构造函数
var recorder = RecordRTC(mediaStream, options);
// 参数说明:
// mediaStream: MediaStream对象,来自getUserMedia或getDisplayMedia
// options: 配置对象,包含录制参数
// 示例:
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function(stream) {
var recorder = RecordRTC(stream, {
type: 'video',
mimeType: 'video/webm'
});
// 保存实例供后续使用
window.recorder = recorder;
});
10.2 录制控制方法
控制录制过程的核心方法:
录制控制方法
// 开始录制
recorder.startRecording();
// 暂停录制
recorder.pauseRecording();
// 恢复录制
recorder.resumeRecording();
// 停止录制
recorder.stopRecording(function() {
// 停止后的回调函数
var blob = recorder.getBlob();
console.log('录制完成,获取到blob对象');
});
// 获取录制状态
var state = recorder.getState();
// 返回值: 'inactive', 'recording', 'paused', 'stopped'
// 销毁录制器
recorder.destroy();
10.3 数据获取方法
获取录制数据的相关方法:
数据获取方法
// 获取录制的Blob对象
var blob = recorder.getBlob();
// 获取录制的URI
var uri = recorder.toURL();
// 获取录制的缓冲区数据
recorder.getBuffer(function(buffer) {
// buffer包含录制的原始数据
console.log('缓冲区数据:', buffer);
});
// 获取录制的数组缓冲区
recorder.getArrayBuffer(function(arrayBuffer) {
// arrayBuffer包含二进制数据
console.log('数组缓冲区数据:', arrayBuffer);
});
// 保存为文件对话框
RecordRTC.invokeSaveAsDialog(blob, 'my-recording.webm');
// 保存为数据URL
var dataURL = recorder.getDataURL(function(dataURL) {
console.log('数据URL:', dataURL);
});
10.4 静态工具方法
RecordRTC提供的静态工具方法:
静态工具方法
// 检查浏览器支持
var isSupported = RecordRTC.isRecordingSupported();
console.log('浏览器是否支持录制:', isSupported);
// 获取录制器类型
var recorderType = RecordRTC.getFromDisk('all');
console.log('可用的录制器类型:', recorderType);
// 设置调试模式
RecordRTC.debug = true; // 启用调试日志
// 设置默认配置
RecordRTC.setDefaultOptions({
type: 'video',
mimeType: 'video/webm'
});
// 从磁盘获取数据
RecordRTC.getFromDisk('video', function(data) {
console.log('从磁盘获取的视频数据:', data);
});
// 清除磁盘数据
RecordRTC.clearRecordedData();
// 转换为音频上下文
RecordRTC.convertToAudioContext(blob, function(audioContext) {
console.log('转换为音频上下文:', audioContext);
});
10.5 录制器类型方法
不同录制器类型的特定方法:
录制器类型方法
// StereoAudioRecorder特定方法
var audioRecorder = RecordRTC(stream, {
type: 'audio',
recorderType: StereoAudioRecorder
});
// MediaStreamRecorder特定方法
var mediaRecorder = RecordRTC(stream, {
type: 'video',
recorderType: MediaStreamRecorder
});
// GifRecorder特定方法
var gifRecorder = RecordRTC(stream, {
type: 'gif',
recorderType: GifRecorder
});
// CanvasRecorder特定方法
var canvasRecorder = RecordRTC(canvasStream, {
type: 'canvas',
recorderType: CanvasRecorder
});
// WhamRecorder特定方法
var whamRecorder = RecordRTC(stream, {
type: 'video',
recorderType: WhamRecorder
});
10.6 高级方法
一些高级功能方法:
高级方法
// 设置录制时间限制
recorder.setRecordingDuration(30000, function() {
// 30秒后自动停止
console.log('录制时间到达限制');
});
// 初始化视频预览
RecordRTC.initVideoPreview(videoElement, stream);
// 初始化音频预览
RecordRTC.initAudioPreview(audioElement, stream);
// 检查MIME类型支持
var isSupported = RecordRTC.canRecordingType('video/webm');
console.log('MIME类型支持情况:', isSupported);
// 获取浏览器信息
var browserInfo = RecordRTC.browser;
console.log('浏览器信息:', browserInfo);
// 设置自定义前缀
RecordRTC.prefix = 'myapp_';
// 获取录制的文件名
var filename = recorder.getFileName();
console.log('录制文件名:', filename);
// 设置录制的文件名
recorder.setFileName('custom-name.webm');
10.7 错误处理方法
处理录制过程中可能出现的错误:
错误处理方法
// 设置错误处理回调
recorder.onerror = function(error) {
console.error('录制过程中发生错误:', error);
};
// 检查录制支持情况
if (!RecordRTC.isRecordingSupported()) {
console.warn('当前浏览器不支持录制功能');
// 提供替代方案
showAlternativeSolution();
}
// 处理特定录制器错误
try {
var recorder = RecordRTC(stream, options);
recorder.startRecording();
} catch (error) {
console.error('初始化录制器失败:', error);
handleRecorderError(error);
}
// 自定义错误处理函数
function handleRecorderError(error) {
switch (error.name) {
case 'SecurityError':
alert('安全错误:请检查HTTPS设置');
break;
case 'NotSupportedError':
alert('不支持错误:浏览器版本过低');
break;
case 'InvalidStateError':
alert('状态错误:录制器状态异常');
break;
default:
alert('未知错误:' + error.message);
}
}