ReactJS canvas drawImage 不显示 html5 视频元素

Question

我需要使用 drawImage 在 canvas 上从摄像头绘制流，但是当我在 React 组件中添加视频元素时，它也会在页面中显示该元素的流。如果我使用 display:'none' drawImage 无法绘制用户的网络摄像头，它会绘制空白屏幕。我是否必须在页面中显示 html5 视频元素，或者有没有办法在不显示的情况下播放它？

我正在使用 getUserMedia 从摄像头获取视频流：

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 但不在 page.Is 中显示它有办法实现吗？我想让 html5VideoElement 不可见地播放 basically.display:none 不起作用。

编辑：

添加 css 作为可见性：'hidden' 适用于此。

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

Answer 1

我能够用 https://record.a.video 在 chrome 中复制你的问题。

当我在视频属性上使用 display: none 时，canvas 上的视频叠加层是黑色的，而不是我的相机。

解决方法：

当我将视频上的 CSS 设置为 width:1px 时，视频会显示在 canvas 上。我想它在屏幕上技术上，但它可能适合您的目的。

ReactJS canvas drawImage 不显示 html5 视频元素

ReactJS canvas drawImage without showing html5 video element

javascript

html5-video

html5-canvas

reactjs