Commit bc56e5d1 authored by liujiaxin's avatar liujiaxin

添加iframe和白板功能同步

parent 61292688
...@@ -125,12 +125,13 @@ export function RoomPage({ children }: any) { ...@@ -125,12 +125,13 @@ export function RoomPage({ children }: any) {
const publishLock = useRef<boolean>(false); const publishLock = useRef<boolean>(false);
const {rtcJoined, uid, role, mediaDevice} = useMemo(() => { const {rtcJoined, uid, role, mediaDevice, studentsOrder} = useMemo(() => {
return { return {
rtcJoined: roomState.rtc.joined, rtcJoined: roomState.rtc.joined,
uid: roomState.me.uid, uid: roomState.me.uid,
role: roomState.me.role, role: roomState.me.role,
mediaDevice: roomState.mediaDevice, mediaDevice: roomState.mediaDevice,
studentsOrder: roomState.studentsOrder
} }
}, [roomState]); }, [roomState]);
...@@ -158,7 +159,7 @@ export function RoomPage({ children }: any) { ...@@ -158,7 +159,7 @@ export function RoomPage({ children }: any) {
}, [me.role, location.pathname, course.linkId]); }, [me.role, location.pathname, course.linkId]);
useEffect(() => { useEffect(() => {
console.log(4, 'rtc publish stream');
if (!rtcJoined || rtc.current) return; if (!rtcJoined || rtc.current) return;
if (platform === 'web') { if (platform === 'web') {
...@@ -296,7 +297,9 @@ export function RoomPage({ children }: any) { ...@@ -296,7 +297,9 @@ export function RoomPage({ children }: any) {
rtc.current = true; rtc.current = true;
debugger debugger
// WARN: IF YOU ENABLED APP CERTIFICATE, PLEASE SIGN YOUR TOKEN IN YOUR SERVER SIDE AND OBTAIN IT FROM YOUR OWN TRUSTED SERVER API // 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') console.info(1.1, 'rtc join')
// if (roomState.me.role == 'teacher') {
console.info( 'i m teacher should rtc join')
webClient webClient
.joinChannel({ .joinChannel({
uid: +roomState.me.uid, uid: +roomState.me.uid,
...@@ -305,18 +308,21 @@ export function RoomPage({ children }: any) { ...@@ -305,18 +308,21 @@ export function RoomPage({ children }: any) {
dual: isSmallClass dual: isSmallClass
}).then(() => { }).then(() => {
console.info(2, 'rtc join ok') console.info(2, 'rtc join ok')
// 如果当前用户是教师,直接发布,
if(roomStore.state.me.role == 'teacher') {
roomStore.publishMeStream();
} else {
// 看台上几个人里包含自己
if (roomStore.state.studentsOrder.includes(+me.uid)) {
roomStore.publishMeStream(); roomStore.publishMeStream();
} // // 如果当前用户是教师,直接发布,
} // if(roomStore.state.me.role == 'teacher') {
// roomStore.publishMeStream();
// } else {
// // 看台上几个人里包含自己
// if (roomStore.state.studentsOrder.includes(+me.uid)) {
// roomStore.publishMeStream();
// }
// }
}).catch(console.warn).finally(() => { }).catch(console.warn).finally(() => {
rtc.current = false; rtc.current = false;
}); });
// }
return () => { return () => {
console.log('exit') console.log('exit')
const events = [ const events = [
...@@ -346,7 +352,7 @@ export function RoomPage({ children }: any) { ...@@ -346,7 +352,7 @@ export function RoomPage({ children }: any) {
}); });
} }
} }
/*
if (platform === 'electron') { if (platform === 'electron') {
const rtcClient = roomStore.rtcClient; const rtcClient = roomStore.rtcClient;
const nativeClient = rtcClient as AgoraElectronClient; const nativeClient = rtcClient as AgoraElectronClient;
...@@ -421,9 +427,21 @@ export function RoomPage({ children }: any) { ...@@ -421,9 +427,21 @@ export function RoomPage({ children }: any) {
!rtc.current && roomStore.removeLocalStream(); !rtc.current && roomStore.removeLocalStream();
} }
} }
*/
} }
}, [roomState.me.uid, roomState.course.rid]); }, [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 ( return (
<div className={`classroom ${roomType.path}`}> <div className={`classroom ${roomType.path}`}>
<NativeSharedWindow /> <NativeSharedWindow />
......
import React, {useLayoutEffect, useMemo, useRef, useState} from 'react'; import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
// import VideoMarquee from '../../components/video-marquee'; // import VideoMarquee from '../../components/video-marquee';
import MediaBoard from '../../components/mediaboard'; import MediaBoard from '../../components/mediaboard';
import Roomboard from '../../components/roomboard'; import Roomboard from '../../components/roomboard';
...@@ -7,21 +7,43 @@ import CourseWareFrame from "../../components/courseware-frame"; ...@@ -7,21 +7,43 @@ import CourseWareFrame from "../../components/courseware-frame";
import VideoShowList from "../../components/video-stage-list"; import VideoShowList from "../../components/video-stage-list";
import {ToolsSwitcherController} from "../../components/tools-switcher-controller"; import {ToolsSwitcherController} from "../../components/tools-switcher-controller";
import {roomStore} from "../../stores/room"; 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() { export default function SmallClass() {
const [tool, setTool] = useState(true); 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 ( return (
<div className="room-container"> <div className="room-container">
{/*<VideoMarquee />*/} {/*<VideoMarquee />*/}
<VideoShowList/> <VideoShowList/>
<div className="container"> <div className="container">
<ToolsSwitcherController onClick={() => { {roomStore.state.me.role == 'teacher' ?<ToolsSwitcherController onClick={() => {
setTool(!tool); changeTool();
}}/> }}/> : null}
{tool {currentTool == TOOL_TYPE.WHITEBOARD
? <div>MediaBoard</div> /*<MediaBoard />*/ ? <MediaBoard />
: <CourseWareFrame></CourseWareFrame>} : <CourseWareFrame></CourseWareFrame>}
{ roomStore.state.me.role == 'teacher' ? <Roomboard currentActive={'media'} /> : null} { roomStore.state.me.role == 'teacher' ? <Roomboard currentActive={'media'} /> : null}
</div> </div>
......
import { platform } from './../utils/platform'; import {platform} from './../utils/platform';
import { AgoraElectronClient } from './../utils/agora-electron-client'; import {AgoraElectronClient} from './../utils/agora-electron-client';
import { ChatMessage, AgoraStream } from '../utils/types'; import {AgoraStream, ChatMessage, TOOL_TYPE} from '../utils/types';
import {Subject} from 'rxjs'; import {Subject} from 'rxjs';
import {OrderedMap, List, OrderedSet} from 'immutable'; import {List, OrderedMap, OrderedSet} from 'immutable';
import AgoraRTMClient, { RoomMessage } from '../utils/agora-rtm-client'; import AgoraRTMClient, {RoomMessage} from '../utils/agora-rtm-client';
import {globalStore} from './global'; import {globalStore} from './global';
import AgoraWebClient from '../utils/agora-rtc-client'; import AgoraWebClient from '../utils/agora-rtc-client';
import {get} from 'lodash'; import {get} from 'lodash';
import { isElectron } from '../utils/platform'; import {isElectron} from '../utils/platform';
import GlobalStorage from '../utils/custom-storage'; import GlobalStorage from '../utils/custom-storage';
import { whiteboard } from './whiteboard';
import {STAGE_NUM} from "../utils/consts"; 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}) { function canJoin({uid, onlineStatus, roomType, channelCount, role}: { uid: any, onlineStatus: any, role: string, channelCount: number, roomType: number}) {
const result = { const result = {
...@@ -75,7 +73,8 @@ export interface ClassState { ...@@ -75,7 +73,8 @@ export interface ClassState {
linkId: number // link_uid linkId: number // link_uid
lockBoard: number // lock_board lockBoard: number // lock_board
courseState: number courseState: number
muteChat: number muteChat: number,
currentTool: TOOL_TYPE
} }
type RtcState = { type RtcState = {
...@@ -181,6 +180,7 @@ export class RoomStore { ...@@ -181,6 +180,7 @@ export class RoomStore {
rid: '', rid: '',
roomName: '', roomName: '',
roomType: 0, roomType: 0,
currentTool: TOOL_TYPE.WHITEBOARD
}, },
mediaDevice: { mediaDevice: {
microphoneId: '', microphoneId: '',
...@@ -431,7 +431,25 @@ export class RoomStore { ...@@ -431,7 +431,25 @@ export class RoomStore {
// this.commit(this.state); // 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() { initialize() {
this.subject = new Subject<RoomState>(); this.subject = new Subject<RoomState>();
this.state = { this.state = {
...@@ -999,6 +1017,7 @@ export class RoomStore { ...@@ -999,6 +1017,7 @@ export class RoomStore {
whiteboard_uid: this.state.course.boardId, whiteboard_uid: this.state.course.boardId,
link_uid: this.state.course.linkId, link_uid: this.state.course.linkId,
shared_uid: this.state.course.sharedId, shared_uid: this.state.course.sharedId,
current_tool: this.state.course.currentTool,
}) })
} }
if (attr) { if (attr) {
...@@ -1047,13 +1066,16 @@ export class RoomStore { ...@@ -1047,13 +1066,16 @@ export class RoomStore {
const shared_uid = get(user, 'sharedId', this.state.course.sharedId); const shared_uid = get(user, 'sharedId', this.state.course.sharedId);
const link_uid = get(user, 'linkId', this.state.course.linkId); const link_uid = get(user, 'linkId', this.state.course.linkId);
const lock_board = get(user, 'lockBoard', this.state.course.lockBoard); const lock_board = get(user, 'lockBoard', this.state.course.lockBoard);
const current_tool = get(user, 'currentTool', this.state.course.currentTool);
Object.assign(attrs, { Object.assign(attrs, {
mute_chat, mute_chat,
class_state, class_state,
whiteboard_uid, whiteboard_uid,
link_uid, link_uid,
shared_uid, shared_uid,
lock_board lock_board,
current_tool
}) })
console.log("teacher attrs: >>>> ", attrs); console.log("teacher attrs: >>>> ", attrs);
} }
...@@ -1228,7 +1250,8 @@ export class RoomStore { ...@@ -1228,7 +1250,8 @@ export class RoomStore {
boardId: room.whiteboard_uid, boardId: room.whiteboard_uid,
courseState: room.class_state, courseState: room.class_state,
muteChat: room.mute_chat, muteChat: room.mute_chat,
lockBoard: room.lock_board lockBoard: room.lock_board,
currentTool: room.current_tool
}) })
// console.log("... me", this.state.me); // console.log("... me", this.state.me);
......
import { RoomMessage } from './agora-rtm-client'; import { RoomMessage } from './agora-rtm-client';
import * as _ from 'lodash'; import * as _ from 'lodash';
import OSS from 'ali-oss'; import OSS from 'ali-oss';
import {TOOL_TYPE} from "./types";
export interface OSSConfig { export interface OSSConfig {
accessKeyId: string, accessKeyId: string,
...@@ -240,10 +241,11 @@ export function resolveChannelAttrs(json: object) { ...@@ -240,10 +241,11 @@ export function resolveChannelAttrs(json: object) {
whiteboard_uid: 0, whiteboard_uid: 0,
lock_board: 0, lock_board: 0,
grant_board: 0, grant_board: 0,
current_tool: TOOL_TYPE.WHITEBOARD,
} }
if (teacherJson) { if (teacherJson) {
for (let key of Object.keys(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] !== undefined
&& teacherJson[key] !== '') { && teacherJson[key] !== '') {
room[key] = teacherJson[key]; room[key] = teacherJson[key];
...@@ -289,6 +291,7 @@ export function resolveChannelAttrs(json: object) { ...@@ -289,6 +291,7 @@ export function resolveChannelAttrs(json: object) {
whiteboard_uid: teacherJson.whiteboard_uid, whiteboard_uid: teacherJson.whiteboard_uid,
lock_board: teacherJson.lock_board, lock_board: teacherJson.lock_board,
grant_board: +teacherJson.grant_board, grant_board: +teacherJson.grant_board,
current_tool: +teacherJson.current_tool,
}); });
} }
for (let student of students) { for (let student of students) {
......
...@@ -10,6 +10,11 @@ export enum ClassState { ...@@ -10,6 +10,11 @@ export enum ClassState {
STARTED = 1 STARTED = 1
} }
export enum TOOL_TYPE {
WHITEBOARD = 0,
COURSE_WARE = 1
}
export interface AgoraMediaStream { export interface AgoraMediaStream {
streamID: number streamID: number
local: boolean local: boolean
......
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