Chrome集成Shape Detection API

Chrome团队尝试在Chrome中集成了一套与图形识别相关的API，使得图形识别这种以前只在原生应用中存在，或者在浏览器上，要借助其他难用的外部库才能实现的功能，现在只要少量代码即可实现。这些API包括人脸识别，条形码/二维码识别和文本识别，基本上覆盖了当前互联网应用的大部分场景。

  • window.FaceDetector
  • window.BarcodeDetector
  • window.TextDetector

从现在公布的信息来看，以下这些场景可能得以轻松实现：

  1. 人脸识别：
    • 自动框选你家庭聚会照片里的亲戚朋友们，然后你就可以给每个人都贴标签了，不用自己逐个框选。
    • 在社交网站上注册的时候，你上传了一张照片，浏览器可以帮你裁剪好最佳尺寸。
  2. 条形码识别： 
    • 识别网页中的条形码/二维码，并作相应的动作，比如链接跳转，支付等等。
     
  3. 文本识别： 
    • OCR
    • 配合语音接口，朗读图片中的文字

下面是一个demo，目前想要尝试利用这个接口需要最新的Chrome，不过也仅仅是可以调用，对于条形码的识别暂时还无法实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AndroidChrome 内置BarcodeReader</title>
</head>
<body>
    <video width="350" height="500" id="video" playsinline></video><br/>
    <input id="bartext" type="text" style="width:200px;" />
    <button id="clear">clear</button>
    <hr/>可以被读取的Barcode <br><span id="typeValue"></span>
    <script>
    (async function main() {
        var decodeflag=false;
        var formats = [];
        try { formats = await BarcodeDetector.getSupportedFormats(); }
        catch { document.getElementById("bartext").value="没有Barcode机能"; return; }
        if(formats.length==0) {
            document.getElementById("bartext").value="没有对应Barcode";　return;
        }
        document.getElementById("typeValue").innerHTML=formats.join("<br>");
        const facecamera = { video: { facingMode: "user" } }; // フェースカメラ
        const backcamera = { video: { facingMode: { exact: "environment" } } }; // 外側
        var stream = null;
        if( stream == null ) try { stream = await navigator.mediaDevices.getUserMedia(backcamera); } catch (e) { }
        if( stream == null ) try { stream = await navigator.mediaDevices.getUserMedia(facecamera); } catch (e) { }
        if( stream == null ) { document.getElementById("bartext").value = "Camera不可利用"; return; }

        const video = document.getElementById("video");
        video.srcObject = stream;
        await video.play(); decodeflag=true;
        const detector = new BarcodeDetector();
        setInterval(async () => {
            if( decodeflag === false ) return;
            const detectionList = await detector.detect(video);
            for(const detected of detectionList) {
                document.getElementById("bartext").value = detected.rawValue;
                video.pause(); decodeflag=false;
            }
        }, 500);
        document.getElementById("clear").addEventListener("click",function(event) {
            document.getElementById("bartext").value = "";
            video.play(); decodeflag=true;
        });
    })();
    </script>
</body>
</html>

 

posted @ 2020-08-21 15:04  蝶花残梦  阅读(342)  评论(0)  编辑  收藏  举报
Live2D