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"; ...@@ -8,7 +8,8 @@ import micoff_btn from "../../images/micoffbtn.png";
import React, { useState } from "react"; import React, { useState } from "react";
const Controller = (props) => { const Controller = (props) => {
const { mic, video, speaker, setMic, setSpeaker, setVideo } = props; console.log(props);
const { mic, video, speaker, micClick, speakerClick, videoClick } = props;
return ( return (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
...@@ -23,27 +24,27 @@ const Controller = (props) => { ...@@ -23,27 +24,27 @@ const Controller = (props) => {
> >
{mic ? ( {mic ? (
<div className="col d-flex justify-content-center"> <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setMic}> <button type="button" className="btn" onClick={micClick}>
<img src={micoff_btn} width="45" height="40" /> <img src={mic_btn} width="45" height="40" />
</button> </button>
</div> </div>
) : ( ) : (
<div className="col d-flex justify-content-center"> <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setMic}> <button type="button" className="btn" onClick={micClick}>
<img src={mic_btn} width="45" height="40" /> <img src={micoff_btn} width="45" height="40" />
</button> </button>
</div> </div>
)} )}
{speaker ? ( {speaker ? (
<div className="col d-flex justify-content-center"> <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setSpeaker}> <button type="button" className="btn" onClick={speakerClick}>
<img src={speakeroff_btn} width="45" /> <img src={speaker_btn} width="45" />
</button> </button>
</div> </div>
) : ( ) : (
<div className="col d-flex justify-content-center"> <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setSpeaker}> <button type="button" className="btn" onClick={speakerClick}>
<img src={speaker_btn} width="45" /> <img src={speakeroff_btn} width="45" />
</button> </button>
</div> </div>
)} )}
...@@ -54,15 +55,15 @@ const Controller = (props) => { ...@@ -54,15 +55,15 @@ const Controller = (props) => {
className="btn" className="btn"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#shareModal" data-bs-target="#shareModal"
onClick={setVideo} onClick={videoClick}
> >
<img src={videooff_btn} width="45" /> <img src={video_btn} width="45" />
</button> </button>
</div> </div>
) : ( ) : (
<div className="col d-flex justify-content-center"> <div className="col d-flex justify-content-center">
<button type="button" className="btn" onClick={setVideo}> <button type="button" className="btn" onClick={videoClick}>
<img src={video_btn} width="45" /> <img src={videooff_btn} width="45" />
</button> </button>
</div> </div>
)} )}
......
...@@ -5,7 +5,7 @@ import { useEffect } from "react"; ...@@ -5,7 +5,7 @@ import { useEffect } from "react";
import Video from "./Video"; import Video from "./Video";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
const Screen = () => { const Screen = (props) => {
const [socket, setSocket] = useState(null); const [socket, setSocket] = useState(null);
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
const { roomId, channelId } = useParams(); const { roomId, channelId } = useParams();
...@@ -97,11 +97,13 @@ const Screen = () => { ...@@ -97,11 +97,13 @@ const Screen = () => {
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({ .getUserMedia({
audio: true, audio: props.audio,
video: { video: props.video
width: 375, ? {
height: 260, width: 375,
}, height: 260,
}
: false,
}) })
.then((stream) => { .then((stream) => {
if (localVideoRef.current) localVideoRef.current.srcObject = stream; if (localVideoRef.current) localVideoRef.current.srcObject = stream;
...@@ -245,6 +247,7 @@ const Screen = () => { ...@@ -245,6 +247,7 @@ const Screen = () => {
> >
{console.log(users)} {console.log(users)}
<img <img
alt="sharerImg"
className="rounded-circle me-2" className="rounded-circle me-2"
src="/cherry.jpg" src="/cherry.jpg"
width="40px" width="40px"
......
import Header from '../components/Header' import Header from "../components/Header";
import ChannelList from '../components/Room/ChannelList' import ChannelList from "../components/Room/ChannelList";
import RoomHeader from '../components/Room/RoomHeader' import RoomHeader from "../components/Room/RoomHeader";
import Screen from '../components/Room/Screen' import Screen from "../components/Room/Screen";
import User from '../components/Room/User' import User from "../components/Room/User";
import Controller from '../components/Room/Controller' import Controller from "../components/Room/Controller";
import { useState } from "react";
const RoomPage = () => { 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 ( return (
<div> <div>
{/* <Header hamburger={ChannelList} /> */} {/* <Header hamburger={ChannelList} /> */}
<ChannelList /> <ChannelList />
<RoomHeader /> <RoomHeader />
<Screen /> <Screen mic={mic} video={video} />
<User /> <User />
<Controller /> <Controller
mic={mic}
speaker={speaker}
video={video}
micClick={micClick}
speakerClick={speakerClick}
videoClick={videoClick}
/>
</div> </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