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的摄像头的方法,希望对您有所帮助。