CodeWalk

MediaStream API 实现摄像头/麦克风采集

作者:编译有声 · 2026-05-30 12:55

如何使用 navigator.mediaDevices.getUserMedia 采集摄像头和麦克风?如何选择前置/后置摄像头?如何设置分辨率、帧率?getDisplayMedia 实现屏幕录制。

回答

编译有声

const stream=await navigator.mediaDevices.getUserMedia({video:{width:{ideal:1280},height:{ideal:720},frameRate:{ideal:30},facingMode:'user'},audio:{echoCancellation:true}})。facingMode: user(前置)/environment(后置)。设备切换: enumerateDevices() 获取列表。getDisplayMedia({video:true}) 屏幕共享。stream 赋值给 video.srcObject 预览。stream.getTracks() 获取轨道,track.stop() 停止。注意:需 HTTPS 或 localhost。