ReactJS canvas drawImage 不顯示 html5 視頻元素

Question

我需要使用drawImage從canvas頂部的攝像頭繪制stream，但是當我在react組件中添加視頻元素時，它也會在頁面中顯示元素的stream。 如果我使用 display:'none' drawImage 無法繪制用戶的網絡攝像頭，它會繪制空白屏幕。 我是否必須在頁面中顯示 html5 視頻元素，或者有沒有辦法在不顯示的情況下播放它？

我正在使用 getUserMedia 從相機獲取視頻 stream：

async function getCameraStream() {
      try {
        const constraint = { video: true }
        const stream = await navigator.mediaDevices.getUserMedia(constraint)
        if (videoRef.current) {
          videoRef.current.srcObject = stream
          return
        }
      } catch (error) {
        console.error('Error opening video camera.', error)
      }
      setLoading(false)
      setCameraError(true)
    }

視頻參考是：

  return(  <video 
              style={{display: 'none' }}
              ref={videoRef}
              className={classes.sourcePlayback}
              src={sourceUrl}
              hidden={isLoading}
              autoPlay
              playsInline
              controls={false}
              muted
              loop
              onLoadedData={handleVideoLoad}
            />)

我在 canvas 中使用這個 videoRef 像：

ctx.drawImage(sourcePlayback.htmlElement, 0, 0)

在這里，如果 htmlElement 與 display:'none' 一起給出，則它不會繪制。 我想繪制 htmlElement 但不在頁面中顯示它。有沒有辦法實現這一點？ 我希望 html5VideoElement 基本上不可見地播放。display:none 不起作用。

編輯：

添加 css 作為可見性：“隱藏”適用於此。

sourcePlayback: {
      visibility: 'hidden',
      display: 'flex',
      width: 0,
      height: 0,
    },

Answer 1

我能夠使用https://record.a.video在 chrome 中復制您的問題。

當我在視頻屬性上使用display: none時，canvas 上的視頻覆蓋是黑色的，而不是我的相機。

解決方法：

當我將視頻上的 CSS 設置為width:1px時，視頻會顯示在 canvas 上。 我想它在技術上是在屏幕上，但它可能會為你的目的工作。