Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
bora-it
Commits
ad0400bb
Commit
ad0400bb
authored
Aug 02, 2021
by
Kim, Chaerin
Browse files
controller 기능 추가
parent
9d3de10a
Changes
3
Show whitespace changes
Inline
Side-by-side
client/src/components/Room/Controller.js
View file @
ad0400bb
...
...
@@ -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
=
{
mic
off
_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
=
{
mic
off
_btn
}
width
=
"
45
"
height
=
"
40
"
/>
<
/button
>
<
/div
>
)}
{
speaker
?
(
<
div
className
=
"
col d-flex justify-content-center
"
>
<
button
type
=
"
button
"
className
=
"
btn
"
onClick
=
{
s
etS
peaker
}
>
<
img
src
=
{
speaker
off
_btn
}
width
=
"
45
"
/>
<
button
type
=
"
button
"
className
=
"
btn
"
onClick
=
{
speaker
Click
}
>
<
img
src
=
{
speaker_btn
}
width
=
"
45
"
/>
<
/button
>
<
/div
>
)
:
(
<
div
className
=
"
col d-flex justify-content-center
"
>
<
button
type
=
"
button
"
className
=
"
btn
"
onClick
=
{
s
etS
peaker
}
>
<
img
src
=
{
speaker_btn
}
width
=
"
45
"
/>
<
button
type
=
"
button
"
className
=
"
btn
"
onClick
=
{
speaker
Click
}
>
<
img
src
=
{
speaker
off
_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
=
{
video
off
_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
=
{
video
off
_btn
}
width
=
"
45
"
/>
<
/button
>
<
/div
>
)}
...
...
client/src/components/Room/Screen.js
View file @
ad0400bb
...
...
@@ -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
"
...
...
client/src/pages/RoomPage.js
View file @
ad0400bb
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
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment