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

先简单的添加需要的控件

<video id="video" autoplay=""style='width:640px;height:480px'></video>

<button id='picture'>PICTURE</button>

<canvas id="canvas" width="640" height="480"></canvas>

并在script中定义

var video = documentgetElementById("video");

var context = canvasgetContext("2d")

var errocb = function () {

consolelog('sth wrong!');

}

然后，简单的说就是利用html5的api navigatorgetUserMedia来开启设备的摄像头，浏览器上会出现图示中的提示

if (navigatorgetUserMedia) { // 标准的API

navigatorgetUserMedia({ "video": true }, function (stream) {

videosrc = stream;

videoplay();

}, errocb);

} else if (navigatorwebkitGetUserMedia) { // WebKit 核心的API

navigatorwebkitGetUserMedia({ "video": true }, function (stream) {

videosrc = windowwebkitURLcreateObjectURL(stream);

videoplay();

}, errocb);

}

网上有些例子中，navigatorgetUserMedia第一个参数是‘video’，这可能是早期的版本，现在必须是obj

还有关于getUserMedia和webkitGetUserMedia 的判断，网上有这么写的

navigatorgetUserMedia = (navigatorgetUserMedia ||

navigatorwebkitGetUserMedia ||

navigatormozGetUserMedia ||

navigatormsGetUserMedia);

但要注意，他们绑定videosrc的方法不一样，偶没有测过createObjectURL是否通用

拍照功能就是简单的调用canvas中的drawImage即可

documentgetElementById("picture")addEventListener("click", function () {

contextdrawImage(video, 0, 0, 640, 480);

});

<input type="file" accept="video/;capture=camcorder">

<input type="file" accept="audio/;capture=microphone">

<input type="file" accept="image/;capture=camera">直接调用相机

<input type="file" accept="image/" />调用相机 或者相册

还是要根据手机的类型来说，有些手机只能调相机，有些手机只能调相册，或者两者都行。

以上就是关于html5怎样调用手机摄像头或者相册全部的内容，包括:html5怎样调用手机摄像头或者相册、html5怎样调用手机摄像头或者相册、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！