时间:06-06 互联网 佚名
<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
<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 = window.URL.createObjectURL(localMediaStream);
//请注意:当使用getUserMedia方法时,在Chrome浏览器中不触发onloadedmetadata事件
video.onloadedmetadata = function(e) {
//后续代码略
};
}, onFailSoHard);
</script>
window.URL = window.URL || window.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 = window.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 = window.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>