0
105
VistasRetraso y volver a hacer clic para mostrar los medios del usuario
**PROBLEMA: **
Estoy tratando de tomar los medios de usuario una vez que el usuario hace clic en el botón, 'ingresar a la sala', y después de eso, se mostrará su video (medios de usuario),
pero cuando hago clic en el botón, el lugar para el video multimedia del usuario está ocupado y el botón se desplaza pero no aparece ningún video y cuando hago clic nuevamente, solo se muestra el video
import React, { useRef, useState } from 'react'
import styles from './userVideo.module.css'
function UserVideo() {
const video = useRef();
const [stream, setStream] = useState()
const constraints = {
audio: true,
video: {
width: 500,
height: 300
}
}
const getUserMedia = () => {
alert(" getUser Media is called ")
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((stream) => {
setStream(stream)
video.current.srcObject = stream
})
}
return (
<div className={styles.userVideoOuterContainer} >
<button onClick={getUserMedia} className={styles.enterRoomButton}>
Enter Room
</button>
{stream && <video muted ref={video} autoPlay style={{ width: "300px" }} />}
</div>
)
}
export default UserVideo
CAPTURAS DE PANTALLA ingrese la descripción de la imagen aquí
1 Respuestas
Responde la pregunta0
El video se renderiza antes de ref video.current set stream, por lo que la primera vez que se hace clic en el botón video.current.srcObject = stream no funciona. intenta dejar
video.current.srcObject = stream to useEffect tiene dependencias de flujo como el siguiente código. Opción 1:
const getUserMedia = () => {
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((stream) => {
setStream(stream)
})
}
useEffect(() => {
if(video.current){
video.current.srcObject = stream
}
}, [stream])
Opción 2: puede dejar que la condición reproduzca el video a CSS
<video muted ref={video} autoPlay style={{ width: "300px", display: display: stream ? "block" : "none" }} />