[英]ReactJS canvas drawImage without showing html5 video element
I need to draw the stream from camera on top of a canvas using drawImage, however when I add the video element in react component it shows the element's stream in the page too.我需要使用drawImage从canvas顶部的摄像头绘制stream,但是当我在react组件中添加视频元素时,它也会在页面中显示元素的stream。 If I use display:'none' drawImage can't draw the user's webcam, it draws blank screen.
如果我使用 display:'none' drawImage 无法绘制用户的网络摄像头,它会绘制空白屏幕。 Do I have to show html5 video element in the page or is there a way to play it without showing?
我是否必须在页面中显示 html5 视频元素,或者有没有办法在不显示的情况下播放它?
I am getting video stream from camera with getUserMedia:我正在使用 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)
}
And the video ref is:视频参考是:
return( <video
style={{display: 'none' }}
ref={videoRef}
className={classes.sourcePlayback}
src={sourceUrl}
hidden={isLoading}
autoPlay
playsInline
controls={false}
muted
loop
onLoadedData={handleVideoLoad}
/>)
I am using this videoRef in canvas like:我在 canvas 中使用这个 videoRef 像:
ctx.drawImage(sourcePlayback.htmlElement, 0, 0)
Here if the htmlElement is given with display:'none' it doesn't draw.在这里,如果 htmlElement 与 display:'none' 一起给出,则它不会绘制。 I want to draw the htmlElement but not show it in the page.Is there a way to achieve this?
我想绘制 htmlElement 但不在页面中显示它。有没有办法实现这一点? I want html5VideoElement to play invisibly basically.display:none does not work.
我希望 html5VideoElement 基本上不可见地播放。display:none 不起作用。
EDIT:编辑:
Add css as visibility:'hidden' works for this one.添加 css 作为可见性:“隐藏”适用于此。
sourcePlayback: {
visibility: 'hidden',
display: 'flex',
width: 0,
height: 0,
},
I was able to replicate your issue in chrome with https://record.a.video .我能够使用https://record.a.video在 chrome 中复制您的问题。
When I used display: none
on the video attribute, the video overlay on the canvas was black instead of my camera.当我在视频属性上使用
display: none
时,canvas 上的视频覆盖是黑色的,而不是我的相机。
Workaround:解决方法:
When I set the CSS on the video to width:1px
, the video shows up on the canvas.当我将视频上的 CSS 设置为
width:1px
时,视频会显示在 canvas 上。 I suppose it's technically on the screen, but it'll probably work for your purposes.我想它在技术上是在屏幕上,但它可能会为你的目的工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.