如何通过html5调用摄像头拍照

1. 项目背景

十余年的广陵网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整广陵建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“广陵网站设计”,“广陵网站推广”以来，每个客户项目都认真落实执行。

网站项目基于HTML5+AngularJs开发，正在做一个由HTML5调用摄像头拍照，从而实现修改头像的功能。起初觉得HTML5拍照很简单，但是做的时候才发现HTML5获取摄像头并不是那么容易。

2. 如何调用摄像头

$scope.photoErr = false;

$scope.photoBtnDiable = true;

var mediaStream = null,track = null;

navigator.getMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

if (navigator.getMedia) {

navigator.getMedia(

{

video: true

},

// successCallback

function (stream) {

var s = window.URL.createObjectURL(stream);

var video = document.getElementById('video');

video.src = window.URL.createObjectURL(stream);

mediaStream = stream;

track = stream.getTracks()[0];

$scope.photoBtnDiable = false; $scope.$apply();

},

// errorCallback

function (err) {

$scope.errorPhoto();

console.log("The following error occured:" + err);

});

} else {

$scope.errorPhoto();

}

代码解析：

navigator为浏览器对象，包含浏览器的信息，这里就是用这个对象打开摄像头。$scope为AndularJs语法。第一步声明navigator.getMedia来调用浏览器不同的打开摄像头函数，目前仅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方式分别对应通用浏览器、Google浏览器、火狐浏览器和IE浏览器，浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器，包含三个参数，分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及操作失败返回错误消息处理函数。其中，使用时不仅可以设置视频还能设置使用麦克风，设置方式为：

{

video: true，

audio: true

}

调用成功即打开摄像头后返回视频流数据，我们可以将流数据设置到video标签在界面上实时显示图像。mediaStream用来记录获取到的流数据，track在Chrome浏览器中用来跟踪摄像头状态，这两个变量都能用来关闭摄像头。

3. 拍照

$scope.snap = function () {

var canvas = document.createElement('canvas');

canvas.width = "400";

canvas.height = "304";

var ctx = canvas.getContext('2d');

ctx.drawImage(video, 0, 0, 400, 304);

$scope.closeCamera();

$uibModalInstance.close(canvas.toDataURL("image/png"));

};

拍照时需要使用到canvas标签，创建一个canvas标签，设置我们需要拍照的尺寸大小，通过drawImage函数将video当前的图像保存到canvas标签，最后将图像数据转换为base64数据返回并关闭摄像头，这样就完成了我们的拍照功能。这里的$uibModalInstance对象是我们项目中打开弹出层的一个对象，用来控制弹出层的显示。

4. 如何关闭摄像头

$scope.closeCamera = function () {

if (mediaStream != null) {

if (mediaStream.stop) {

mediaStream.stop();

}

$scope.videosrc = "";

}

if (track != null) {

if (track.stop) {

track.stop();

}

}

}

正如前面所说，关闭摄像头的方式是通过mediaStream和track变量，只不过，track只能关闭Chrome浏览器中的摄像头，这也是Chrome 45版本以上关闭摄像头的方式。

5. 集成到AndularJs

事实上，前面所说的都是在AndularJs中实现的，当然，这里只是实现了拍照并返回拍照数据，我们想要在其他地方也使用，就需要将这部分独立出来，这里我们用到了AngularJs中的service机制，将这部分单独做成一个service并在项目中注入，然后就可以在其他地方调用了。

service注册:

app().registerService("h5TakePhotoService", function ($q, $uibModal) {

this.photo = function () {

var deferred = $q.defer();

require([config.server + "/com/controllers/photo.js"], function () {

$uibModal.open({

templateUrl: config.server + "/com/views/modal_take_photo.html",

controller: "photoModalController",

windowClass: "modal-photo"

}).result.then(function (e) {

deferred.resolve(e);

});

});

return deferred.promise;

}

});

调用方式：

$scope.takePhoto = function () {

h5TakePhotoService.photo().then(function (res) {

if (res != null res != "") {

$scope.myImage = res;

}

});

}

h5TakePhotoService为控制器中注入的拍照service对象，最后处理返回的图像数据，设置数据显示到界面上。

6. 兼容问题

主要存在Chrome浏览器中，本地测试时，Chrome浏览器中能够正常使用，但是部署到服务器后就不能正常使用，报错消息为 [object NavigatorUserMediaError]，这是因为Chrome浏览器在使用摄像头时只支持安全源访问，所以只能通过https访问才能正常使用。

最后需要说一下，测试时只能通过访问才能使用，不能通过方式访问，即我们需要将代码部署才能访问，可以在Visual Studio、 java web、php中完成。

现在HTML5可以调用摄像头录像吗

可以的

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怎么调用系统相机

!DOCTYPE html  

head  

titleHTML5 GetUserMedia Demo/title  

 meta charset="utf-8"

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /  

/head  

body  

input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /br /  

video height="120px" autoplay="autoplay"/videohr /  

input type="button" title="拍照" value="拍照" onclick="getPhoto();" /br /  

canvas id="canvas1" height="120px" /canvashr /  

input type="button" title="视频" value="视频" onclick="getVedio();" /br /  

canvas id="canvas2" height="120px"/canvas  

script type="text/javascript"  

var video = document.querySelector('video');  

var audio, audioType;  

var canvas1 = document.getElementById('canvas1');  

var context1 = canvas1.getContext('2d');  

