当前位置：首页 » 编程语言 » 摄像头html5

摄像头html5

发布时间: 2021-03-08 15:06:48

㈠ html5调用摄像头报错

主要是版本不支持
一、DOMException是？
DOMException是W3C DOM核心对象。DOMException接口表示一个处理的错误，当一个操作不可能执行的时候，会抛出一个异常。例如试图创建一个无效的DOM, 或通过一个不存在的节点作为参数节点操作方法。
举个板栗，如下代码：
var node = document.getElementsByTagName('h1').item(0);
var refnode = node.nextSibling;
var newnode = document.createTextNode('这就是为何你挂了！');
node.insertBefore(newnode, refnode);

上面代码演示了一个会嗝屁的insertBefore操作，因为refnode不是一个子节点。在Opera浏览器下，上面的操作就会导致下面显示的异常错误：
Inline script thread
Error:
Unhandled Exception: [Object DOMException]
code: 8
message: NOT_FOUND_ERR

DOM并不对每个可能发生的错误定义一个异常，例如参数、语法错误就不在其中，这种情况有其自己的一套错误报告机制来处理。
实际上，大多数浏览器已经把DOM异常作为本地机制。除了显示异常代码和信息外，还显示了浏览器可以提供的其他信息（如行数或堆栈轨迹）

㈡现在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代码调用打开本机的摄像头

先简单的添加需要的控件
<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 = document.getElementById("video");
var context = canvas.getContext("2d")
var errocb = function () {
console.log('sth wrong!');
}

然后，简单的说就是利用html5的api navigator.getUserMedia来开启设备的摄像头，浏览器上会出现图示中的提示
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);
}

网上有些例子中，navigator.getUserMedia第一个参数是‘video’，这可能是早期的版本，现在必须是obj
还有关于getUserMedia和webkitGetUserMedia 的判断，网上有这么写的
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
但要注意，他们绑定video.src的方法不一样，本人没有测过createObjectURL是否通用

拍照功能就是简单的调用canvas中的drawImage即可
document.getElementById("picture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
所有script代码如图示

然后浏览器中就能看到摄像头，点击picture，就会在把当前摄像头的图片就会出现在右边了

㈣如何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);
}

㈤如何用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应用上来。

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

ios拍照默认是旋转的，有个exif的插件是专门解决这个问题的。js版连接:网页链接，里面有使用回教程。答通过这个判断照片的旋转角度之后，可以把它旋转过来再保存，教程：网页链接。如果只有预览需求，直接旋转容器进行显示也是可以的。

㈦ html5可以调手机端的摄像头吗

今天做手机网站，想实现手机扫描二维码功能。首先实现在浏览器中调用手机摄像头，实现拍照功能并且把拍下的照片显示在页面并上传到服务器上，然后再在服务器端进行分析。
首先实现在浏览器中调用摄像头，当然用现在火的不行的html5，html5中的<video>标签，并将从摄像头获得视频作为这个标签的输入来源。实现拍照功能的html5代码：
<article>
<style scoped>
video { transform: scaleX(-1); }
p { text-align: center; }
</style>
<h1>Snapshot Kiosk</h1>
<section id="splash">
<p id="errorMessage">Loading...</p>
</section>
<section id="app" hidden>
<p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
<p><input type=button value="📷" onclick="snapshot()">
</section>
<script>
navigator.getUserMedia({video:true}, gotStream, noStream);
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
};
}
function noStream() {
document.getElementById('errorMessage').textContent = 'No camera available.';
}
function snapshot() {
canvas.getContext('2d').drawImage(video, 0, 0);
}
</script>
</article>

经本人测试在android手机的opera浏览器浏览器下可以正常实现手机拍照功能。android手机下的google chrome浏览器还不行，自带的浏览器也测试没有通过。iphone手机的safari浏览器也是不支持的。

㈧如何使用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 = document.getElementById("video");
var context = canvas.getContext("2d")
var errocb = function () {
console.log('sth wrong!');
}
HTML5调用摄像头并拍照
然后，简单的说就是利用html5的api navigator.getUserMedia来开启设备的摄像头，浏览器上会出现图示中的提示
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);
}
HTML5调用摄像头并拍照
网上有些例子中，navigator.getUserMedia第一个参数是‘video’，这可能是早期的版本，现在必须是obj
还有关于getUserMedia和webkitGetUserMedia 的判断，网上有这么写的
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
但要注意，他们绑定video.src的方法不一样，本人没有测过createObjectURL是否通用
HTML5调用摄像头并拍照
拍照功能就是简单的调用canvas中的drawImage即可
document.getElementById("picture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
所有script代码如图示
HTML5调用摄像头并拍照
然后浏览器中就能看到摄像头，点击picture，就会在把当前摄像头的图片就会出现在右边了

㈨ html5怎么关闭摄像头

html5中的video这个标签是引入视频的，通过navigator.getUserMedia去获取摄像头的视频流，所以要在事件里用关闭的代码都不能执行关闭摄像头，只有关闭网页，摄像头才关闭。

html5打开摄像头代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Smart Home - Camera</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="js/jq.js"></script>
<script type="text/javascript">
/*
*/
function init(t){
accessLocalWebCam("camera_box");
}

// Normalizes window.URL
window.URL = window.URL || window.webkitURL || window.msURL || window.oURL;
// Normalizes navigator.getUserMedia

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

function isChromiumVersionLower() {
var ua = navigator.userAgent;
var testChromium = ua.match(/AppleWebKit\/.* Chrome\/([\d.]+).* Safari\//);
return (testChromium && (parseInt(testChromium[1].split('.')[0]) < 19));
}

function successsCallback(stream) {
document.getElementById('camera_errbox').style.display = 'none';

document.getElementById('camera_box').src = (window.URL
&& window.URL.createObjectURL) ?
window.URL.createObjectURL(stream) : stream;

}

function errorCallback(err) {

}

function accessLocalWebCam(id) {
try {
// Tries it with spec syntax
navigator.getUserMedia({ video: true }, successsCallback, errorCallback);
} catch (err) {
// Tries it with old spec of string syntax
navigator.getUserMedia('video', successsCallback, errorCallback);
}
}

</script>
<style type="text/css">
#camera_errbox{
width:320px; height:auto; border:1px solid #333333; padding:10px;
color:#fff; text-align:left;margin:20px auto;
font-size:14px;
}
#camera_errbox b{
padding-bottom:15px;
}

</style>
</head>
<body onLoad="init(this)" oncontextmenu="return false" onselectstart="return false">
<div class="Screen_outer">
<div id="mainbox" class="Screen_inner">
<div id="bt_goback"></div>

<div class="logobox"></div><div id="t_iconbox"
class="icon_12"></div><div id="t_text">
<div id="el_title" class="font_h2">Camera</div>
<div id="el_descr" class="font_2"></div>
</div>

<div class="t_descri_bt"></div>

<div class="sp_title"><span
class="sp_title_text">Camera</span><div class="sp_oc
sp_oc_1"></div></div>
<dl id="el_actionbox" class="menu_btbox" style="text-align:center;">
<video id="camera_box" autoplay="" src=""></video>
<div id="camera_errbox">
<b>请点击“允许”按钮，授权网页访问您的摄像头！</b>
<div>若您并未看到任何授权提示，则表示您的浏览器不支持Media Capture或您的机器没有连接摄像头设备。</div>
</div>
</dl>
</div>
</div>

</body>
</html>
分享

阅读全文

摄像头html5

与摄像头html5相关的阅读推荐