前端音视频处理：如何用 WebRTC 实现实时滤镜与录屏？

大G哥

于 2025-05-12 09:15:16 发布

阅读量212

点赞数 4

文章标签：前端音视频 webrtc

本文链接：https://blog.youkuaiyun.com/Java_fenxiang/article/details/147914045

版权

WebRTC(Web Real - Time Communication)是一项强大的 Web 技术，可实现浏览器之间的实时通信，包括音视频流的传输。下面将详细介绍如何使用 WebRTC 实现实时滤镜与录屏功能。

1. 项目初始化

创建一个 HTML 文件，例如 index.html，并引入必要的元素和样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>WebRTC 实时滤镜与录屏</title>
    <style>
        video {
            width: 640px;
            height: 480px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <video id="localVideo" autoplay muted></video>
    <video id="filteredVideo" autoplay></video>
    <button id="startRecording">开始录屏</button>
    <button id="stopRecording">停止录屏</button>
    <a id="downloadLink" download="recorded_video.webm">下载录屏</a>
    <script src="script.js"></script>
</body>

</html>

2. 获取用户媒体流

在 script.js 文件中，首先获取用户的摄像头和麦克风的媒体流。

const localVideo = document.getElementById('localVideo');
const filteredVideo = document.getElementById('filteredVideo');
const startRecordingButton = document.getElementById('startRecording');
const stopRecordingButton = document.getElementById('stopRecording');
const downloadLink = document.getElementById('downloadLink');

let mediaStream;
let mediaRecorder;
let recordedChunks = [];

async function getMediaStream() {
    try {
        mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        localVideo.srcObject = mediaStream;
    } catch (error) {
        console.error('获取媒体流失败:', error);
    }
}

getMediaStream();

3. 实现实时滤镜

使用 canvas 对视频流应用滤镜，然后将处理后的图像显示在另一个 video 元素中。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 640;
canvas.height = 480;

function applyFilter() {
    ctx.drawImage(localVideo, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // 简单的灰度滤镜示例
    for (let i = 0; i < data.length; i += 4) {
        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = avg;
        data[i + 1] = avg;
        data[i + 2] = avg;
    }

    ctx.putImageData(imageData, 0, 0);
    filteredVideo.srcObject = canvas.captureStream();
}

localVideo.addEventListener('play', () => {
    setInterval(applyFilter, 16); // 约 60 FPS
});

4. 实现录屏功能

使用 MediaRecorder API 录制处理后的视频流。

startRecordingButton.addEventListener('click', () => {
    recordedChunks = [];
    mediaRecorder = new MediaRecorder(filteredVideo.srcObject);

    mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
            recordedChunks.push(event.data);
        }
    };

    mediaRecorder.onstop = () => {
        const blob = new Blob(recordedChunks, { type: 'video/webm' });
        downloadLink.href = URL.createObjectURL(blob);
    };

    mediaRecorder.start();
});

stopRecordingButton.addEventListener('click', () => {
    if (mediaRecorder && mediaRecorder.state!== 'inactive') {
        mediaRecorder.stop();
    }
});

完整代码示例

const localVideo = document.getElementById('localVideo');
const filteredVideo = document.getElementById('filteredVideo');
const startRecordingButton = document.getElementById('startRecording');
const stopRecordingButton = document.getElementById('stopRecording');
const downloadLink = document.getElementById('downloadLink');

let mediaStream;
let mediaRecorder;
let recordedChunks = [];

async function getMediaStream() {
    try {
        mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        localVideo.srcObject = mediaStream;
    } catch (error) {
        console.error('获取媒体流失败:', error);
    }
}

getMediaStream();

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 640;
canvas.height = 480;

function applyFilter() {
    ctx.drawImage(localVideo, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // 简单的灰度滤镜示例
    for (let i = 0; i < data.length; i += 4) {
        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = avg;
        data[i + 1] = avg;
        data[i + 2] = avg;
    }

    ctx.putImageData(imageData, 0, 0);
    filteredVideo.srcObject = canvas.captureStream();
}

localVideo.addEventListener('play', () => {
    setInterval(applyFilter, 16); // 约 60 FPS
});

startRecordingButton.addEventListener('click', () => {
    recordedChunks = [];
    mediaRecorder = new MediaRecorder(filteredVideo.srcObject);

    mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
            recordedChunks.push(event.data);
        }
    };

    mediaRecorder.onstop = () => {
        const blob = new Blob(recordedChunks, { type: 'video/webm' });
        downloadLink.href = URL.createObjectURL(blob);
    };

    mediaRecorder.start();
});

stopRecordingButton.addEventListener('click', () => {
    if (mediaRecorder && mediaRecorder.state!== 'inactive') {
        mediaRecorder.stop();
    }
});