当前位置：首页 > article >正文

使用 MediaDevices API 录制和下载视频教程

article 2025/2/28 19:39:24

使用 MediaDevices API 录制和下载视频教程

简介

本教程将介绍如何使用浏览器的 MediaDevices API 实现视频录制和下载功能。我们将逐步学习如何:

获取摄像头权限和视频流
创建视频预览
实现录制功能
下载录制的视频

前提条件

现代浏览器(支持 MediaDevices API)
基本的 HTML 和 JavaScript 知识
设备上有可用的摄像头

HTML 结构

首先创建必要的 HTML 元素:

<!DOCTYPE html>
<html>
<head>
    <title>视频录制演示</title>
</head>
<body>
    <div class="container">
        <video id="preview" width="480" height="360" autoplay muted></video>
        <div class="controls">
            <button id="startButton">开始录制</button>
            <button id="stopButton" disabled>停止录制</button>
            <button id="downloadButton" disabled>下载视频</button>
        </div>
    </div>
</body>
</html>

JavaScript 实现

下面是完整的 JavaScript 代码实现:

let mediaRecorder;
let recordedChunks = [];

// 获取 DOM 元素
const videoElement = document.getElementById('preview');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const downloadButton = document.getElementById('downloadButton');

// 初始化摄像头
async function initCamera() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        });
        videoElement.srcObject = stream;
        
        // 创建 MediaRecorder 实例
        mediaRecorder = new MediaRecorder(stream);
        
        // 处理录制数据
        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                recordedChunks.push(event.data);
            }
        };
        
        // 录制完成时的处理
        mediaRecorder.onstop = () => {
            downloadButton.disabled = false;
        };
        
        startButton.disabled = false;
        
    } catch (err) {
        console.error('无法访问摄像头:', err);
        alert('无法访问摄像头，请确保已授予权限');
    }
}

// 开始录制
function startRecording() {
    recordedChunks = [];
    mediaRecorder.start();
    startButton.disabled = true;
    stopButton.disabled = false;
}

// 停止录制
function stopRecording() {
    mediaRecorder.stop();
    startButton.disabled = false;
    stopButton.disabled = true;
}

// 下载视频
function downloadVideo() {
    const blob = new Blob(recordedChunks, {
        type: 'video/webm'
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'recording.webm';
    a.click();
    URL.revokeObjectURL(url);
}

// 添加事件监听
startButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);
downloadButton.addEventListener('click', downloadVideo);

// 页面加载完成后初始化摄像头
window.addEventListener('load', initCamera);

CSS 样式（可选）

添加一些基本样式让界面更美观:

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.controls {
    margin-top: 20px;
}

button {
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}