html调用摄像头识别图片并上传

最新推荐文章于 2024-09-10 12:55:25 发布

woshiabc111

最新推荐文章于 2024-09-10 12:55:25 发布

阅读量977

点赞数

本文链接：https://blog.csdn.net/woshiabc111/article/details/107003454

版权

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>