HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题：

1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能

2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pera支持访问后置摄像头的

android手机，浏览器chrome32版本下实现了浏览器调用设备摄像头进行拍照。主要分3个步骤来完成:

1）获取视频流

添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源

var video = document.getElementByIdx_x_x("video")

 navigator.getUserMedia({video:true}, function (stream) {

                        video.src = window.webkitURL.createObjectURL(stream)

                    }, function (error) { alert(error) })

2）拍照

关于拍照功能，采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入

     

    function scamera() {

                var videoElement = document.getElementByIdx_x_x('video')

                var canvasObj = document.getElementByIdx_x_x('canvas1')

                var context1 = canvasObj.getContext('2d')

                context1.fillStyle = "#ffffff"

                context1.fillRect(0, 0, 320, 240)

                context1.drawImage(videoElement, 0, 0, 320, 240)

            }

3）图片获取

要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像

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

imgData格式如下：”data:image/pngbase64,xxxxx“

真正图像数据是base64编码逗号之后的部分

1. 项目背景

网站项目基于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访问才能正常使用。

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

问题一：怎么在网页上启用摄像头? 手动启动就好了啊

问题二：HTML5怎样在网页中使用摄像头功能 gbtags/...othjs/

这个js插件可以实现

问题三：win7摄像头在网页怎么打开摄像头 方法/步骤

win7摄像头怎么开?如何开?如何才能在windows7系统“我的电脑”中看到摄像头呢?我们可以用如下5种方法来解决。

一、首先进入设备管理器，看有没有摄像头这一设备，如果有，进入我的电脑就会看到这个图标，双击它就会打开如果没有，那么需要安装摄像头的驱动。驱动安装好后，在我的电脑中就会看到它了。这样就可以打开了。

二、运行QQ软件来打开win7摄像头

这个软件大家最熟悉不过了，可以通过其视频设置来打开摄像头。运行QQ软件，打开“系统设置”，在“好友和聊天”选项卡下选择语音视频，点击“视频设置”按钮，这个时候便会弹出视频设置窗口，选择好视频设备，就可以看到摄像头的预览画面了，通过“画质调节”按钮将画面调整到自己满意的效果即可。这个方法麻烦在要安装QQ软件，但QQ软件应该是许多人必备的软件吧。一些其他的通信软件也是具备这项功能的，比如Msn等。

三、下载AMcap来打开win7摄像头

win7 没有摄像头预览软件，预览功能要借助第三方软件，在网上下载一个AMcap，大约300K，安装好后将AMcap快捷方式放到C:用户本机用户名 AppdataRoamingMicrosoftWindowsNetwork shortcuts目录下，这样就可以在“我的电脑”中找到这个图标。

四、从Windows Vista 开始，系统就没有摄像头快捷方式了。所以，在Windows7中，即使摄像头已经装载完好，能正常使用，也看不到它的图标或快捷方式。如果想在“计算机”中看到摄像头怎么办?只能试试：把摄像头程序的快捷方式放到“计算机”中。

1、打开开始菜单，右键“计算机”选择“管理”。

2、在“计算机管理”窗口左边一栏，双击“设备管理器”。然后，从右边栏中找到“图像设备”，点开。在摄像头设备上右键鼠标，选择“属性”。

3、在“驱动程序”选项卡上，单击“驱动程序详细信息”，可以看到.exe 文件的详细路径(通常位于系统盘 Windows 文件夹下)。

4、在系统盘中，循路径找到这个程序文件，右键鼠标，选择“创建快捷方式”，存放到ghost xp sp3桌面上。

5、回到桌面，右键单击快捷方式，“复制”。然后打开如下文件夹：

系统盘:Users用户名AppDataRoamingMicrosoftWindowsNetwork Shortcuts

例如 C:UsersxiaoyiAppDataRoamingMicrosoftWindows Network Shortcuts (AppData 是隐藏文件夹。如果看不到，请点击“组织”-〉“文件夹和搜索选项”。在“查看”选项卡上点选 “显示隐藏的文件、文件夹和驱动器”。)

将快捷方式“粘贴”进来。

6、打开“计算机”，现在就可以看到摄像头图标了。

五、下载一个叫win7摄像头的软件，也挺方便的。

问题四：电脑打开网页后无法使用摄像头怎么办 1、打开开始菜单――控制面板

2、点击其中的Flash Player

3、在Flash Player设置管理器中点击切换到“摄像头和麦克风”

4、点击的“站点的摄像头和麦克风设置”

5、进入之后，点击左下角的“添加”按钮

6、输入需要使用摄像头的网站，点击“添加”

7、添加后可以在列表中看到该项，重新登录该网站，就可以访问摄像头了。

按照以上操作步骤就可以解决电脑打开网页后无法使用摄像头的问题了。

问题五：网页上使用摄像头怎么不能用？ 说实话，到目前为止，我还没又发现任何有用的答案。

问题六：如何建立能访问监控摄像头的网站 网站方面我不是很懂，但是关于监控方面可以给你点建议。

1.网络摄像机是可以设置IP地址的，在同一个网段内可以通过直接输入摄像机的IP地址来访问，可以考虑是否可以用超链接绑定摄像机的IP地址，在打开的网页中输入用户名及密码后浏览视频信号，用网页浏览一般都只能浏览一台摄像机，想看另外一台摄像机必须重新输入IP地址。

2.一般网络摄像机的厂家都有自己的网络摄像机监控软件，首先你要确定你们学校用的是什么品牌的摄像机，然后联系摄像机的生产厂家或者代理商，看看他们有没有监控软件的SDK,就我所了解的目前像海康他们是可以免费提供SDK的。

希望对你有些帮助。

问题七：摄像头为什么在网页里不能用 35分 应该是IE安全设置的问题，缺少插件

你试下 internet设置-安全设置-internet设置-自定义设置-把所有设为启用

再试下可以不

问题八：怎么允许网站使用电脑的摄像头和麦克风? 1，先弄明白你上的网站是否能用摄像头和麦克风。2，即使网站让用，看看网站给没给你用的权限。如果以上都是肯定的。看看你的设置里。你要把视频驱动安装好，至于为什么还是用不了，右键打开我的电脑-管理-设备管理器-声音，视频。游戏控制器.看看有没有打岔的，有打岔的就启用.

问题九：为什么我的摄像头不能在网页上用? 是Adobe Flash Player 的问题。

解决方法如下：

1.卸载Adobe Flash Player 。到C:\WINDOWS\system32\Macromed\Flash下运行

uninstall_activeX.exe卸载Adobe Flash Player 。或到控制面板添加或删除程序那卸载。

2.安装Adobe Flash Player ――flash_player_10。到

dl.pconline/...1下载

flash_player_10.

3.安装flash_player_10。

4.安装更新。到C:\WINDOWS\system32\Macromed\Flash目录下运行FlashUtil10b.exe

5.重新启动系统。

6.网页摄像头正常使用。

问题十：怎样在网页上使用手机摄像头 只能使用电脑摄像头

---