...
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. Выход участника из комнаты
...