En este artículo, discutiremos cómo encender/apagar video o audio. Comprenderemos cómo podemos encender o apagar nuestro video/audio usando el botón de alternar
Para una mejor comprensión, mantendremos la implementación simple.
Creación y configuración del entorno:
Paso 1: Cree una aplicación React usando el siguiente comando
npx create-react-app myapp
Paso 2: después de crear la aplicación React, muévase a nuestro directorio de proyectos usando el siguiente comando
cd myapp
dentro de la carpeta src, encontrarás el archivo App.js, modificaremos este componente.
Estructura del proyecto: Tendrá el siguiente aspecto:
Ejemplo: el componente es App.js, tiene un elemento de video donde aparecerá su video. En la parte inferior izquierda, hay dos botones de alternar, mediante los cuales puede alternar su video/audio.
- Aplicación.js:
Javascript
import { useEffect, useState, useRef } from "react";
export default function App() {
const [mystream, setmystream] = useState(null);
const [videoswitch, setvideo] = useState(true);
const [audioswitch, setaudio] = useState(true);
const myvideo = useRef(null);
useEffect(() => {
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((stream) => {
myvideo.current.srcObject = stream;
myvideo.current.autoplay = true;
myvideo.current.muted = false;
setmystream(stream);
});
}, []);
const handleVideo = () => {
if (videoswitch) {
setvideo(false);
mystream.getTracks().forEach(function (track) {
if (track.readyState === "live" &&
track.kind === "video") {
track.enabled = false;
}
});
} else {
setvideo(true);
mystream.getTracks().forEach(function (track) {
if (track.readyState === "live" &&
track.kind === "video") {
track.enabled = true;
}
});
}
};
const handleAudio = () => {
if (audioswitch) {
setaudio(false);
mystream.getTracks().forEach(function (track) {
if (track.readyState === "live" &&
track.kind === "audio") {
track.enabled = false;
}
});
} else {
setaudio(true);
mystream.getTracks().forEach(function (track) {
if (track.readyState === "live" &&
track.kind === "audio") {
track.enabled = true;
}
});
}
};
return (
<div>
<button onClick={handleVideo}>
{videoswitch ? "Turn off video" :
"Turn on video"}
</button>
<button onClick={handleAudio}>
{audioswitch ? "Turn off audio" :
"Turn on audio"}
</button>
<video ref={myvideo} style={{
width: "500px", height: "500px" }}></video>
</div>
);
}
El estado utilizado en este componente:
- mystream: este estado retendrá el flujo de medios del usuario.
- videoswitch: Esto mantendrá el estado actual del botón de cambio de video.
- audioswitch: Esto mantendrá el estado actual del botón de alternancia de audio.
Hemos usado el gancho useRef para acceder al elemento de video y establecer su propiedad srcObject:
const myvideo = useRef(null);
Ahora obtenga los medios del usuario cuando el componente se monte por primera vez usando el gancho de reacción useEffect y configure la propiedad srcObject del elemento de video. Hemos creado dos detectores de eventos onClick para los botones para que podamos alternar entre activado/desactivado.
Si el video o el audio ya están apagados, lo encenderemos usando
track.enabled=true
Nota: si desea detener la transmisión, puede usar track.stop()
Inicie la aplicación: ahora inicie el servidor de desarrollo con el siguiente comando
npm start
Producción:
Publicación traducida automáticamente
Artículo escrito por mondaltarakes y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA