ReactJS画布drawImage不显示html5视频元素

Posted 2023-03-24

【中文标题】ReactJS画布drawImage不显示html5视频元素

【英文标题】：ReactJS canvas drawImage without showing html5 video element

【发布时间】：2021-08-19 15:17:58

【问题描述】：

我需要使用 drawImage 在画布顶部从相机绘制流，但是当我在反应组件中添加视频元素时，它也会在页面中显示元素的流。如果我使用 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
            />)

我在画布中使用这个 videoRef，例如：

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

这里如果 htmlElement 带有 display:'none' 它不会绘制。我想绘制 htmlElement 但不在页面中显示它。有没有办法实现这一点？我希望 html5VideoElement 基本上不可见地播放。display:none 不起作用。

编辑：

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

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

【问题讨论】：

我确实尝试在此演示 webrtc.github.io/samples/src/content/getusermedia/canvas 中手动隐藏视频元素，一切似乎都正常。你确定你只做display:none？

【参考方案1】：

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

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

解决方法：

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

【讨论】：

谢谢你的回答，还有可见性：'隐藏'可以解决问题