- <input type="file" accept="image/*;capture=camera">
- <input type="file" accept="video/;capture=camcorder">
- <input type="file" accept="audio/;capture=microphone">
- Chrome for Android (0.16)
- Firefox Mobile 10.0
- <device type="media" onchange="update(this.data)">
- </device>
- <video autoplay>
- </video>
- <script>
- function update(stream) {
- document.querySelector('video').src = stream.url;
- }
- </script>
- function hasGetUserMedia() {
- // 请注意: 在 Opera 浏览器中不使用前缀
- return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
- navigator.mozGetUserMedia || navigator.msGetUserMedia);
- }
- if (hasGetUserMedia()) {
- alert('您的浏览器支持 getUserMedia 方法');
- }
- else {
- alert('您的浏览器不支持 getUserMedia 方法');
- }
- <video autoplay id="video">
- </video>
- <script>
- var onFailSoHard = function() {
- alert('设备拒绝访问');
- };
- // 不使用供应商前缀
- navigator.getUserMedia({
- video: true,
- audio: true
- },
- function(localMediaStream) {
- var video = document.getElementById('video');
- video.src = Windows.URL.createObjectURL(localMediaStream);
- // 请注意: 当使用 getUserMedia 方法时, 在 Chrome 浏览器中不触发 onloadedmetadata 事件
- video.onloadedmetadata = function(e) {
- // 后续代码略
- };
- },
- onFailSoHard);
- </script>
- Windows.URL = Windows.URL || Windows.webkitURL;
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
- navigator.mozGetUserMedia || navigator.msGetUserMedia;
- var video = document.getElementById('video');
- if (navigator.getUserMedia) {
- navigator.getUserMedia({
- audio: true, video: true
- }, function(stream) {
- video.src = Windows.URL.createObjectURL(stream);
- }, onFailSoHard);
- }
- else {
- alert('您的浏览器不支持 getUserMedia 方法');
- }
- <video autoplay>
- </video>
- <img src="" id="img">
- </img>
- <canvas style="display:none;" id="canvas">
- </canvas>
- var video = document.getElementById('video'); var canvas = document.getElementById('canvas');
- var ctx = canvas.getContext('2d'); var localMediaStream = null; function
- snapshot() { if (localMediaStream) { ctx.drawImage(video, 0, 0); document.getElementById('img').src
- = canvas.toDataURL('image/PNG'); } } video.addEventListener('click', snapshot,
- false); // 不使用供应商前缀 navigator.getUserMedia({video: true}, function(stream)
- { video.src = Windows.URL.createObjectURL(stream); localMediaStream = stream;
- }, onFailSoHard);
- <style>
- video3 { width: 307px; height: 250px; background: rgba(255,255,255,0.5);
- border: 1px solid #ccc; } .grayscale { -webkit-filter: grayscale(1); }
- .sepia { -webkit-filter: sepia(1); } .blur { -webkit-filter: blur(3px);
- } ...
- </style>
- <video id="video" autoplay>
- </video>
- <script>
- var idx = 0;
- var filters = ['grayscale', 'sepia', 'blur', 'brightness', 'contrast', 'hue-rotate', 'hue-rotate2', 'hue-rotate3', 'saturate', 'invert', ''];
- function changeFilter(e) {
- var el = e.target;
- el.className = '';
- var effect = filters[idx++%filters.length]; // loop through filters.
- if (effect) {
- el.classList.add(effect);
- }
- }
- document.getElementById('video').addEventListener('click', changeFilter, false);
- </script>
来源: http://www.qdfuns.com/article/16269/dfd585fb4f2b03949528300c0d028177.html