Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
L
live
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
liujiaxin
live
Commits
bc56e5d1
Commit
bc56e5d1
authored
Feb 12, 2020
by
liujiaxin
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
添加iframe和白板功能同步
parent
61292688
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
111 additions
and
40 deletions
+111
-40
index.tsx
src/pages/classroom/index.tsx
+39
-21
small-class.tsx
src/pages/classroom/small-class.tsx
+28
-6
room.ts
src/stores/room.ts
+34
-11
helper.ts
src/utils/helper.ts
+4
-1
types.ts
src/utils/types.ts
+6
-1
No files found.
src/pages/classroom/index.tsx
View file @
bc56e5d1
...
...
@@ -125,12 +125,13 @@ export function RoomPage({ children }: any) {
const
publishLock
=
useRef
<
boolean
>
(
false
);
const
{
rtcJoined
,
uid
,
role
,
mediaDevice
}
=
useMemo
(()
=>
{
const
{
rtcJoined
,
uid
,
role
,
mediaDevice
,
studentsOrder
}
=
useMemo
(()
=>
{
return
{
rtcJoined
:
roomState
.
rtc
.
joined
,
uid
:
roomState
.
me
.
uid
,
role
:
roomState
.
me
.
role
,
mediaDevice
:
roomState
.
mediaDevice
,
studentsOrder
:
roomState
.
studentsOrder
}
},
[
roomState
]);
...
...
@@ -158,7 +159,7 @@ export function RoomPage({ children }: any) {
},
[
me
.
role
,
location
.
pathname
,
course
.
linkId
]);
useEffect
(()
=>
{
console
.
log
(
4
,
'
rtc publish stream
'
);
if
(
!
rtcJoined
||
rtc
.
current
)
return
;
if
(
platform
===
'
web
'
)
{
...
...
@@ -296,27 +297,32 @@ export function RoomPage({ children }: any) {
rtc
.
current
=
true
;
debugger
// WARN: IF YOU ENABLED APP CERTIFICATE, PLEASE SIGN YOUR TOKEN IN YOUR SERVER SIDE AND OBTAIN IT FROM YOUR OWN TRUSTED SERVER API
console
.
info
(
1
,
'
rtc join
'
)
webClient
.
joinChannel
({
uid
:
+
roomState
.
me
.
uid
,
channel
:
roomState
.
course
.
rid
,
token
:
''
,
dual
:
isSmallClass
}).
then
(()
=>
{
console
.
info
(
2
,
'
rtc join ok
'
)
// 如果当前用户是教师,直接发布,
if
(
roomStore
.
state
.
me
.
role
==
'
teacher
'
)
{
roomStore
.
publishMeStream
();
}
else
{
// 看台上几个人里包含自己
if
(
roomStore
.
state
.
studentsOrder
.
includes
(
+
me
.
uid
))
{
roomStore
.
publishMeStream
();
}
}
console
.
info
(
1.1
,
'
rtc join
'
)
// if (roomState.me.role == 'teacher') {
console
.
info
(
'
i m teacher should rtc join
'
)
webClient
.
joinChannel
({
uid
:
+
roomState
.
me
.
uid
,
channel
:
roomState
.
course
.
rid
,
token
:
''
,
dual
:
isSmallClass
}).
then
(()
=>
{
console
.
info
(
2
,
'
rtc join ok
'
)
roomStore
.
publishMeStream
();
// // 如果当前用户是教师,直接发布,
// if(roomStore.state.me.role == 'teacher') {
// roomStore.publishMeStream();
// } else {
// // 看台上几个人里包含自己
// if (roomStore.state.studentsOrder.includes(+me.uid)) {
// roomStore.publishMeStream();
// }
// }
}).
catch
(
console
.
warn
).
finally
(()
=>
{
rtc
.
current
=
false
;
});
// }
return
()
=>
{
console
.
log
(
'
exit
'
)
const
events
=
[
...
...
@@ -346,7 +352,7 @@ export function RoomPage({ children }: any) {
});
}
}
/*
if (platform === 'electron') {
const rtcClient = roomStore.rtcClient;
const nativeClient = rtcClient as AgoraElectronClient;
...
...
@@ -421,9 +427,21 @@ export function RoomPage({ children }: any) {
!rtc.current && roomStore.removeLocalStream();
}
}
*/
}
},
[
roomState
.
me
.
uid
,
roomState
.
course
.
rid
]);
useEffect
(()
=>
{
const
webClient
=
roomStore
.
rtcClient
as
AgoraWebClient
;
if
(
!
webClient
.
joined
)
{
return
;
}
console
.
log
(
1.2
,
studentsOrder
,
'
studentsOrder changed publish stream
'
);
},
[
studentsOrder
]);
return
(
<
div
className=
{
`classroom ${roomType.path}`
}
>
<
NativeSharedWindow
/>
...
...
src/pages/classroom/small-class.tsx
View file @
bc56e5d1
import
React
,
{
useLayoutEffect
,
useMemo
,
useRef
,
useState
}
from
'
react
'
;
import
React
,
{
use
Effect
,
use
LayoutEffect
,
useMemo
,
useRef
,
useState
}
from
'
react
'
;
// import VideoMarquee from '../../components/video-marquee';
import
MediaBoard
from
'
../../components/mediaboard
'
;
import
Roomboard
from
'
../../components/roomboard
'
;
...
...
@@ -7,21 +7,43 @@ import CourseWareFrame from "../../components/courseware-frame";
import
VideoShowList
from
"
../../components/video-stage-list
"
;
import
{
ToolsSwitcherController
}
from
"
../../components/tools-switcher-controller
"
;
import
{
roomStore
}
from
"
../../stores/room
"
;
import
{
TOOL_TYPE
}
from
"
../../utils/types
"
;
import
{
platform
}
from
"
../../utils/platform
"
;
import
AgoraWebClient
from
"
../../utils/agora-rtc-client
"
;
import
{
AgoraElectronClient
}
from
"
../../utils/agora-electron-client
"
;
import
{
useRoomState
}
from
"
../../containers/root-container
"
;
export
default
function
SmallClass
()
{
const
[
tool
,
setTool
]
=
useState
(
true
);
const
roomState
=
useRoomState
();
const
changeTool
=
async
()
=>
{
console
.
log
(
roomStore
.
state
.
course
.
currentTool
);
if
(
roomStore
.
state
.
course
.
currentTool
==
TOOL_TYPE
.
WHITEBOARD
)
{
await
roomStore
.
setCurrentTool
(
TOOL_TYPE
.
COURSE_WARE
)
}
else
{
await
roomStore
.
setCurrentTool
(
TOOL_TYPE
.
WHITEBOARD
)
}
}
const
{
currentTool
}
=
useMemo
(()
=>
{
return
{
currentTool
:
roomStore
.
state
.
course
.
currentTool
}
},
[
roomState
]);
useEffect
(()
=>
{
},
[
roomStore
.
state
.
course
.
currentTool
]);
return
(
<
div
className=
"room-container"
>
{
/*<VideoMarquee />*/
}
<
VideoShowList
/>
<
div
className=
"container"
>
<
ToolsSwitcherController
onClick=
{
()
=>
{
setTool
(
!
tool
);
}
}
/>
{
roomStore
.
state
.
me
.
role
==
'
teacher
'
?
<
ToolsSwitcherController
onClick=
{
()
=>
{
changeTool
(
);
}
}
/>
:
null
}
{
tool
?
<
div
>
MediaBoard
</
div
>
/*<MediaBoard />*/
{
currentTool
==
TOOL_TYPE
.
WHITEBOARD
?
<
MediaBoard
/>
:
<
CourseWareFrame
></
CourseWareFrame
>
}
{
roomStore
.
state
.
me
.
role
==
'
teacher
'
?
<
Roomboard
currentActive=
{
'
media
'
}
/>
:
null
}
</
div
>
...
...
src/stores/room.ts
View file @
bc56e5d1
import
{
platform
}
from
'
./../utils/platform
'
;
import
{
AgoraElectronClient
}
from
'
./../utils/agora-electron-client
'
;
import
{
ChatMessage
,
AgoraStream
}
from
'
../utils/types
'
;
import
{
platform
}
from
'
./../utils/platform
'
;
import
{
AgoraElectronClient
}
from
'
./../utils/agora-electron-client
'
;
import
{
AgoraStream
,
ChatMessage
,
TOOL_TYPE
}
from
'
../utils/types
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
OrderedMap
,
List
,
OrderedSet
}
from
'
immutable
'
;
import
AgoraRTMClient
,
{
RoomMessage
}
from
'
../utils/agora-rtm-client
'
;
import
{
List
,
OrderedMap
,
OrderedSet
}
from
'
immutable
'
;
import
AgoraRTMClient
,
{
RoomMessage
}
from
'
../utils/agora-rtm-client
'
;
import
{
globalStore
}
from
'
./global
'
;
import
AgoraWebClient
from
'
../utils/agora-rtc-client
'
;
import
{
get
}
from
'
lodash
'
;
import
{
isElectron
}
from
'
../utils/platform
'
;
import
{
isElectron
}
from
'
../utils/platform
'
;
import
GlobalStorage
from
'
../utils/custom-storage
'
;
import
{
whiteboard
}
from
'
./whiteboard
'
;
import
{
STAGE_NUM
}
from
"
../utils/consts
"
;
import
{
jsonParse
}
from
"
../utils/helper
"
;
function
canJoin
({
uid
,
onlineStatus
,
roomType
,
channelCount
,
role
}:
{
uid
:
any
,
onlineStatus
:
any
,
role
:
string
,
channelCount
:
number
,
roomType
:
number
})
{
const
result
=
{
...
...
@@ -75,7 +73,8 @@ export interface ClassState {
linkId
:
number
// link_uid
lockBoard
:
number
// lock_board
courseState
:
number
muteChat
:
number
muteChat
:
number
,
currentTool
:
TOOL_TYPE
}
type
RtcState
=
{
...
...
@@ -181,6 +180,7 @@ export class RoomStore {
rid
:
''
,
roomName
:
''
,
roomType
:
0
,
currentTool
:
TOOL_TYPE
.
WHITEBOARD
},
mediaDevice
:
{
microphoneId
:
''
,
...
...
@@ -431,7 +431,25 @@ export class RoomStore {
// this.commit(this.state);
}
async
setCurrentTool
(
tool
:
TOOL_TYPE
)
{
this
.
state
=
{
...
this
.
state
,
course
:
{
...
this
.
state
.
course
,
currentTool
:
tool
},
}
const
me
=
this
.
state
.
me
;
let
res
=
await
this
.
updateAttrsBy
(
me
.
uid
,
{
current_tool
:
tool
}).
then
(()
=>
{
console
.
log
(
"
update success
"
);
}).
catch
(
console
.
warn
)
// console.log("[update tool uid] res", uid);
return
res
;
}
initialize
()
{
this
.
subject
=
new
Subject
<
RoomState
>
();
this
.
state
=
{
...
...
@@ -999,6 +1017,7 @@ export class RoomStore {
whiteboard_uid
:
this
.
state
.
course
.
boardId
,
link_uid
:
this
.
state
.
course
.
linkId
,
shared_uid
:
this
.
state
.
course
.
sharedId
,
current_tool
:
this
.
state
.
course
.
currentTool
,
})
}
if
(
attr
)
{
...
...
@@ -1047,13 +1066,16 @@ export class RoomStore {
const
shared_uid
=
get
(
user
,
'
sharedId
'
,
this
.
state
.
course
.
sharedId
);
const
link_uid
=
get
(
user
,
'
linkId
'
,
this
.
state
.
course
.
linkId
);
const
lock_board
=
get
(
user
,
'
lockBoard
'
,
this
.
state
.
course
.
lockBoard
);
const
current_tool
=
get
(
user
,
'
currentTool
'
,
this
.
state
.
course
.
currentTool
);
Object
.
assign
(
attrs
,
{
mute_chat
,
class_state
,
whiteboard_uid
,
link_uid
,
shared_uid
,
lock_board
lock_board
,
current_tool
})
console
.
log
(
"
teacher attrs: >>>>
"
,
attrs
);
}
...
...
@@ -1228,7 +1250,8 @@ export class RoomStore {
boardId
:
room
.
whiteboard_uid
,
courseState
:
room
.
class_state
,
muteChat
:
room
.
mute_chat
,
lockBoard
:
room
.
lock_board
lockBoard
:
room
.
lock_board
,
currentTool
:
room
.
current_tool
})
// console.log("... me", this.state.me);
...
...
src/utils/helper.ts
View file @
bc56e5d1
import
{
RoomMessage
}
from
'
./agora-rtm-client
'
;
import
*
as
_
from
'
lodash
'
;
import
OSS
from
'
ali-oss
'
;
import
{
TOOL_TYPE
}
from
"
./types
"
;
export
interface
OSSConfig
{
accessKeyId
:
string
,
...
...
@@ -240,10 +241,11 @@ export function resolveChannelAttrs(json: object) {
whiteboard_uid
:
0
,
lock_board
:
0
,
grant_board
:
0
,
current_tool
:
TOOL_TYPE
.
WHITEBOARD
,
}
if
(
teacherJson
)
{
for
(
let
key
of
Object
.
keys
(
teacherJson
))
{
if
([
'
class_state
'
,
'
link_uid
'
,
'
shared_uid
'
,
'
mute_chat
'
,
'
whiteboard_uid
'
,
'
lock_board
'
].
indexOf
(
key
)
!==
-
1
if
([
'
class_state
'
,
'
link_uid
'
,
'
shared_uid
'
,
'
mute_chat
'
,
'
whiteboard_uid
'
,
'
lock_board
'
,
'
current_tool
'
].
indexOf
(
key
)
!==
-
1
&&
teacherJson
[
key
]
!==
undefined
&&
teacherJson
[
key
]
!==
''
)
{
room
[
key
]
=
teacherJson
[
key
];
...
...
@@ -289,6 +291,7 @@ export function resolveChannelAttrs(json: object) {
whiteboard_uid
:
teacherJson
.
whiteboard_uid
,
lock_board
:
teacherJson
.
lock_board
,
grant_board
:
+
teacherJson
.
grant_board
,
current_tool
:
+
teacherJson
.
current_tool
,
});
}
for
(
let
student
of
students
)
{
...
...
src/utils/types.ts
View file @
bc56e5d1
...
...
@@ -10,6 +10,11 @@ export enum ClassState {
STARTED
=
1
}
export
enum
TOOL_TYPE
{
WHITEBOARD
=
0
,
COURSE_WARE
=
1
}
export
interface
AgoraMediaStream
{
streamID
:
number
local
:
boolean
...
...
@@ -27,4 +32,4 @@ export class AgoraStream {
public
readonly
local
:
boolean
=
local
,
)
{
}
}
\ No newline at end of file
}
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