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="image/" capture="camera"><!--调用照相机（）-->

<input type="file" accept="video/" capture="camcorder"><!--调用摄像机（视频）-->

<input type="file" accept="audio/" capture="microphone"><!--调用麦克风-->

使用HTML5的getUserMedia API可以调用本地的摄像头和麦克风，可以看这个链接的文档介绍，>

camerahtml

<video id="video" width="640" height="480" autoplay></video>

<button id="snap">Snap Photo</button>

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

camerajs

var video = documentgetElementById('video');

if(navigatormediaDevices && navigatormediaDevicesgetUserMedia) {

    // Not adding `{ audio: true }` since we only want video now

    navigatormediaDevicesgetUserMedia({ video: true })then(function(stream) {

        videosrc = windowURLcreateObjectURL(stream);

        videoplay();

    });

}else if(navigatorgetUserMedia) { // Standard

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

        videosrc = stream;

        videoplay();

    }, errBack);

} else if(navigatorwebkitGetUserMedia) { // WebKit-prefixed

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

        videosrc = windowwebkitURLcreateObjectURL(stream);

        videoplay();

    }, errBack);

} else if(navigatormozGetUserMedia) { // Mozilla-prefixed

    navigatormozGetUserMedia({ video: true }, function(stream){

        videosrc = windowURLcreateObjectURL(stream);

        videoplay();

    }, errBack);

}

var canvas = documentgetElementById('canvas');

var context = canvasgetContext('2d');

var video = documentgetElementById('video');

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

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

});

注意，这个功能在有些手机浏览器无法开启或正确使用，但是我在电脑上测试是可以的。

以上就是关于html5怎样调用手机摄像头或者相册全部的内容，包括:html5怎样调用手机摄像头或者相册、如何通过html5调用摄像头拍照、请问网页上HTML5怎么获取摄像头和麦克风的信息等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！