如何在 js 中从相机 window 中删除此 [object promise] 标签？

Question

在此代码中，当您运行网页时，倒计时从 5 开始到 0，然后相机 window 打开以拍摄您的照片，但在该相机中 window 这个 [ object promises] 标签也会闪烁。如果能从我的相机中删除这条线，我们将不胜感激 window。我是js的新手。代码：



<body>
    
    <div class="container">
        <h1 id="count">5</h1>
    </div>

    <!-- Stream video via webcam -->
    <div class="video-wrap">
        <video id="video" playsinline autoplay></video>
    </div>

    <!-- Trigger canvas web API -->
    <div class="controller">
        <button id="snap">Capture</button>
    </div>

    <!-- Webcam video snapshot -->
    <canvas id="canvas" width="640" height="480"></canvas>

    <script type="text/javascript">
        'use strict';

        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const snap = document.getElementById('snap');
        const errorMsgElement = document.getElementById('span#ErrorMsg');

        const constraints = {
            audio: true,
            video: {
                width: 1280, height: 720
            }
        };
        async function init() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia(constraints);
                handleSuccess(stream);
            }
            catch (e) {
                errorMsgElement.innerHTML = `navigator.getUserMedia.error:${e.toString()}`;

            }
        }

        // Success
        function handleSuccess(stream) {
            window.stream = stream;
            video.srcObject = stream;
        }

        var counter = 5;
        setInterval(function () {
            counter--;
            if (counter >= 0) {
                var id = document.getElementById("count");
                id.innerHTML = counter;
            }
            if (counter == 0) {
                id.innerHTML = init();
            }
        }, 1000);

        var context = canvas.getContext('2d');
        snap.addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
        });

    </script>
</body>

Answer 1

init 是一个异步函数，这意味着它将首先 return 一个承诺，然后，当异步执行完成时，该承诺将解析为其他内容。当您将 innerHTML 设置为 init 的 return 值时，您并不是在等待解决（或拒绝）的承诺。

要解决此问题，您应该将 setInterval 的回调设置为异步函数并等待 init.

的响应

setInterval(async () => {
    counter--;
    if (counter >= 0) {
        var id = document.getElementById("count");
        id.innerHTML = counter;
    }
    if (counter == 0) {
        id.innerHTML = await init();
    }
}, 1000);

如何在 js 中从相机 window 中删除此 [object promise] 标签？

how to remove this [object promise] tag from your camera window in js?

html

javascript

css

object

promise