html5开发app调用相机

HTML5提供了一种使用浏览器的原生API来调用设备摄像头的功能，从而实现在网页中直接使用设备摄像头进行拍照或摄像的功能。本文将详细介绍使用HTML5开发的APP如何调用设备摄像头的原理和步骤。

HTML5的媒体捕获（Media Capture）API是用于访问设备摄像头和麦克风的API。通过使用这个API，我们可以实现在网页中直接调用设备的摄像头和麦克风，获取视频和音频流，进行拍照和录制等操作。该API主要由2个接口组成，分别是媒体捕获接口（MediaDevices）和媒体流接口（MediaStream）。

首先，我们需要使用navigator.mediaDevices.getUserMedia()方法来获取设备的媒体流对象。该方法接受一个参数，是一个使用constraints对象来指定所需捕获的媒体设备类型，如摄像头、麦克风等。示例代码如下：

```

navigator.mediaDevices.getUserMedia({video: true, audio: false})

.then(function(stream) {

// 成功获取到媒体流对象

// 在此可以对媒体流进行处理

})

.catch(function(err) {

// 获取媒体流失败

console.log(err);

});

```

接下来，我们需要将捕获到的媒体流对象绑定到HTML的video元素上，以便将摄像头的实时画面显示在网页上。示例代码如下：

```

navigator.mediaDevices.getUserMedia({video: true, audio: false})

.then(function(stream) {

var videoElement = document.getElementById("video");

videoElement.srcObject = stream;

videoElement.play();

})

.catch(function(err) {

console.log(err);

});

```

在上述代码中，我们获取到了一个video元素对象，并将捕获到的媒体流对象赋值给video元素的srcObject属性，然后调用play()方法来播放视频。

最后，我们可以使用原生的API来控制摄像头进行拍照或录制操作。例如，我们可以使用HTML5的canvas元素来进行拍照操作，将视频帧转化为图片。

```

var canvasElement = document.getElementById("canvas");

var videoElement = document.getElementById("video");

canvasElement.getContext("2d").drawImage(videoElement, 0, 0, 640, 480);

var dataUrl = canvasElement.toDataURL("image/png");

var imgElement = document.createElement("img");

imgElement.src = dataUrl;

document.body.appendChild(imgElement);

```

在上述代码中，我们获取到了一个canvas元素对象，并使用getContext("2d")方法获取到一个2D渲染上下文对象，然后使用drawImage()方法将视频元素绘制到canvas上，通过调用canvas的toDataURL()方法来获取到拍照得到的图片的base64编码形式的URL，并最后创建一个img元素，并将base64编码的URL赋值给img元素的src属性，以显示拍照得到的图片。

通过以上步骤，我们就可以实现在HTML5开发的APP中调用设备摄像头进行拍照或摄像的功能。当然，根据实际需求，我们还可以进一步使用其他API来进行视频的录制、滤镜效果的处理等操作，以实现更丰富的功能。