html call camera
在这里插入代码片
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="bgcode.aspx.cs" Inherits="shop.page.bgcode" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="js/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!--video用于显示媒体设备的视频流，自动播放-->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按钮-->
<div>
<button id="capture">拍照</button>
<div id="Text"></div>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>
<script type="text/javascript">
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var capture = document.getElementById('capture');
var context = canvas.getContext('2d');
function getUserMediaToPhoto(constraints,success,error) {
if(navigator.mediaDevices.getUserMedia){
//最新标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
}else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success,error);
}else if(navigator.mozGetUserMedia){
//firefox浏览器
navigator.mozGetUserMedia(constraints,success,error);
}else if(navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constraints,success,error);
}
}
//成功回调函数
function success(stream){
//兼容webkit核心浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流转化为video的源
try {
video.src = CompatibleURL.createObjectURL(stream);
} catch (e) {
video.srcObject = stream;
}
video.play();//播放视频
}
function error(error) {
console.log('访问用户媒体失败：',error.name,error.message);
}
if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
getUserMediaToPhoto({
video:{
width:480,height:320}},success,error);
}else{
alert('你的浏览器不支持访问用户媒体设备');
}
capture.addEventListener('click', function () {
var imgData = canvas.toDataURL("image/jpg");
var base64String = imgData.substr(22);
//alert(base64String);
$.ajax({
url: "/page/WebForm1.aspx",
type: "post",
data: {
imgdata: base64String },
async: true,
success: function (selectData) {
$("#Text").html("识别成功！");
}, error: function (e) {
alert(e.responseText);
}
});
// 将video画面描绘在canvas画布上
//context.drawImage(video, 0, 0, 480, 320);
})
</script>
</body>
</html>
You can take a photo and transfer the base64 encoding of the picture to the background, use Baidu pictures to recognize the QR code and barcode in the picture, and you can also do text recognition