JavaScript通过HTML5 API实现音视频处理，1. 使用MediaDevices API获取摄像头和麦克风流；2. 结合Canvas进行视频帧滤镜处理；3. 利用MediaRecorder录制并保存音视频；4. 通过Web Audio API实现音频分析与可视化，结合新技术持续提升浏览器多媒体能力。
音视频处理技术在现代Web开发中越来越重要，JavaScript作为浏览器端的核心语言，已经具备了强大的多媒体操控能力。通过HTML5和相关API的支持，开发者可以直接在浏览器中实现音视频的播放、录制、剪辑、滤镜处理甚至实时通信，而无需依赖第三方插件。
1. 使用MediaDevices API获取音视频流
JavaScript可以通过 navigator.mediaDevices.getUserMedia() 方法访问用户的摄像头和麦克风，获取音视频流。这是实现视频会议、拍照、录音等功能的基础。
示例代码：
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById('video').srcObject = stream;
} catch (err) {
console.error("无法访问媒体设备:", err);
}
}
该方法返回一个Promise，成功后得到MediaStream对象，可直接赋值给元素的srcObject属性进行预览。
立即学习“Java免费学习笔记（深入）”；
2. 利用Canvas进行视频帧处理
结合元素，可以在视频播放过程中逐帧提取图像并进行处理，比如添加滤镜、灰度化、边缘检测等。
基本流程如下：
- 将视频绘制到Canvas上（使用
drawImage） - 通过
getImageData获取像素数据 - 修改像素值实现图像处理
- 用
putImageData将处理后的图像回显
例如实现灰度滤镜：
Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const video = document.getElementById('video');
function renderGrayScale() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = frame.data;
for (let i = 0; i < data.length; i += 4) {
const gray = (data[i] + data[i+1] + data[i+2]) / 3;
data[i] = gray; // R
data[i+1] = gray; // G
data[i+2] = gray; // B
}
ctx.putImageData(frame, 0, 0);
requestAnimationFrame(renderGrayScale);
}
3. 录制音视频：MediaRecorder API
JavaScript可以使用MediaRecorder接口录制从getUserMedia获得的音视频流，并将其保存为Blob对象，便于上传或下载。
示例：
let chunks = []; let recorder;async function startRecording() { const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); recorder = new MediaRecorder(stream);
recorder.ondataavailable = event => { if (event.data.size > 0) { chunks.push(event.data); } };
recorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'recording.webm'; a.click(); };
recorder.start(); }
function stopRecording() { recorder.stop(); // 停止流中的轨道，关闭摄像头 recorder.stream.getTracks().forEach(track => track.stop()); }
4. Web Audio API进行音频处理
对于更复杂的音频操作，如音效、可视化、音频分析等，可以使用Web Audio API。
它允许创建音频上下文、连接节点（如增益、滤波器、分析器），实现高级音频处理。
简单示例：播放音频并可视化波形
const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const analyser = audioContext.createAnalyser(); analyser.fftSize = 2048;const bufferLength = analyser.frequencyBinCount; const dataArray = new Uint8Array(bufferLength);
// 假设已有audio元素 const source = audioContext.createMediaElementSource(audioElement); source.connect(analyser); analyser.connect(audioContext.destination);
function draw() { requestAnimationFrame(draw); analyser.getByteTimeDomainData(dataArray); // 绘制到canvas上显示波形 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); const sliceWidth = canvas.width 1.0 / bufferLength; let x = 0; for (let i = 0; i < bufferLength; i++) { const v = dataArray[i] / 128.0; const y = v canvas.height / 2; if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } x += sliceWidth; } ctx.stroke(); }
基本上就这些核心能力。随着WebAssembly和WebCodecs等新技术的发展，JavaScript在音视频处理上的性能和灵活性还在不断提升，未来能在浏览器中实现更接近原生应用的多媒体体验。
