内容纲要
利用 WebRTC 实现浏览器拍照功能 —— 实操指南
在浏览器中利用 WebRTC 可以轻松实现拍照功能，并且可以对拍下来的图片进行滤镜处理。本文将详细讲解如何通过 WebRTC API 从视频流中获取图片，并保存和处理照片，带你逐步完成一个简单的实操项目。
WebRTC 的拍照功能概述
在之前介绍的 WebRTC 实时音视频采集基础上，我们可以通过 HTML5 的 <canvas> 元素从视频流中截取当前视频帧，完成拍照功能。此外，浏览器还提供了简单的图片滤镜功能，让你能够对照片进行一些视觉效果处理。
实操演示：拍照和滤镜处理
接下来，我们通过代码演示如何实现拍照和滤镜功能。
第一步：获取视频流并显示在页面上
首先，使用 WebRTC 的 getUserMedia 方法打开摄像头，采集视频流，并将其显示在 <video> 标签中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebRTC 拍照功能</title>
</head>
<body>
<h1>拍照演示</h1>
<video id="player" autoplay playsinline></video>
<button id="takePhoto">拍照</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// 获取 video 标签
const videoElement = document.getElementById('player');
const canvasElement = document.getElementById('canvas');
const takePhotoButton = document.getElementById('takePhoto');
// 获取摄像头视频流并显示
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
videoElement.srcObject = stream;
})
.catch(err => {
console.error('获取摄像头失败:', err);
});
// 拍照功能
takePhotoButton.addEventListener('click', () => {
const context = canvasElement.getContext('2d');
context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
});
</script>
</body>
</html>代码说明
- HTML 部分：包括
<video>标签用于显示视频流，<canvas>用于保存拍下来的图片，<button>用于触发拍照事件。 - JavaScript 部分：调用
getUserMedia方法采集视频流并将其显示在<video>中。点击 "拍照" 按钮时，将视频帧绘制到<canvas>元素上，完成拍照操作。
第二步：保存照片
拍照完成后，照片默认会保存在 <canvas> 中。我们可以将 <canvas> 中的内容保存为图片文件并下载。
<button id="savePhoto">保存照片</button>
<script>
const savePhotoButton = document.getElementById('savePhoto');
savePhotoButton.addEventListener('click', () => {
const link = document.createElement('a');
link.href = canvasElement.toDataURL('image/jpeg');
link.download = 'photo.jpg';
link.click();
});
</script>代码说明
- 当点击 "保存照片" 按钮时，调用
<canvas>的toDataURL方法将图像转换为 JPEG 格式，并生成下载链接。
第三步：滤镜效果处理
接下来，我们为拍下的照片添加滤镜效果。我们可以通过简单的 CSS 滤镜实现这些效果。
<select id="filter">
<option value="none">无滤镜</option>
<option value="grayscale(1)">黑白</option>
<option value="sepia(1)">复古</option>
<option value="invert(1)">反转</option>
</select>
<script>
const filterSelect = document.getElementById('filter');
filterSelect.addEventListener('change', () => {
canvasElement.style.filter = filterSelect.value;
});
</script>代码说明
- HTML：增加了一个
<select>下拉菜单，用于选择不同的滤镜效果。 - JavaScript：当用户选择滤镜时，修改
<canvas>的filter样式属性，应用不同的滤镜效果。
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebRTC 拍照功能</title>
<style>
canvas {
margin-top: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>拍照演示</h1>
<video id="player" autoplay playsinline></video>
<button id="takePhoto">拍照</button>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="savePhoto">保存照片</button>
<h2>选择滤镜</h2>
<select id="filter">
<option value="none">无滤镜</option>
<option value="grayscale(1)">黑白</option>
<option value="sepia(1)">复古</option>
<option value="invert(1)">反转</option>
</select>
<script>
// 获取 video、canvas 和按钮元素
const videoElement = document.getElementById('player');
const canvasElement = document.getElementById('canvas');
const takePhotoButton = document.getElementById('takePhoto');
const savePhotoButton = document.getElementById('savePhoto');
const filterSelect = document.getElementById('filter');
// 获取摄像头视频流并显示
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
videoElement.srcObject = stream;
})
.catch(err => {
console.error('获取摄像头失败:', err);
});
// 拍照功能
takePhotoButton.addEventListener('click', () => {
const context = canvasElement.getContext('2d');
// 设置滤镜效果，应用于拍照时
context.filter = filterSelect.value;
context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
});
// 保存照片
savePhotoButton.addEventListener('click', () => {
const link = document.createElement('a');
link.href = canvasElement.toDataURL('image/jpeg');
link.download = 'photo.jpg';
link.click();
});
// 滤镜效果改变时，应用到 Canvas 的 style 上
filterSelect.addEventListener('change', () => {
canvasElement.style.filter = filterSelect.value;
});
</script>
</body>
</html>总结
通过本文的介绍，你已经学会了如何使用 WebRTC 和 HTML5 的 <canvas> 实现浏览器拍照功能，并且能够保存照片和应用滤镜效果。希望你能进一步扩展这个项目，尝试更多滤镜效果或者增加一些照片编辑功能。
