Commit ad0400bb authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

controller 기능 추가

parent 9d3de10a
......@@ -8,7 +8,8 @@ import micoff_btn from "../../images/micoffbtn.png";
import React, { useState } from "react";
const Controller = (props) => {
const { mic, video, speaker, setMic, setSpeaker, setVideo } = props;
console.log(props);
const { mic, video, speaker, micClick, speakerClick, videoClick } = props;
return (
<div className="container">
<div className="row">
......@@ -23,27 +24,27 @@ const Controller = (props) => {
>
{mic ? (
<div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setMic}>
<img src={micoff_btn} width="45" height="40" />
<button type="button" className="btn" onClick={micClick}>
<img src={mic_btn} width="45" height="40" />
</button>
</div>
) : (
<div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setMic}>
<img src={mic_btn} width="45" height="40" />
<button type="button" className="btn" onClick={micClick}>
<img src={micoff_btn} width="45" height="40" />
</button>
</div>
)}
{speaker ? (
<div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setSpeaker}>
<img src={speakeroff_btn} width="45" />
<button type="button" className="btn" onClick={speakerClick}>
<img src={speaker_btn} width="45" />
</button>
</div>
) : (
<div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setSpeaker}>
<img src={speaker_btn} width="45" />
<button type="button" className="btn" onClick={speakerClick}>
<img src={speakeroff_btn} width="45" />
</button>
</div>
)}
......@@ -54,15 +55,15 @@ const Controller = (props) => {
className="btn"
data-bs-toggle="modal"
data-bs-target="#shareModal"
onClick={setVideo}
onClick={videoClick}
>
<img src={videooff_btn} width="45" />
<img src={video_btn} width="45" />
</button>
</div>
) : (
<div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setVideo}>
<img src={video_btn} width="45" />
<button type="button" className="btn" onClick={videoClick}>
<img src={videooff_btn} width="45" />
</button>
</div>
)}
......
......@@ -5,7 +5,7 @@ import { useEffect } from "react";
import Video from "./Video";
import { useParams } from "react-router-dom";
const Screen = () => {
const Screen = (props) => {
const [socket, setSocket] = useState(null);
const [users, setUsers] = useState([]);
const { roomId, channelId } = useParams();
......@@ -97,11 +97,13 @@ const Screen = () => {
navigator.mediaDevices
.getUserMedia({
audio: true,
video: {
audio: props.audio,
video: props.video
? {
width: 375,
height: 260,
},
}
: false,
})
.then((stream) => {
if (localVideoRef.current) localVideoRef.current.srcObject = stream;
......@@ -245,6 +247,7 @@ const Screen = () => {
>
{console.log(users)}
<img
alt="sharerImg"
className="rounded-circle me-2"
src="/cherry.jpg"
width="40px"
......
import Header from '../components/Header'
import ChannelList from '../components/Room/ChannelList'
import RoomHeader from '../components/Room/RoomHeader'
import Screen from '../components/Room/Screen'
import User from '../components/Room/User'
import Controller from '../components/Room/Controller'
import Header from "../components/Header";
import ChannelList from "../components/Room/ChannelList";
import RoomHeader from "../components/Room/RoomHeader";
import Screen from "../components/Room/Screen";
import User from "../components/Room/User";
import Controller from "../components/Room/Controller";
import { useState } from "react";
const RoomPage = () => {
const [mic, setMic] = useState(true);
const [speaker, setSpeaker] = useState(true);
const [video, setVideo] = useState(true);
const micClick = () => setMic(!mic);
const speakerClick = () => setSpeaker(!speaker);
const videoClick = () => setVideo(!video);
return (
<div>
{/* <Header hamburger={ChannelList} /> */}
<ChannelList />
<RoomHeader />
<Screen />
<Screen mic={mic} video={video} />
<User />
<Controller />
<Controller
mic={mic}
speaker={speaker}
video={video}
micClick={micClick}
speakerClick={speakerClick}
videoClick={videoClick}
/>
</div>
)
}
);
};
export default RoomPage
export default RoomPage;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment