html5摄像机怎么用（html怎么调用摄像头）

本篇文章给大家谈谈html5摄像机怎么用，以及html怎么调用摄像头对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、网页怎么使用摄像头
• 2、如何通过html5调用摄像头拍照
• 3、HTML5怎样在网页中使用摄像头功能
• 4、怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片
• 5、html5怎样调用手机摄像头或者相册

网页怎么使用摄像头

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

问题二：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.网页摄像头正常使用。

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

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

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访问才能正常使用。

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

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或js调用手机的摄像头拍照上传以及调用手机相册选取照片

1、实现头的方法代码。

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

3、html上传代码。

4、JS处理方法代码。

5、测试结果如下。

注意事项：

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

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

!DOCTYPE html

html

head

meta charset="UTF-8"

titleInsert title here/title

/head

body

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

divbutton id='picture' style="width: 100%;"PICTURE/button/div

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

script type="text/javascript"

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

var context = canvas.getContext("2d");

var errocb = function () {

console.log('sth wrong!');

}

if (navigator.getUserMedia) { // 标准的API

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

video.src = stream;

video.play();

}, errocb);

} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API

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

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

video.play();

}, errocb);

}

document.getElementById("picture").addEventListener("click", function () {

context.drawImage(video, 0, 0, 640, 480);

});

/script

/body

/html

html5摄像机怎么用的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html怎么调用摄像头、html5摄像机怎么用的信息别忘了在本站进行查找喔。