...
Code Block |
---|
|
import * as Flashphoner from '@flashphoner/websdk/src/flashphoner-core.js';
import * as RoomApi from '@flashphoner/websdk/src/room-module.js';
import * as FPUtils from './fp-utils.js'; |
2. Инициализация API
Flashphoner.init() code
Code Block |
---|
|
componentDidMount() {
try {
Flashphoner.init({});
...
}
catch(e) {
console.log(e);
...
}
} |
3. Установка соединения с сервером, получение события, подтверждающего установку соединения
...
Code Block |
---|
|
createConnection = (url, username) => {
let app = this;
let session = this.state.session;
if (session && session.status() === SESSION_STATUS.ESTABLISHED) {
...
} else {
console.log("Create new RoomApi session with url " + url + ", login " + username);
app.setState({joinButtonDisabled: true, serverUrlDisabled: true});
RoomApi.connect({urlServer: url, username: username}).on(SESSION_STATUS.ESTABLISHED, (session) => {
app.setState({session: session, sessionStatus: SESSION_STATUS.ESTABLISHED, sessionStatusClass: 'text-success'});
app.joinRoom(session);
}).on(SESSION_STATUS.DISCONNECTED, () => {
...
}).on(SESSION_STATUS.FAILED, () => {
...
});
}
} |
34. Вход участника в комнату, получение текущего состояния комнаты
...
Code Block |
---|
|
joinRoom = (session) => {
let app = this;
let roomName = this.getRoomName();
let record = this.state.record;
console.log("Join the room " + roomName + ", record " + record);
session.join({name: roomName, record: record}).on(ROOM_EVENT.STATE, (room) => {
let roomParticipants = room.getParticipants();
let participantsNumber = roomParticipants.length;
console.log("Current number of participants in the room: " + participantsNumber);
if (roomParticipants.length >= maxParticipants) {
console.warn("Current room is full");
app.setState({sessionFailedInfo: "Current room is full"});
room.leave().then(() => {app.onLeft();}, () => {app.onLeft();});
return false;
}
app.setInviteUrl(roomName);
if (participantsNumber > 0) {
let chatState = "participants: ";
for (let i = 0; i < participantsNumber; i++) {
app.installParticipant(roomParticipants[i]);
chatState += roomParticipants[i].name();
if (i < participantsNumber - 1) {
chatState += ",";
}
}
app.addMessage("chat", chatState);
} else {
app.addMessage("chat", " room is empty");
}
...
app.publishLocalMedia(room);
app.onJoined(room);
...
});
} |
45. Публикация потока в комнате
...
Code Block |
---|
|
publishLocalMedia = (room) => {
let app = this;
let constraints = {
audio: true,
video: true
};
let display = document.getElementById("localDisplay");
app.setState({publishButtonDisabled: true});
room.publish({
display: display,
constraints: constraints,
record: false,
receiveVideo: false,
receiveAudio: false
...
});
} |
56, Получение сообщения, подтверждающего публикацию
...
Code Block |
---|
|
publishLocalMedia = (room) => {
...
room.publish({
display: display,
constraints: constraints,
record: false,
receiveVideo: false,
receiveAudio: false
}).on(STREAM_STATUS.FAILED, (stream) => {
...
}).on(STREAM_STATUS.PUBLISHING, (stream) => {
app.setState({publishStatus: STREAM_STATUS.PUBLISHING, publishStatusClass: 'text-success'});
app.onMediaPublished(stream);
}).on(STREAM_STATUS.UNPUBLISHED, (stream) => {
...
});
} |
67. Получение события о присоединении участника к комнате
...
Code Block |
---|
|
joinRoom = (session) => {
let app = this;
let roomName = this.getRoomName();
let record = this.state.record;
console.log("Join the room " + roomName + ", record " + record);
session.join({name: roomName, record: record}).on(ROOM_EVENT.STATE, (room) => {
...
}).on(ROOM_EVENT.JOINED, (participant) => {
app.installParticipant(participant);
app.addMessage(participant.name(), "joined");
}).on(ROOM_EVENT.LEFT, function(participant) {
...
}).on(ROOM_EVENT.PUBLISHED, (participant) => {
...
}).on(ROOM_EVENT.FAILED, (room, info) => {
...
}).on(ROOM_EVENT.MESSAGE, (message) => {
...
});
} |
78. Получение события о публикации потока участником
...
Code Block |
---|
|
joinRoom = (session) => {
let app = this;
let roomName = this.getRoomName();
let record = this.state.record;
console.log("Join the room " + roomName + ", record " + record);
session.join({name: roomName, record: record}).on(ROOM_EVENT.STATE, (room) => {
...
}).on(ROOM_EVENT.JOINED, (participant) => {
...
}).on(ROOM_EVENT.LEFT, function(participant) {
...
}).on(ROOM_EVENT.PUBLISHED, (participant) => {
app.playParticipantsStream(participant);
}).on(ROOM_EVENT.FAILED, (room, info) => {
...
}).on(ROOM_EVENT.MESSAGE, (message) => {
...
});
} |
89. Воспроизведение потока участника, изменение размеров картинки под div элемент
...
Code Block |
---|
|
playStream = (stream, remoteVideo, name) => {
let app = this;
let participantStream = null;
participantStream = stream.play(remoteVideo).on(STREAM_STATUS.PLAYING, (playingStream) => {
let video = document.getElementById(playingStream.id());
if (video) {
video.addEventListener('resize', (event) => {
FPUtils.resizeVideo(event.target);
});
}
});
app.setParticipantStream(name, participantStream);
} |
910. Отправка сообщения участникам
...
Code Block |
---|
|
onSendClick = () => {
let session = this.state.session;
let room = this.state.room;
let message = this.state.message;
if (session && room) {
let participants = room.getParticipants();
this.addMessage(session.username(), message);
for (let i = 0; i < participants.length; i++) {
participants[i].sendMessage(encodeURIComponent(message));
}
this.setState({message: ''});
}
} |
1011. Получение сообщения от другого участника
...
Code Block |
---|
|
joinRoom = (session) => {
let app = this;
let roomName = this.getRoomName();
let record = this.state.record;
console.log("Join the room " + roomName + ", record " + record);
session.join({name: roomName, record: record}).on(ROOM_EVENT.STATE, (room) => {
...
}).on(ROOM_EVENT.JOINED, (participant) => {
...
}).on(ROOM_EVENT.LEFT, function(participant) {
...
}).on(ROOM_EVENT.PUBLISHED, (participant) => {
...
}).on(ROOM_EVENT.FAILED, (room, info) => {
...
}).on(ROOM_EVENT.MESSAGE, (message) => {
if (message.from && message.text) {
app.addMessage(message.from.name(), decodeURIComponent(message.text));
}
});
} |
1112. Получение сообщения о выходе другого участника из комнаты
...
Code Block |
---|
|
joinRoom = (session) => {
let app = this;
let roomName = this.getRoomName();
let record = this.state.record;
console.log("Join the room " + roomName + ", record " + record);
session.join({name: roomName, record: record}).on(ROOM_EVENT.STATE, (room) => {
...
}).on(ROOM_EVENT.JOINED, (participant) => {
...
}).on(ROOM_EVENT.LEFT, function(participant) {
app.removeParticipant(participant);
app.addMessage(participant.name(), "left");
}).on(ROOM_EVENT.PUBLISHED, (participant) => {
...
}).on(ROOM_EVENT.FAILED, (room, info) => {
...
}).on(ROOM_EVENT.MESSAGE, (message) => {
...
});
} |
1213. Остановка публикации потока
...
Code Block |
---|
|
onPublishClick = () => {
let stream = this.state.publishStream;
let room = this.state.room;
if (!room) return;
this.setState({publishButtonDisabled: true});
if (!stream) {
this.publishLocalMedia(room);
} else {
stream.stop();
}
}; |
1314. Выход участника из комнаты
Room.leave() code
Code Block |
---|
|
onJoinClick = () => {
let app = this;
...
let room = this.state.room;
let participants = this.state.participants;
if (!room) {
...
} else {
this.setState({joinButtonDisabled: true}, () => {
participants.forEach((participant) => {
// Stop all the playing participants streams
app.stopParticipantStream(participant.stream);
});
room.leave().then(() => {app.onLeft();}, () => {app.onLeft();});
});
}
}; |