如何从 js 中的相机窗口中删除此 [object promise] 标签？答案

【问题标题】：how to remove this [object promise] tag from your camera window in js?如何从 js 中的相机窗口中删除此 [object promise] 标签？
【发布时间】：2021-05-16 11:52:04
【问题描述】：

在此代码中，当您运行网页时，countown 从 5 到 0 开始，然后打开相机窗口以捕获您的图片，但在该相机窗口中，此 [object promises] 标签也会闪烁。从我的相机窗口中删除这条线将不胜感激。我是 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>

【问题讨论】：

标签： javascript html css object promise

【解决方案1】：

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

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

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

【讨论】：

您的解决方案确实删除了 [object promises] 标签，但随后它在我的相机窗口上添加了另一个标签 [undefined]
那是因为init 函数没有返回值。如果我理解正确，倒计时达到 0 后，您想从屏幕上删除计数器并初始化流。为此，只需设置id.innerHTML = "" 并在下一行调用await init()。