个人中心
gpt4 book ai didi

javascript - 如何使用网络摄像头拍照并将其转换为图像文件

转载 作者：行者123 更新时间：2023-11-30 15:19:12 27 4
gpt4 key购买 nike

我正在制作面部识别系统，我正在使用名为 Kairos 的 API。它允许我上传图像并检测是否有脸。但我想创建一个按钮事件，让我可以使用网络摄像头实时拍摄照片并进行检测。我该怎么办？

<body>
<form method="post" enctype="multipart/form-data" action="form-post.php"> 
    <input type="file" id="imageFile" name="file"><button type="button" id="testDetect">Submit</button>
</form>
<script>
$("#testDetect").click(function () {
    var file = $('#imageFile')[0].files[0]; 
    var reader  = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function () {
      var imageData = parseImageData(reader.result);
      var data = {};
      data.image = imageData;
      $.ajax({
	    url      : "http://localhost/Karios/simple-detect/form-post.php",
	    type     : "POST",
	    data     :  data,
	    dataType : 'text'
	  }).done(function(response) {
      
	    console.log(response)
	    if(response === true){
  		alert('fail!');
		}
		else{
  		alert('successs!');
			}
	  })
    }
});

最佳答案

基于 TAKE jpg webcam PHOTO with HTML5有一些修改，因为脚本是旧的。

1 - 创建一个名为images 的文件夹来存储文件
2 - 创建一个名为 html5-webcam-save.php 的文件，内容如下:

<?php
$rawData = $_POST['imgBase64'];
print $rawData;
$filteredData = explode(',', $rawData);
$unencoded = base64_decode($filteredData[1]);
$datime = date("Y-m-d-H.i.s", time() ) ; # - 3600*7
$userid  = $_POST['userid'] ;
// name & save the image file
$fp = fopen('images/'.$datime.'-'.$userid.'.jpg', 'w');
fwrite($fp, $unencoded);
fclose($fp);

3 - 创建主页:

selfie_html5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    navigator.getUserMedia = (navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia );
    if (navigator.getUserMedia)
    {
        navigator.getUserMedia(
            {
                video:true,
                audio:false
            },
            function(stream) { /* do-say something */ },
            function(error) { alert('Something went wrong. (error code ' + error.code + ')');
                return; }
        );
    }
    else {
        alert("Sorry, the browser you are using doesn't support the HTML5 webcam API");
    }
</script>
    <style>
        .camcontent{
            display: block;
            position: relative;
            overflow: hidden;
            height: 480px;
            margin: auto;
        }
        .cambuttons button {
            border-radius: 15px;
            font-size: 18px;
        }
        .cambuttons button:hover {
            cursor: pointer;
            border-radius: 15px;
            background: #00dd00 ;    /* green */
        }
    </style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
        // Grab elements, create settings, etc.
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            image_format= "jpeg",
            jpeg_quality= 85,
            errBack = function(error) {
                console.log("Video capture error: ", error.code);
            };


        // Put video listeners into place
        if(navigator.getUserMedia) { // Standard
            navigator.getUserMedia(videoObj, function(stream) {
                //video.src = stream;
                video.srcObject = stream;
                video.play();
                $("#snap").show();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
                $("#snap").show();
            }, errBack);
        } else if(navigator.mozGetUserMedia) { // moz-prefixed
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
                $("#snap").show();
            }, errBack);
        }
        // video.play();       these 2 lines must be repeated above 3 times
        // $("#snap").show();  rather than here once, to keep "capture" hidden
        //                     until after the webcam has been activated.

        // Get-Save Snapshot - image
        document.getElementById("snap").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);
            // the fade only works on firefox?
            $("#video").fadeOut("slow");
            $("#canvas").fadeIn("slow");
            $("#snap").hide();
            $("#reset").show();
            $("#upload").show();
        });
        // reset - clear - to Capture New Photo
        document.getElementById("reset").addEventListener("click", function() {
            $("#video").fadeIn("slow");
            $("#canvas").fadeOut("slow");
            $("#snap").show();
            $("#reset").hide();
            $("#upload").hide();
        });
        // Upload image to sever
        document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpeg", 0.85);
            $("#uploading").show();
            $.ajax({
                type: "POST",
                url: "html5-webcam-save.php",
                data: {
                    imgBase64: dataUrl,
                    user: "Joe",
                userid: 25
        }
        }).done(function(msg) {
                console.log("saved");
                $("#uploading").hide();
                $("#uploaded").show();
            });
        });
    }, false);

</script>


<div class="camcontent">
    <video id="video" autoplay></video>
    <canvas id="canvas" width="640" height="480"> </canvas>
</div>
<div class="cambuttons">
    <button id="snap" style="display:none;">  Capture </button>
    <button id="reset" style="display:none;">  Reset  </button>
    <button id="upload" style="display:none;"> Upload </button>
    <br> <span id=uploading style="display:none;"> Uploading has begun . . .  </span>
    <span id=uploaded  style="display:none;"> Success, your photo has been uploaded!</span>
</div>
</body>
</html>

注意事项:

我已经测试了代码，它按预期工作。如果遇到问题，请确保您对 images 文件夹具有写入权限。

文件夹结构:

/
  html5-webcam-save.php
  selfie_html5.html
  /images (folder)

关于javascript - 如何使用网络摄像头拍照并将其转换为图像文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44009823/

27 4 0
文章推荐： c# - 单例模式 - 属性的不同值
文章推荐： c - 如何确定 Vorbis 流的长度(以秒为单位)？
文章推荐： c - 仅使用一个 pthread_t 变量和使用多个 pthread_t 变量有什么区别？
文章推荐： c# - 将 UI 字符串放入资源中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com