Quiero integrar qr-scanner a mi proyecto. Esta biblioteca es capaz de decodificar códigos QR utilizando la cámara. Solo necesita la referencia a un elemento de video html y luego muestra la transmisión de la cámara web y, opcionalmente, algunos indicadores de un código QR que se encuentra en este elemento.

El componente más fácil sería algo como esto:

 import { useRef } from "react"; import QrScanner from "qr-scanner"; export const QrComponent = () => { const videoElement = useRef(null); const scanner = new QrScanner(videoElement.current, (result) => { console.log(result) }) return ( <video ref={videoElement} /> ) }

sin embargo, qr-scanner verifica si el elemento de destino pasado ya es parte del DOM :

 if (!document.body.contains(video)) { document.body.appendChild(video); shouldHideVideo = true; }

el elemento de video nunca se agregará al DOM, cuando se crea el objeto QrScanner. Esto lleva a que shouldHideVideo se establezca en verdadero, lo que deshabilita el video por completo más adelante en el código de la biblioteca.

Así que creo que necesito algún tipo de forma de reaccionar al elemento de video que se agrega al DOM. Pensé en usar un MutationObserver (y lo probé robando el gancho de esta página ), sin embargo, solo quería imprimir todas las mutaciones usando el gancho de esta manera:

 import { useRef, useCallback } from "react"; import QrScanner from "qr-scanner"; import { useMutationObservable } from "./useMutationObservable"; export const QrComponent = () => { const videoElement = useRef(null); const scanner = new QrScanner(videoElement.current, (result) => { console.log(result) }) const onMutation = useCallback((mutations) => console.log(mutations), []) useMutationObservable(document, onMutation) return ( <video ref={videoElement} /> ) }

sin embargo, nunca imprimí una sola línea, por lo que me parece que no hay mutaciones allí.

¿Quizás entendí algo mal? ¿Cómo puedo reaccionar ante el elemento de video que se agrega al documento?