html5调用摄像头实现拍照，我在bex5中如何做呢

lnddwy · 发表于 2016-11-29 01:45:04

我想在PC端通过笔记本摄像头或者USB摄像头拍照，并且通attachmentSimple上传到服务器，下边是HTML5代码，我在BEX5中如何调用，望求详细知道，谢谢！！！

<!DOCTYPE html>
<html>
<head>
<title>html5调用摄像头实现拍照</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
//判断浏览器是否支持HTML5 Canvas
window.onload = function () {
try {
//动态创建一个canvas元，并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas").getContext("2d");
document.getElementByIdx("support").innerHTML = "浏览器支持HTML5 CANVAS";
}
catch (e) {
document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";
}
};
//这段代主要是获取摄像头的视频流并显示在Video 签中
window.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementByIdx("canvas"),
context = canvas.getContext("2d"),
video = document.getElementByIdx("video"),
videoObj = { "video": true },
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
//这个是拍照按钮的事件，
$("#snap").click(function () {
context.drawImage(video, 0, 0, 320, 320);
//CatchCode();
});
}, false);
//定时器
var interval = setInterval(CatchCode, "300");
//这个是刷新上图像的
function CatchCode() {
$("#snap").click();
//实际运用可不写，测试代，为单击拍照按钮就获取了当前图像，有其他用途
var canvans = document.getElementByIdx("canvas");
//获取浏览器页面的画布对象
//以下开始编数据
var imgData = canvans.toDataURL();
//将图像转换为base64数据
var base64Data = imgData.substr(22);
//在前端截取22位之后的字符串作为图像数据
//开始异步上
$.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {
if (status == "success") {
if (data == "OK") {
alert("二维已经解析");
}
else {
// alert(data);
}
}
else {
alert("数据上失败");
} }, "text");
}
</script>
</head>
<body>
<table width="200" border="0" cellpadding="1" cellspacing="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="320"><video id="video" autoplay=""style='width:320px;height:240px'></video></td>
<td><canvas id="canvas" width="320" height="240" style="display:none"></canvas> <img id="snapimg" width="320" height="240" xid="snapimg"></img></td>
</tr>
</table>
<br><p></p></br>
<button id="snap">拍照</button>
</body>
</html>

复制代码

jishuang · 发表于 2016-11-29 16:20:13

1.window.onload中实现的可以在model的onload事件中实现
2.x5中div用xid,获取元素可以用
this.getElementByXid("xid");
3.获取到文件后上传可以参考
http://bbs.wex5.com/forum.php?mod=viewthread&tid=91095

lnddwy · 发表于 2016-11-29 17:21:48

jishuang 发表于 2016-11-29 16:20
1.window.onload中实现的可以在model的onload事件中实现
2.x5中div用xid,获取元素可以用
this.getElementBy ...

麻烦进一步指点一下在onload，怎么调用我上边贴的代码

jishuang · 发表于 2016-11-29 17:42:57

.x5中div用xid,获取元素可以用
this.getElementByXid("xid");

创建元素可以用jquery的方式

lnddwy · 发表于 2016-11-29 17:52:38

jishuang 发表于 2016-11-29 17:42
.x5中div用xid,获取元素可以用
this.getElementByXid("xid");

那我怎么引用html5网页呢

jishuang · 发表于 2016-11-30 09:00:29

如果要直接嵌入html5的页面，需要用iframe

lnddwy · 发表于 2016-11-30 12:31:30

jishuang 发表于 2016-11-30 09:00
如果要直接嵌入html5的页面，需要用iframe

直接嵌入iframe，x5无法获取并存储图片呀
官方能否出个插件，或者出个完整的html5调用摄像头拍照的例子
谢谢啦

jishuang · 发表于 2016-11-30 13:35:38

目前没有这样的案例

iframe中可以调用父页面的方法进行存储
http://docs.wex5.com/wex5-ui-question-list-2012/

lnddwy · 发表于 2016-11-30 13:40:45

jishuang 发表于 2016-11-30 13:35
目前没有这样的案例

iframe中可以调用父页面的方法进行存储

这方面大家的需求挺多的，手机端都可以做到，PC端应该没问题呀，这样，调用就方便多了您给反馈一下呗

jishuang · 发表于 2016-11-30 15:08:44

http://bbs.wex5.com/forum.php?mo ... 9&pid=165330283

		自动登录	找回密码
密码			注册

[结贴] html5调用摄像头实现拍照，我在bex5中如何做呢