html5调用摄像头
1. 页面代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>Insert title here</title> </head> <body> <div id="contentHolder"> <video id="video" width="320" height="320" autoplay="autoplay"></video> <button id="snap" style="display: none"></button> <canvas style="display: none" id="canvas" width="320" height="320"></canvas> </div> </body> </html>
2.js代码
window.addEventListener('DOMContentLoaded', function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
video = document.getElementById('video'),
videoObj = { video : true },
errBack = function (err) {
console.log('Video capture error : ' , err.code );
};
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
});3. 设备拥有多个摄像头的情况下如何开启其他摄像头
var audios = [], videos=[]
function gotSources(sourceInfos) {
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
if (sourceInfo.kind === 'audio') {
audios.push(sourceInfo.id);
} else if (sourceInfo.kind === 'video') {
videos.push(sourceInfo.id);
} else {
console.log('some other kind of source: ', sourceInfo);
}
}
}
if (typeof MediaStreamTrack === 'undefined'){
alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
MediaStreamTrack.getSources(gotSources);
}
function successCallback(stream) {
window.stream = stream; // make stream available to console
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
}
function errorCallback(error){
console.log("navigator.getUserMedia error: ", error);
}
function start(){
if (!!window.stream) {
videoElement.src = null;
window.stream.stop();
}
var constraints = {
audio: {
optional: [{sourceId: audios[0]}]
},
video: {
optional: [{sourceId: videos[0]}]
}
};
navigator.getUserMedia(constraints, successCallback, errorCallback);
}
start(); 相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15