var canvas2 = document.getElementById('canvas2');  

var context2 = canvas2.getContext('2d');  

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;  

window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;  

var exArray = []; //存储设备源ID  

MediaStreamTrack.getSources(function (sourceInfos) {  

for (var i = 0; i != sourceInfos.length; ++i) {  

var sourceInfo = sourceInfos[i];  

//这里会遍历audio,video，所以要加以区分  

if (sourceInfo.kind === 'video') {  

exArray.push(sourceInfo.id);  

}  

}  

});  

function getMedia() {  

if (navigator.getUserMedia) {  

navigator.getUserMedia({  

'video': {  

'optional': [{  

'sourceId': exArray[1] //0为前置摄像头，1为后置  

}]  

},  

'audio':true  

}, successFunc, errorFunc);    //success是获取成功的回调函数  

}  

else {  

alert('Native device media streaming (getUserMedia) not supported in this browser.');  

}  

}  

function successFunc(stream) {  

//alert('Succeed to get media!');  

if (video.mozSrcObject !== undefined) {  

//Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持  

video.mozSrcObject = stream;  

}  

else {  

video.src = window.URL  window.URL.createObjectURL(stream) || stream;  

}  

//video.play();  

// 音频  

audio = new Audio();  

audioType = getAudioType(audio);  

if (audioType) {  

audio.src = 'polaroid.' + audioType;  

audio.play();  

}  

}  

function errorFunc(e) {  

alert('Error！'+e);  

}  

// 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果  

function drawVideoAtCanvas(video,context) {  

window.setInterval(function () {  

context.drawImage(video, 0, 0,90,120);  

}, 60);  

}  

//获取音频格式  

function getAudioType(element) {  

if (element.canPlayType) {  

if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {  

return ('aac');  

} else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {  

return ("ogg");  

}  

}  

return false;  

}  

// vedio播放时触发，绘制vedio帧图像到canvas  

//        video.addEventListener('play', function () {  

//            drawVideoAtCanvas(video, context2);  

//        }, false);  

//拍照  

function getPhoto() {  

context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。  

}  

//视频  

function getVedio() {  

drawVideoAtCanvas(video, context2);  

}  

/script  

/body

怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片

1、实现头的方法代码。

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

3、html上传代码。

4、JS处理方法代码。

5、测试结果如下。

注意事项：

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

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

HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。

1、 视频流

HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。

video id=”video” autoplay=”"/video

script

var video_element=document.getElementById(‘video’);

if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow

navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数

}

function success(stream){

video_element.src=stream;

}

/script

此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。

2、 拍照

拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：

var canvas=document.createElement(‘canvas’); //动态创建画布对象

var ctx=canvas.getContext(’2d’);

var cw=vw,ch=vh;

ctx.fillStyle=”#ffffff”;

ctx.fillRect(0,0,cw,ch);

ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。

document.body.append(canvas);

3、 图片获取

从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。

var imgData=canvas.toDataURL(“image/png”);

这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。

第一种：是在前端截取22位以后的字符串作为图像数据，例如：

var data=imgData.substr(22);

如果要在上传前获取图片的大小，可以使用：

var length=atob(data).length; //atob 可解码用base-64解码的字串

第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：

$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

4、 图片上传

在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：

$.post(‘upload.php’,{‘data’:data});

在后台我们用PHP脚本接收数据并存储为图片。

function convert_data($data){

$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

save_to_file($image);

}

function save_to_file($image){

$fp=fopen($filename,’w');

fwrite($fp,$image);

fclose($fp);

}

以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。

在还在不断补充修正的HTML5的驱动下，Web App与Native App之间的距离将越来越小。在可预见的不远的未来，越来越多老的和新的开发项目必将会迁移到WEB应用上来。

相关规范：

The MediaCapture API：

Canvas：

HTML5都有哪些新特性呢？

HTML5新特性如下：

1、脱机缓存。您可以在关闭浏览器并再次打开时还原数据，以减少网络流量。

2、音频和视频可以自由嵌入，多媒体形式更加灵活。

3、地理位置。地理位置定位使得定位导航不再是专属导航软件，地图也不需要下载很大的地图包。它可以通过缓存、去哪里、去哪里以及更灵活的方式来解决。

4、画布绘制提高了移动平台的绘制能力。canvas API可以用来绘制一个简单的热点地图来收集用户体验数据，并支持对图像的移动、旋转、缩放等常规编辑。

5、丰富的互动方式。提高交互能力：拖动、撤消历史操作、文本选择等。

6、与原生app相比，开发维护成本低。降低开发和维护成本；？使页面更小，减少用户不必要的开销；性能更好，功耗更低。

7、CSS3视觉设计师的辅助利器支持。CSS3支持字体嵌入、布局和最令人印象深刻的动画功能。

8、HTML5调用相机、相册和通讯录的功能。

扩展资料：

2014年10月29日，万维网联盟宣布，HTML第五次重大修订，经过近8年的努力，标准规范终于完成。HTML5旨在支持移动设备上的多媒体。引入了新的语法特性来支持这一点，如视频、音频和画布标记。HTML5还引入了一些新功能，这些功能可以真正改变用户与文档交互的方式，包括增强灵活性的新解析规则、新属性、过时或冗余属性等。

文章标题：html5调用相机,js调用相机
文章源于：http://scyanting.com/article/dsihceg.html