第2章 安装与配置

在本章中，我们将学习如何在项目中安装和配置RecordRTC库，包括CDN引入、NPM安装和手动下载等方式。

2.1 安装方式

RecordRTC提供了多种安装方式，您可以根据项目需求选择合适的方式。

CDN引入

最简单的方式是通过CDN引入RecordRTC库：

<!-- 引入RecordRTC -->
<script src="https://cdn.jsdelivr.net/npm/recordrtc@5.6.2/RecordRTC.min.js"></script>

NPM安装

对于使用模块化开发的项目，可以通过NPM安装：

// 安装RecordRTC
npm install recordrtc

// 在项目中引入
import RecordRTC from 'recordrtc';

// 或者使用require
const RecordRTC = require('recordrtc');

手动下载

您也可以从GitHub下载源码并手动引入：

// 下载后引入本地文件
<script src="./js/RecordRTC.js"></script>

2.2 基本配置

RecordRTC提供了丰富的配置选项，可以根据需求进行自定义。

基本配置示例

// 基本配置
var options = {
    type: 'video',              // 录制类型：audio, video, screen等
    mimeType: 'video/webm',     // MIME类型
    width: 1280,                // 视频宽度
    height: 720,                // 视频高度
    video: {
        width: 1280,
        height: 720
    },
    canvas: {
        width: 1280,
        height: 720
    }
};

var recorder = RecordRTC(mediaStream, options);

2.3 浏览器兼容性

RecordRTC支持主流浏览器，但需要注意各浏览器的兼容性差异：

浏览器 支持版本 备注
Chrome 49+ 完整支持
Firefox 52+ 完整支持
Safari 11+ 部分功能支持
Edge 79+ 完整支持
移动端Chrome 60+ 基本支持

2.4 权限配置

在使用RecordRTC之前，需要获取用户的媒体设备权限：

获取媒体权限

// 获取摄像头和麦克风权限
navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then(function(stream) {
    // 成功获取媒体流
    console.log('媒体流获取成功');
    
    // 初始化RecordRTC
    var recorder = RecordRTC(stream, {
        type: 'video'
    });
    
    // 开始录制
    recorder.startRecording();
}).catch(function(error) {
    // 处理错误
    console.error('获取媒体流失败:', error);
});

2.5 环境要求

使用RecordRTC需要满足以下环境要求：

  • HTTPS协议：出于安全考虑，现代浏览器要求在HTTPS环境下才能访问媒体设备
  • 用户授权：必须获得用户明确授权才能访问摄像头和麦克风
  • 现代浏览器：需要支持WebRTC的现代浏览器
  • 媒体设备：需要有可用的摄像头和/或麦克风设备