淘先锋技术网

首页 1 2 3 4 5 6 7

HTML5和iPhone 5的使用越来越广泛,能够调用iPhone 5的摄像头成为了许多前端开发者的焦点之一。下面我们来看一下如何使用HTML5调用iPhone 5的摄像头。

<input type="file" accept="image/*;capture=camera">

上面的代码中,我们使用了<input>标签,并设置了type为file,accept属性为image/*,其中capture=camera表示调用摄像头。

可以通过JS来实现调用摄像头:

navigator.mediaDevices.getUserMedia({video: {facingMode: "user"}})
.then(stream => {
let video = document.querySelector('video');
// 兼容不同浏览器的写法
video.srcObject = stream || window.URL.createObjectURL(stream);
video.play();
});

使用navigator.mediaDevices.getUserMedia()方法请求摄像头授权,并使用.then()方法处理授权成功后的数据流。我们将摄像头捕获到的数据流,赋值给video的srcObject属性即可实现调用摄像头。若没有授权成功,我们则可以使用window.URL.createObjectURL(stream)这种写法来兼容不同浏览器。

此外,在HTML5中也可以使用canvas标签进行摄像头调用:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
navigator.mediaDevices.getUserMedia({
video: { width: 640, height: 480 },
audio: true
}).then(function(stream) {
var video_track = stream.getVideoTracks()[0];
var imageCapture = new ImageCapture(video_track);
imageCapture.takePhoto().then(function(blob) {
var img = new Image();
img.src = URL.createObjectURL(blob);
img.onload = function() {
context.drawImage(img, 0, 0, canvas.width, canvas.height);
URL.revokeObjectURL(img.src);
};
});
});

上面的代码中,我们使用canvas的getContext('2d')方法获取到canvas的上下文,同样使用navigator.mediaDevices.getUserMedia()方法请求授权,使用ImageCapture对象中的takePhoto()方法,获取摄像头捕获的图像数据,并输出至canvas中。

以上便是如何使用HTML5调用iPhone 5的摄像头的方法,希望对您有所帮助。