html5或者JS怎样调用手机摄像头或者相册？

JavaScript024

html5或者JS怎样调用手机摄像头或者相册？,第1张

你给的网页用的是 <input accept="image/*" type="file">，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。

1、实现头的方法代码。

2、编写CSS样式的方法代码。

3、html上传代码。

4、JS处理方法代码。

5、测试结果如下。

注意事项：

JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。

需要加载cordova.js

方法：

document.addEventListener("deviceready", onDeviceReady, false)

function onDeviceReady() {

pictureSource = navigator.camera.PictureSourceType

destinationType = navigator.camera.DestinationType

}

//相册

function fromCamera()

{

var source = pictureSource.PHOTOLIBRARY

navigator.camera.getPicture(function (imageData) {

setimg(imageData)

}, function (message) {

if (source == pictureSource.CAMERA)

alert('加载照相机出错!' + message)

else

alert('加载相册出错!' + message)

}, {

quality: 50,

destinationType: destinationType.FILE_URI,

sourceType: source

})

}

//拍照

function EditImgPz()

{

navigator.camera.getPicture(function (imageData) {

setimg(imageData)

}, function (message) {

alert(message)

}, {

quality: 50,

destinationType: navigator.camera.DestinationType.FILE_URI,

sourceType: Camera.PictureSourceType.CAMERA,

allowEdit: true,

encodingType: Camera.EncodingType.JPEG,

popoverOptions: CameraPopoverOptions,

saveToPhotoAlbum: true

})

}