Commit bc56e5d1 authored by liujiaxin's avatar liujiaxin

添加iframe和白板功能同步

parent 61292688
......@@ -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,7 +297,9 @@ 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')
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,
......@@ -305,18 +308,21 @@ export function RoomPage({ children }: any) {
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();
}
}
// // 如果当前用户是教师,直接发布,
// 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 />
......
import React, {useLayoutEffect, useMemo, useRef, useState} from 'react';
import React, {useEffect, useLayoutEffect, 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>
......
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);
......
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) {
......
......@@ -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
......
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