Commit 61292688 authored by liujiaxin's avatar liujiaxin

添加iframe和白板切换按钮

parent 3a2d2dba
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow: hidden; overflow: hidden;
margin-top: 20px; //margin-top: 20px;
.member{ .member{
flex: 33% 0; flex: 33% 0;
height: 40px; height: 40px;
......
...@@ -106,8 +106,8 @@ export const RootProvider: React.FC<any> = ({children}) => { ...@@ -106,8 +106,8 @@ export const RootProvider: React.FC<any> = ({children}) => {
}); });
rtmClient.on("AttributesUpdated", (attributes: object) => { rtmClient.on("AttributesUpdated", (attributes: object) => {
const channelAttrs = resolveChannelAttrs(attributes); const channelAttrs = resolveChannelAttrs(attributes);
console.log('[rtm-client] updated resolved attrs', channelAttrs); // console.log('[rtm-client] updated resolved attrs', channelAttrs);
console.log('[rtm-client] updated origin attributes', attributes); // console.log('[rtm-client] updated origin attributes', attributes);
roomStore.updateRoomAttrs(channelAttrs) roomStore.updateRoomAttrs(channelAttrs)
}); });
rtmClient.on("MemberJoined", (memberId: string) => { rtmClient.on("MemberJoined", (memberId: string) => {
...@@ -166,4 +166,4 @@ export const RootProvider: React.FC<any> = ({children}) => { ...@@ -166,4 +166,4 @@ export const RootProvider: React.FC<any> = ({children}) => {
{children} {children}
</RootContext.Provider> </RootContext.Provider>
) )
} }
\ No newline at end of file
...@@ -131,8 +131,11 @@ export default function useStream () { ...@@ -131,8 +131,11 @@ export default function useStream () {
const teacherUid = course.teacherId; const teacherUid = course.teacherId;
const peerUsers = roomState.rtc.users; const peerUsers = roomState.rtc.users;
// exclude teacher and me // exclude teacher and me
let studentIds = peerUsers.filter((it: number) => it !== +teacherUid && it !== +me.uid && it !== SHARE_ID); let studentIds = peerUsers.filter((it: number) => `${it}` !== `${teacherUid}` && `${it}` !== `${me.uid}` && `${it}` !== `${SHARE_ID}`);
studentIds = studentIds.add(+me.uid); if (me.role != 'teacher') {
studentIds = studentIds.add(+me.uid);
}
const studentStreams: any[] = []; const studentStreams: any[] = [];
const myAttr = userAttrs.get(me.uid); const myAttr = userAttrs.get(me.uid);
...@@ -140,17 +143,19 @@ export default function useStream () { ...@@ -140,17 +143,19 @@ export default function useStream () {
console.log(100000, studentsOrder); console.log(100000, studentsOrder);
console.log(11111111, studentIds.toArray()); console.log(11111111, studentIds.toArray());
studentIds = studentIds.sort(function(a, b){ studentIds = studentIds.sort(function(a, b){
if (studentsOrder.indexOf(+a) < 0) {return 0}
if (studentsOrder.indexOf(+b) < 0) {return 0}
return studentsOrder.indexOf(+a) - studentsOrder.indexOf(+b); return studentsOrder.indexOf(+a) - studentsOrder.indexOf(+b);
}); });
console.log(222222, studentIds.toArray()); console.log(222222, studentIds.toArray());
// when i m student // when i m student
// capture all remote streams // capture all remote streams
for (let studentId of studentIds) { for (let studentId of studentIds) {
if (me.role === 'student' && +me.uid == studentId) { if (me.role === 'student' && +me.uid == studentId) {
if (myAttr && roomState.rtc.localStream) { if (myAttr && roomState.rtc.localStream) {
console.log('use local stream')
const _tmpStream = { const _tmpStream = {
...roomState.rtc.localStream, ...roomState.rtc.localStream,
account: myAttr.account, account: myAttr.account,
...@@ -188,6 +193,7 @@ export default function useStream () { ...@@ -188,6 +193,7 @@ export default function useStream () {
}, [ }, [
course, course,
me.uid, me.uid,
roomStore.state.studentsOrder,
roomState.rtc.users, roomState.rtc.users,
roomState.rtc.remoteStreams, roomState.rtc.remoteStreams,
roomState.rtc.localStream roomState.rtc.localStream
......
...@@ -158,6 +158,7 @@ export function RoomPage({ children }: any) { ...@@ -158,6 +158,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') {
...@@ -209,6 +210,7 @@ export function RoomPage({ children }: any) { ...@@ -209,6 +210,7 @@ export function RoomPage({ children }: any) {
useEffect(() => { useEffect(() => {
if (!roomState.me.uid || !roomState.course.rid) return; if (!roomState.me.uid || !roomState.course.rid) return;
if (classroom) { if (classroom) {
debugger
if (platform === 'web') { if (platform === 'web') {
const webClient = roomStore.rtcClient as AgoraWebClient; const webClient = roomStore.rtcClient as AgoraWebClient;
if (webClient.joined) { if (webClient.joined) {
...@@ -292,7 +294,9 @@ export function RoomPage({ children }: any) { ...@@ -292,7 +294,9 @@ export function RoomPage({ children }: any) {
console.info(`[agora-web] stream: ${uid} fallback: ${msg}`); console.info(`[agora-web] stream: ${uid} fallback: ${msg}`);
}) })
rtc.current = true; 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 // 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 webClient
.joinChannel({ .joinChannel({
uid: +roomState.me.uid, uid: +roomState.me.uid,
...@@ -300,11 +304,21 @@ export function RoomPage({ children }: any) { ...@@ -300,11 +304,21 @@ export function RoomPage({ children }: any) {
token: '', token: '',
dual: isSmallClass dual: isSmallClass
}).then(() => { }).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();
}
}
}).catch(console.warn).finally(() => { }).catch(console.warn).finally(() => {
rtc.current = false; rtc.current = false;
}); });
return () => { return () => {
console.log('exit')
const events = [ const events = [
'onTokenPrivilegeWillExpire', 'onTokenPrivilegeWillExpire',
'onTokenPrivilegeDidExpire', 'onTokenPrivilegeDidExpire',
......
...@@ -6,6 +6,7 @@ import './small-class.scss'; ...@@ -6,6 +6,7 @@ import './small-class.scss';
import CourseWareFrame from "../../components/courseware-frame"; 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";
export default function SmallClass() { export default function SmallClass() {
const [tool, setTool] = useState(true); const [tool, setTool] = useState(true);
...@@ -18,8 +19,11 @@ export default function SmallClass() { ...@@ -18,8 +19,11 @@ export default function SmallClass() {
<ToolsSwitcherController onClick={() => { <ToolsSwitcherController onClick={() => {
setTool(!tool); setTool(!tool);
}}/> }}/>
{tool ? <MediaBoard /> : <CourseWareFrame></CourseWareFrame>}
<Roomboard currentActive={'media'} /> {tool
? <div>MediaBoard</div> /*<MediaBoard />*/
: <CourseWareFrame></CourseWareFrame>}
{ roomStore.state.me.role == 'teacher' ? <Roomboard currentActive={'media'} /> : null}
</div> </div>
</div> </div>
) )
......
...@@ -131,8 +131,8 @@ function HomePage() { ...@@ -131,8 +131,8 @@ function HomePage() {
<div className="web-menu"> <div className="web-menu">
<div className="web-menu-container"> <div className="web-menu-container">
<div className="short-title"> <div className="short-title">
<span className="title">Agora Education</span> <span className="title">iTeachABC 直播教室</span>
<span className="subtitle">Powered by agora.io</span> <span className="subtitle">Powered by iplayabc.com</span>
</div> </div>
<Icon className="icon-setting" onClick={handleSetting}/> <Icon className="icon-setting" onClick={handleSetting}/>
</div> </div>
......
This diff is collapsed.
...@@ -286,6 +286,7 @@ export class AgoraElectronClient { ...@@ -286,6 +286,7 @@ export class AgoraElectronClient {
} }
exit () { exit () {
console.log('exit')
this.leave(); this.leave();
this.destroyClient(); this.destroyClient();
} }
...@@ -303,4 +304,4 @@ export class AgoraElectronClient { ...@@ -303,4 +304,4 @@ export class AgoraElectronClient {
} }
} }
export const nativeRTCClient = new AgoraElectronClient(); export const nativeRTCClient = new AgoraElectronClient();
\ No newline at end of file
...@@ -337,9 +337,16 @@ export default class AgoraWebClient { ...@@ -337,9 +337,16 @@ export default class AgoraWebClient {
await this.rtc.createClient(APP_ID, true); await this.rtc.createClient(APP_ID, true);
await this.rtc.join(this.localUid, channel, token); await this.rtc.join(this.localUid, channel, token);
dual && await this.rtc.enableDualStream(); dual && await this.rtc.enableDualStream();
// 改成手动发布
// roomStore.setRTCJoined(true);
this.joined = true; this.joined = true;
roomStore.setRTCJoined(true);
} }
// async publishStream() {
// if (this.joined) {
// return roomStore.setRTCJoined(true);
// }
// }
async leaveChannel() { console.log('unpublish leaveChannel' , 3); async leaveChannel() { console.log('unpublish leaveChannel' , 3);
this.localUid = 0; this.localUid = 0;
......
...@@ -55,7 +55,11 @@ export default class AgoraRTMClient { ...@@ -55,7 +55,11 @@ export default class AgoraRTMClient {
this._client = AgoraRTM.createInstance(APP_ID, { enableLogUpload: false, logFilter }); this._client = AgoraRTM.createInstance(APP_ID, { enableLogUpload: false, logFilter });
} }
async addOrUpdateChannelAttributes(data: any, enableNotificationToChannelMembers = true): Promise<string> { async addOrUpdateChannelAttributes(data: any, enableNotificationToChannelMembers = true): Promise<string> {
return await this._client.addOrUpdateChannelAttributes(this._currentChannelName, data, {enableNotificationToChannelMembers}); const channelAttributes: {[key: string]: string} = {};
for (const k of Object.keys(data)) {
channelAttributes[k] = typeof(data[k]) != 'string' ? JSON.stringify(data[k]) : data[k];
}
return await this._client.addOrUpdateChannelAttributes(this._currentChannelName, channelAttributes, {enableNotificationToChannelMembers});
} }
public removeAllListeners(): any { public removeAllListeners(): any {
...@@ -95,6 +99,10 @@ export default class AgoraRTMClient { ...@@ -95,6 +99,10 @@ export default class AgoraRTMClient {
return return
} }
async clearChannelAttributes() {
await this._client.clearChannelAttributes(this._currentChannelName);
}
async logout () { async logout () {
if (!this._logged) return; if (!this._logged) return;
await this.leave(this._currentChannelName); await this.leave(this._currentChannelName);
...@@ -160,7 +168,7 @@ export default class AgoraRTMClient { ...@@ -160,7 +168,7 @@ export default class AgoraRTMClient {
async setChannelAttrsKey(key: any) { async setChannelAttrsKey(key: any) {
this._channelAttrsKey = `${key}`; this._channelAttrsKey = `${key}`;
} }
async updateChannelAttrsByKey (data: {[key: string]: string}/*key: string, attrs: any*/) { async updateChannelAttrsByKey____ (data: {[key: string]: string}/*key: string, attrs: any*/) {
// this._channelAttrsKey = key; // this._channelAttrsKey = key;
const channelAttributes: {[key: string]: string} = {}; const channelAttributes: {[key: string]: string} = {};
for (const k of Object.keys(data)) { for (const k of Object.keys(data)) {
...@@ -169,7 +177,7 @@ export default class AgoraRTMClient { ...@@ -169,7 +177,7 @@ export default class AgoraRTMClient {
// if (key) { // if (key) {
// channelAttributes[key] = JSON.stringify(attrs); // channelAttributes[key] = JSON.stringify(attrs);
// } // }
console.log("[rtm-client] updateChannelAttrsByKey ", data); console.log("[rtm-client] addOrUpdateChannelAttributes ", channelAttributes);
// console.log("[rtm-client] updateChannelAttrsByKey ", attrs, " key ", key, channelAttributes); // console.log("[rtm-client] updateChannelAttrsByKey ", attrs, " key ", key, channelAttributes);
await this._client.addOrUpdateChannelAttributes( await this._client.addOrUpdateChannelAttributes(
this._currentChannelName, this._currentChannelName,
...@@ -177,7 +185,7 @@ export default class AgoraRTMClient { ...@@ -177,7 +185,7 @@ export default class AgoraRTMClient {
{enableNotificationToChannelMembers: true}); {enableNotificationToChannelMembers: true});
} }
async ___updateChannelAttrsByKey (key: string, attrs: any) { async updateChannelAttrsByKey (key: string, attrs: any) {
this._channelAttrsKey = key; this._channelAttrsKey = key;
const channelAttributes: {[key: string]: string} = {} const channelAttributes: {[key: string]: string} = {}
if (key) { if (key) {
...@@ -236,16 +244,17 @@ export default class AgoraRTMClient { ...@@ -236,16 +244,17 @@ export default class AgoraRTMClient {
async getChannelAttributeBy(channelName: string) { async getChannelAttributeBy(channelName: string) {
let json = await this._client.getChannelAttributes(channelName); let json = await this._client.getChannelAttributes(channelName);
const accounts = []; const accounts = [];
const data:any = {};
for (let key of Object.keys(json)) { for (let key of Object.keys(json)) {
if (key === 'teacher') { // if (key === 'teacher') {
const teacherObj = jsonParse(_.get(json, `${key}.value`)); // const teacherObj = jsonParse(_.get(json, `${key}.value`));
console.log("teacherObj ", teacherObj); // console.log("teacherObj ", teacherObj);
// when teacher is not empty object // // when teacher is not empty object
if(teacherObj && Object.keys(teacherObj).length) { // if(teacherObj && Object.keys(teacherObj).length) {
accounts.push({role: 'teacher', ...teacherObj}); // accounts.push({role: 'teacher', ...teacherObj});
} // }
continue; // continue;
} // }
// if (key === 'studentsOrder') { // if (key === 'studentsOrder') {
// continue // continue
// } // }
...@@ -256,9 +265,12 @@ export default class AgoraRTMClient { ...@@ -256,9 +265,12 @@ export default class AgoraRTMClient {
student.uid = key; student.uid = key;
accounts.push(student); accounts.push(student);
} }
} else {
data[key] = jsonParse(_.get(json, `${key}.value`))
} }
} }
return accounts; data.accounts = accounts;
return data;
} }
async sendPeerMessage(peerId: string, body: MessageBody) { async sendPeerMessage(peerId: string, body: MessageBody) {
......
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