使用css滤镜，我们可以在上捕获的使用一些css效果.
<video autoplay></video> <p><button>Capture video</button> <p><button>Apply CSS filter</button></p> <script> const captureVideoButton = document.querySelector(\'#cssfilters .capture-button\'); const cssFiltersButton = document.querySelector(\'#cssfilters-apply\'); const video = document.querySelector(\'#cssfilters video\'); let filterIndex = 0; const filters = [ \'grayscale\', \'sepia\', \'blur\', \'brightness\', \'contrast\', \'hue-rotate\', \'hue-rotate2\', \'hue-rotate3\', \'saturate\', \'invert\', \'\' ]; captureVideoButton.onclick = function() { navigator.mediaDevices.getUserMedia(constraints). then(handleSuccess).catch(handleError); }; cssFiltersButton.onclick = video.onclick = function() { video.className = filters[filterIndex++ % filters.length]; }; function handleSuccess(stream) { video.srcObject = stream; } </script> WebGL纹理视频捕获一个神奇的应用就是作为一个WegGL纹理实时渲染。因为我对WebGL一无所知（除了它很牛逼），所以我建议你们看一个教程和示例。它讲了如何在WebGL里使用getUserMedia() 和Three.js去渲染实时vedio。
对web audio api使用getUserMedia我的梦想之一就是在浏览器中构建autotune（不知道啥意思），而不是开放的web技术。
chrome支持从getUserMedia（）到web audio api的实时麦克风输入，以实现实时效果。
window.AudioContext = window.AudioContext || window.webkitAudioContext; const context = new AudioContext(); navigator.mediaDevices.getUserMedia({audio: true}). then((stream) =http://www.likecs.com/> { const microphone = context.createMediaStreamSource(stream); const filter = context.createBiquadFilter(); // microphone -> filter -> destination microphone.connect(filter); filter.connect(context.destination); }); 总结从发展历程上来看，在web上访问设备一直是个棘手的难题。做了许多尝试，只有少部分获得了成功。大多数早起的想法从未得到广泛的采用，也没有在特定环境之外被接受。主要的问题可能是web的安全模型与原生系统有很大的不同。特别是，您可能并不希望每个网站都可以随机访问您的摄像头和麦克风。总之很难找到权衡之际。
在移动设备日益普及的功能驱动下，web开始提供更丰富的功能。我们现在可以利用很多api去拍照，控制摄像头设置，录制音频和视频，并访问其他类型的传感器数据，比如位置，运动和设备方向。通过传感器框架将他们串在一起，并与api一起配合使用，使得we应用能访问usb并与蓝牙进行交互。
getUserMedia()只是与硬件交互的第一波热潮。