HTML通話カメラ
在这里插入代码片
<%@ 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>
写真を撮って画像のbase64エンコーディングを背景に転送したり、Baidu画像を使用して画像内のQRコードやバーコードを認識したり、テキスト認識を行うこともできます