react-webcam (npm) reset camera

Question

我有一个非常简单的基本的react-webcam npm实现。

import React, { useRef } from "react";
import Webcam from "react-webcam";
const ReactWebcam = () => {
const webcamElement = useRef(null);
const videoConstraints = {
width: 640,
height: 360,
facingMode: "user",
};
const audioConstraints = {
suppressLocalAudioPlayback: true,
noiseSuppression: true,
echoCancellation: true,
};
return (
<div className="webcam" style={{ width: 640 }}>
<Webcam
ref={webcamElement}
audio={false}
screenshotFormat="image/jpeg"
videoConstraints={videoConstraints}
audioConstraints={audioConstraints}
/>
</div>
);
};
export default ReactWebcam;

这一切似乎都工作得很好，但是如果电脑从睡眠模式(例如，在我的笔记本电脑上关闭并重新打开盖子)，网络摄像头组件只是显示黑屏。

因此，我想知道是否有人对能够通过按钮或触发器刷新流有任何建议。

Answer 1

当然，您需要检测用户何时点击返回到之前已经打开的浏览器选项卡。

你需要监听js事件visibilitychange

一旦你知道用户回到你的页面，你触发一些刷新(websocket也是这样工作的)。

你可以在网上找到这样的模块:

• https://www.npmjs.com/package/ifvisible.js
• https://www.npmjs.com/package/visibility-state-listener
• https://www.npmjs.com/package/svelte-visibility-change

但是我开发了我的:

import React, { useEffect, useState, useRef, useCallback, FC } from 'react'
import window from 'global/window'
const vendorEvents = [
{
hidden: 'hidden',
event: 'visibilitychange',
state: 'visibilityState'
},
{
hidden: 'webkitHidden',
event: 'webkitvisibilitychange',
state: 'webkitVisibilityState'
},
{
hidden: 'mozHidden',
event: 'mozvisibilitychange',
state: 'mozVisibilityState'
},
{
hidden: 'msHidden',
event: 'msvisibilitychange',
state: 'msVisibilityState'
},
{
hidden: 'oHidden',
event: 'ovisibilitychange',
state: 'oVisibilityState'
}
]
const isDocumentSupported = typeof document !== 'undefined' && Boolean(document.addEventListener)
export const visibility = (() => {
if (isDocumentSupported) {
for (let i = 0; i < vendorEvents.length; i++) {
const event = vendorEvents[i]
if (event.hidden in document) {
return { type: document, event }
}
}
if ('onfocusin' in document) {
return [
{ type: document, action: 'in', event: 'focusin' },
{ type: document, action: 'out', event: 'focusout' }
]
}
}
const responses = []
if ('onpageshow' in window) {
responses.push({ type: window, action: 'in', event: 'pageshow' })
responses.push({ type: window, action: 'out', event: 'pagehide' })
}
if ('onfocus' in window) {
responses.push({ type: window, action: 'in', event: 'focus' })
responses.push({ type: window, action: 'out', event: 'blur' })
}
if (responses.length === 0) {
return null
}
return responses
})()
const usePageVisibility = () => {
const [isVisible, setIsVisible] = useState(true)
const handler = useCallback(
(event, action) => {
if (action !== 'in' && action !== 'out') {
setIsVisible(action)
}
if (action === 'in' && !isVisible) {
setIsVisible(true)
}
if (action === 'out' && isVisible) {
setIsVisible(false)
}
},
[isVisible]
)
useEffect(() => {
if (visibility) {
if (Array.isArray(visibility)) {
visibility.forEach(e => {
e.type.addEventListener(e.event, event => handler(event, e.action))
})
} else {
visibility.type.addEventListener(visibility.event.event, event => handler(event, !visibility.type[visibility.event.hidden]))
}
}
return () => {
if (visibility) {
if (Array.isArray(visibility)) {
visibility.forEach(e => {
e.type.removeEventListener(e.event, event => handler(event, e.action))
})
} else {
visibility.type.removeEventListener(visibility.event.event, event => handler(event, !visibility.type[visibility.event.hidden]))
}
}
}
}, [handler])
if (!visibility) {
return true
}
return isVisible
}
export default usePageVisibility

import usePageVisibility from '../../components/VisibilityListeners'
const isVisible = usePageVisibility()
const oldIsVisible = useRef(isVisible)
useEffect(() => {
if (!isLoading && indexDay !== -1 && isVisible && !oldIsVisible.current) {
closeWebSocket()
openWebSocket()
}
oldIsVisible.current = isVisible
}, [isVisible, openWebSocket, closeWebSocket, isLoading, indexDay])