JavaScript提供了丰富的原生API支持音视频处理与流媒体操作，开发者可以直接在浏览器环境中实现音视频采集、格式处理、实时传输等功能，不需要依赖额外的插件。这些能力广泛应用于视频会议、在线直播、音视频编辑等场景。
核心API介绍
MediaDevices API
该API用于获取用户的音视频输入设备权限，采集摄像头和麦克风的音视频流，是所有音视频处理的基础。通过navigator.mediaDevices.getUserMedia方法可以发起权限申请并获取媒体流。
MediaStream API
媒体流对象代表了一段实时的音视频数据流，支持对轨道进行增删、监听状态变化等操作，是流媒体传输和处理的核心载体。
WebRTC相关API
包含RTCPeerConnection、RTCDataChannel等接口，用于实现浏览器之间的实时音视频传输，是端到端流媒体操作的核心技术。
基础音视频采集实现
首先需要获取用户的摄像头和麦克风权限，拿到媒体流后可以将流绑定到<video>标签上实现本地预览。
// 获取本地音视频流并预览
async function getLocalStream() {
try {
// 申请音视频权限，获取媒体流
const stream = await navigator.mediaDevices.getUserMedia({
video: true, // 开启视频采集
audio: true // 开启音频采集
});
// 获取video元素
const videoElement = document.getElementById('localVideo');
// 将媒体流绑定到video元素
videoElement.srcObject = stream;
// 返回流对象供后续使用
return stream;
} catch (error) {
console.error('获取媒体流失败:', error);
return null;
}
}
对应的HTML部分只需要一个<video>标签即可实现预览：
<video id="localVideo" autoplay muted playsinline></video>
音视频流处理操作
拿到媒体流之后，可以对流中的音视频轨道进行自定义处理，比如添加滤镜、调整音量、裁剪画面等。下面是一个给视频添加灰度滤镜的示例，通过Canvas捕获视频帧并处理后重新输出为新的媒体流。
// 给视频流添加灰度滤镜
async function addGrayFilter(originalStream) {
// 创建video元素用于播放原始流
const video = document.createElement('video');
video.srcObject = originalStream;
video.play();
// 创建canvas用于绘制处理后的帧
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 等待video元数据加载完成
await new Promise(resolve => {
video.onloadedmetadata = () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
resolve();
};
});
// 创建新的媒体流
const outputStream = canvas.captureStream(30); // 30帧率
// 定时绘制处理后的帧
function drawFrame() {
// 绘制原始视频帧
ctx.drawImage(video, 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 gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
data[i] = gray;
data[i + 1] = gray;
data[i + 2] = gray;
}
ctx.putImageData(imageData, 0, 0);
// 循环绘制
requestAnimationFrame(drawFrame);
}
drawFrame();
// 合并原始音频轨道到新流
originalStream.getAudioTracks().forEach(track => {
outputStream.addTrack(track);
});
return outputStream;
}
流媒体实时传输实现
使用WebRTC的RTCPeerConnection可以实现两个浏览器之间的实时音视频流传输，下面是简单的点对点传输示例，省略了信令服务器的部分，假设已经通过其他方式交换了SDP和ICE候选信息。
// 创建点对点连接并发送流
async function createPeerConnection(localStream) {
// 创建RTCPeerConnection实例，配置STUN服务器用于NAT穿透
const peerConnection = new RTCPeerConnection({
iceServers: [
{ urls: 'stun:stun.ipipp.com:3478' }
]
});
// 将本地流的所有轨道添加到连接中
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
// 监听ICE候选信息
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
// 这里需要将候选信息发送给远端，通过信令服务器中转
console.log('新的ICE候选:', event.candidate);
}
};
// 监听远端流到达
peerConnection.ontrack = (event) => {
const remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = event.streams[0];
};
// 创建offer并设置为本地描述
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
// 这里需要将offer发送给远端，远端收到后创建answer并返回
console.log('本地offer:', offer);
return peerConnection;
}
注意事项
- 音视频采集API需要在HTTPS环境或者localhost环境下才能正常使用，否则会抛出权限错误。
- WebRTC的NAT穿透需要配置可用的STUN/TURN服务器，否则在复杂网络环境下可能无法建立连接。
- 处理媒体流时需要注意性能问题，比如高帧率、高分辨率的视频处理会占用较多的CPU资源，必要时可以降低处理频率。
- 不同浏览器对API的支持程度略有差异，开发时建议做好兼容性判断。
JavaScript音视频处理流媒体操作WebRTCMediaStream修改时间：2026-07-18 02:33:29