...
Code Block | ||||
---|---|---|---|---|
| ||||
const createDefaultMeetingModel = function (meetingView, participantFactory, displayOptions, abrFactory) { return { ... setMeetingName: function (id) { this.meetingName = id; meetingView.setMeetingName(id); } } } |
5.
...
Meeting room streams view object creation
createDefaultMeetingView() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createDefaultMeetingView = function (entryPoint) { ... } |
5.1.
...
HTML5
...
tags initializing
createDefaultMeetingView() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createDefaultMeetingView = function (entryPoint) { const rootDiv = document.createElement("div"); rootDiv.setAttribute("class", "grid-item"); entryPoint.appendChild(rootDiv); const title = document.createElement("label"); title.setAttribute("style", "display:block; border: solid; border-width: 1px"); rootDiv.appendChild(title); return { ... } } |
5.2.
...
Participants views initializing
participantViews() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createDefaultMeetingView = function (entryPoint) { ... return { participantViews: new Map(), ... } } |
5.3.
...
Set meeting room name to display
setMeetingName() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createDefaultMeetingView = function (entryPoint) { ... return { ... setMeetingName: function (id) { title.innerText = "Meeting: " + id; }, ... } } |
5.4.
...
Adding participant displaying tags
addParticipant() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createDefaultMeetingView = function (entryPoint) { ... return { ... addParticipant: function (userId, participantName, cell) { const participantDiv = createContainer(rootDiv); participantDiv.appendChild(cell); this.participantViews.set(userId, participantDiv); }, ... } } |
5.5.
...
Removing participant displaying tags
removeParticipant() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createDefaultMeetingView = function (entryPoint) { ... return { ... removeParticipant: function (userId) { const cell = this.participantViews.get(userId); if (cell) { this.participantViews.delete(userId); cell.remove(); } }, ... } } |
5.5.
...
Removing root div tag
end() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createDefaultMeetingView = function (entryPoint) { ... return { ... end: function () { rootDiv.remove(); } } } |
6.
...
Participants objects factory creation
createParticipantFactory() code
Здесь содаются объекты модели, управления и отображения участника комнатыHere a participant model, view and controller objects are created for the certain participant
Code Block | ||||
---|---|---|---|---|
| ||||
const createParticipantFactory = function (remoteTrackFactory, createParticipantView, createParticipantModel) { return { displayOptions: null, abrFactory: null, createParticipant: function (userId, nickname) { const view = createParticipantView(); const model = createParticipantModel(userId, nickname, view, remoteTrackFactory, this.abrFactory, this.displayOptions); const controller = createParticipantController(model); return [model, view, controller]; } } } |
7.
...
Participant controller object creation
createParticipantController() codeОбъект вызывает соответствующие методы модели участника
The object calls an appropriate participant model methods
Code Block | ||||
---|---|---|---|---|
| ||||
const createParticipantController = function (model) { return { addVideoTrack: function (track) { model.addVideoTrack(track); }, removeVideoTrack: function (track) { model.removeVideoTrack(track); }, addAudioTrack: function (track) { model.addAudioTrack(track); }, removeAudioTrack: function (track) { model.removeAudioTrack(track); }, updateQualityInfo: function (qualityInfo) { model.updateQualityInfo(qualityInfo); }, setNickname: function (nickname) { model.setNickname(nickname); }, dispose: function () { model.dispose(); } } } |
8.
...
Participant model object creation for one-to-one meeting room
createOneToOneParticipantModel() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { userId: userId, nickname: nickname, remoteVideoTracks: new Map(), remoteAudioTracks: new Map(), audioTracks: new Map(), videoTracks: new Map(), abrManagers: new Map(), disposed: false, dispose: async function () { ... }, addVideoTrack: function (track) { ... }, removeVideoTrack: function (track) { ... }, addAudioTrack: function (track) { ... }, removeAudioTrack: function (track) { ... }, setUserId: function (userId) { ... }, setNickname: function (nickname) { ... }, updateQualityInfo: function (remoteTracks) { ... }, requestVideoTrack: async function (track, remoteTrack) { ... }, pickQuality: async function (track, qualityName) { ... }, muteVideo: async function (track) { ... }, unmuteVideo: async function (track) { ... } }; instance.setUserId(userId); instance.setNickname(nickname); return instance; } |
8.1.
...
Adding video track to display
addVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... addVideoTrack: function (track) { this.videoTracks.set(track.mid, track); if (!track.quality) { track.quality = []; } participantView.addVideoTrack(track); const self = this; remoteTrackFactory.getVideoTrack().then((remoteTrack) => { if (remoteTrack) { if (self.disposed || !self.videoTracks.get(track.mid)) { remoteTrack.dispose(); return; } participantView.addVideoSource(remoteTrack.track, track, () => { const abrManager = self.abrManagers.get(track.id); if (!abrManager) { return; } if (abrManager.isAuto()) { abrManager.resume(); } }, (mute) => { if (mute) { return self.muteVideo(track); } else { return self.unmuteVideo(track); } }); self.requestVideoTrack(track, remoteTrack).then(() => { participantView.showVideoTrack(track); }, (ex) => { participantView.removeVideoSource(track); remoteTrack.dispose(); }); } }, (ex) => { console.log("Failed to get remote track " + ex); }); }, ... }; ... return instance; } |
8.2.
...
Removing video track displayed
removeVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... removeVideoTrack: function (track) { if (this.videoTracks.delete(track.mid)) { const remoteTrack = this.remoteVideoTracks.get(track.mid); if (remoteTrack) { this.remoteVideoTracks.delete(track.mid); remoteTrack.dispose(); } participantView.removeVideoTrack(track); const abrManager = this.abrManagers.get(track.id); if (abrManager) { this.abrManagers.delete(track.id); abrManager.clearQualityState(); abrManager.stop(); } } }, ... }; ... return instance; } |
8.3.
...
Adding audio track to display
addAudioTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... addAudioTrack: function (track) { this.audioTracks.set(track.mid, track); const self = this; remoteTrackFactory.getAudioTrack().then((remoteTrack) => { if (remoteTrack) { if (self.disposed || !self.audioTracks.get(track.mid)) { remoteTrack.dispose(); return; } this.remoteAudioTracks.set(track.mid, remoteTrack); remoteTrack.demandTrack(track.id).then(() => { if (!self.audioTracks.get(track.mid)) { remoteTrack.dispose(); self.remoteAudioTracks.delete(track.mid); return; } participantView.addAudioTrack(track, remoteTrack.track, displayOptions.showAudio); }, (ex) => { console.log("Failed demand track " + ex); remoteTrack.dispose(); self.remoteAudioTracks.delete(track.mid); }); } }, (ex) => { console.log("Failed to get audio track " + ex); }); }, ... }; ... return instance; } |
8.4.
...
Removing audio track displayed
removeAudioTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... removeAudioTrack: function (track) { if (!this.audioTracks.delete(track.mid)) { return } participantView.removeAudioTrack(track); const remoteTrack = this.remoteAudioTracks.get(track.mid); if (remoteTrack) { this.remoteAudioTracks.delete(track.mid); remoteTrack.dispose(); } }, ... }; ... return instance; } |
8.5.
...
Request video track to display
requestVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... requestVideoTrack: async function (track, remoteTrack) { return new Promise((resolve, reject) => { if (!remoteTrack || !track) { reject(new Error("Remote and local track must be defined")); return; } const self = this; remoteTrack.demandTrack(track.id).then(() => { if (!self.videoTracks.get(track.mid)) { reject(new Error("Video track already removed from model")); return; } let abrManager = self.abrManagers.get(track.id); if (abrManager) { abrManager.clearQualityState(); } else if (abrFactory) { abrManager = abrFactory.createAbrManager(); self.abrManagers.set(track.id, abrManager); } if (abrManager) { abrManager.setTrack(remoteTrack); abrManager.stop(); if (track.quality.length > 0) { participantView.addQuality(track, "Auto", true, async () => { const manager = self.abrManagers.get(track.id); if (!manager) { return; } manager.start(); manager.setAuto(); participantView.pickQuality(track, "Auto"); }); if (displayOptions.autoAbr) { abrManager.setAuto(); abrManager.start(); participantView.pickQuality(track, "Auto"); } } } for (const qualityDescriptor of track.quality) { if (abrManager) { abrManager.addQuality(qualityDescriptor.quality); abrManager.setQualityAvailable(qualityDescriptor.quality, qualityDescriptor.available); } if (displayOptions.quality) { participantView.addQuality(track, qualityDescriptor.quality, qualityDescriptor.available, async () => { const manager = self.abrManagers.get(track.id); if (manager) { manager.setManual(); manager.setQuality(qualityDescriptor.quality); } return self.pickQuality(track, qualityDescriptor.quality); }); } } self.remoteVideoTracks.delete(track.mid); self.remoteVideoTracks.set(track.mid, remoteTrack); resolve(); }, (ex) => { reject(ex); }); }); }, ... }; ... return instance; } |
8.6.
...
Update available track qualities info
updateQualityInfo() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... updateQualityInfo: function (remoteTracks) { for (const remoteTrackQuality of remoteTracks) { const track = this.videoTracks.get(remoteTrackQuality.mid); if (!track) { continue; } if (!this.remoteVideoTracks.get(track.mid)) { // update model and return, view not changed for (const remoteQualityInfo of remoteTrackQuality.quality) { const quality = track.quality.find((q) => q.quality === remoteQualityInfo.quality); if (quality) { quality.available = remoteQualityInfo.available; } else { track.quality.push(remoteQualityInfo); } } return; } let abrManager = this.abrManagers.get(track.id); if (abrManager && track.quality.length === 0 && remoteTrackQuality.quality.length > 0) { const self = this; participantView.addQuality(track, "Auto", true, async () => { const manager = self.abrManagers.get(track.id); if (!manager) { return; } manager.start(); manager.setAuto(); participantView.pickQuality(track, "Auto"); }) if (displayOptions.autoAbr) { abrManager.setAuto(); abrManager.start(); participantView.pickQuality(track, "Auto"); } } for (const remoteQualityInfo of remoteTrackQuality.quality) { const localQuality = track.quality.find((q) => q.quality === remoteQualityInfo.quality); if (localQuality) { localQuality.available = remoteQualityInfo.available; if (abrManager) { abrManager.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available); } if (displayOptions.quality) { participantView.updateQuality(track, localQuality.quality, localQuality.available); } } else { track.quality.push(remoteQualityInfo); if (abrManager) { abrManager.addQuality(remoteQualityInfo.quality); abrManager.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available) } if (displayOptions.quality) { const self = this; participantView.addQuality(track, remoteQualityInfo.quality, remoteQualityInfo.available, async () => { const manager = self.abrManagers.get(track.id); if (manager) { manager.setManual(); manager.setQuality(remoteQualityInfo.quality); } return self.pickQuality(track, remoteQualityInfo.quality); }); } } } } }, ... }; ... return instance; } |
8.7.
...
Pick a quaility to play
pickQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... pickQuality: async function (track, qualityName) { let remoteVideoTrack = this.remoteVideoTracks.get(track.mid); if (remoteVideoTrack) { return remoteVideoTrack.setPreferredQuality(qualityName).then(() => { participantView.pickQuality(track, qualityName); }); } }, ... }; ... return instance; } |
8.8.
...
Mute participant video
muteVideo() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... muteVideo: async function (track) { const remoteTrack = this.remoteVideoTracks.get(track.mid); if (remoteTrack) { return remoteTrack.mute(); } else { return new Promise((resolve, reject) => { reject(new Error("Remote track not defined")); }); } }, ... }; ... return instance; } |
8.9.
...
Unmute participant video
unmuteVideo() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... unmuteVideo: async function (track) { const remoteTrack = this.remoteVideoTracks.get(track.mid); if (remoteTrack) { return remoteTrack.unmute(); } else { return new Promise((resolve, reject) => { reject(new Error("Remote track not defined")); }); } } }; ... return instance; } |
8.10.
...
Dispose the object
dispose() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... dispose: async function () { this.disposed = true; participantView.dispose(); this.remoteVideoTracks.forEach((track, id) => { track.dispose(); }) this.remoteVideoTracks.clear(); this.remoteAudioTracks.forEach((track, id) => { track.dispose(); }) this.remoteAudioTracks.clear(); this.abrManagers.forEach((abrManager, id) => { abrManager.stop(); }) this.abrManagers.clear(); }, }; ... return instance; } |
9.
...
Participant model object creation for one-to-many meeting room
createOneToManyParticipantModel() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { userId: userId, nickname: nickname, videoEnabled: false, currentTrack: null, remoteVideoTrack: null, remoteAudioTracks: new Map(), audioTracks: new Map(), videoTracks: new Map(), abr: null, disposed: false, dispose: async function () { ... }, addVideoTrack: function (track) { ... }, removeVideoTrack: function (track) { ... }, addAudioTrack: function (track) { ... }, removeAudioTrack: function (track) { ... }, setUserId: function (userId) { ... }, setNickname: function (nickname) { ... }, updateQualityInfo: function (remoteTracks) { ... }, requestVideoTrack: async function (track, remoteTrack) { ... }, pickQuality: async function (track, qualityName) { ... }, muteVideo: async function (track) { ... }, unmuteVideo: async function (track) { ... } }; instance.setUserId(userId); instance.setNickname(nickname); if (abrFactory) { instance.abr = abrFactory.createAbrManager(); } return instance; } |
9.1.
...
Adding video track to display
addVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { ... addVideoTrack: function (track) { this.videoTracks.set(track.mid, track); if (!track.quality) { track.quality = []; } const self = this; participantView.addVideoTrack(track, () => { if (self.disposed) { return new Promise((resolve, reject) => { reject(new Error("Model disposed")); }); } if (self.remoteVideoTrack) { return new Promise((resolve, reject) => { self.requestVideoTrack(track, self.remoteVideoTrack).then(() => { resolve(); }, (ex) => { reject(ex); }); }); } else { return new Promise((resolve, reject) => { reject(new Error("Remote track is null")); requestTrackAndPick(self, track); }); } }); requestTrackAndPick(this, track); }, ... }; ... return instance; } |
9.2.
...
Removing video track displaying
removeVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { ... removeVideoTrack: function (track) { this.videoTracks.delete(track.mid); participantView.removeVideoTrack(track); if (this.currentTrack && this.currentTrack.mid === track.mid) { repickTrack(this, track); } }, ... }; ... return instance; } |
9.3.
...
Adding audio track to display
addAudioTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { ... addAudioTrack: async function (track) { this.audioTracks.set(track.mid, track); const self = this; remoteTrackFactory.getAudioTrack().then((remoteTrack) => { if (!remoteTrack) { return; } if (self.disposed || !self.audioTracks.get(track.mid)) { remoteTrack.dispose(); return; } this.remoteAudioTracks.set(track.mid, remoteTrack); remoteTrack.demandTrack(track.id).then(() => { if (!self.audioTracks.get(track.mid)) { remoteTrack.dispose(); self.remoteAudioTracks.delete(track.mid); return; } participantView.addAudioTrack(track, remoteTrack.track, displayOptions.showAudio); }, (ex) => { console.log("Failed demand track " + ex); remoteTrack.dispose(); self.remoteAudioTracks.delete(track.mid); }); }, (ex) => { console.log("Failed to get audio track " + ex); }); }, ... }; ... return instance; } |
9.4.
...
Remove audio track displayed
removeAudioTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { ... removeAudioTrack: function (track) { if (!this.audioTracks.delete(track.mid)) { return } participantView.removeAudioTrack(track); const remoteTrack = this.remoteAudioTracks.get(track.mid); if (remoteTrack) { this.remoteAudioTracks.delete(track.mid); remoteTrack.dispose(); } }, ... }; ... return instance; } |
9.5.
...
Request video track to display
requestVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { ... requestVideoTrack: async function (track, remoteTrack) { return new Promise((resolve, reject) => { if (!remoteTrack || !track) { reject(new Error("Remote and local track must be defined")); return; } const self = this; remoteTrack.demandTrack(track.id).then(() => { // channels reordering case, must be removed after channels unification if (!self.videoTracks.get(track.mid)) { reject(new Error("Video track already removed from model")); return; } self.currentTrack = track; participantView.clearQualityState(track); if (self.abr) { self.abr.stop(); self.abr.clearQualityState(); self.abr.setTrack(remoteTrack); if (track.quality.length > 0) { participantView.addQuality(track, "Auto", true, async () => { if (!self.abr) { return; } self.abr.start(); self.abr.setAuto(); participantView.pickQuality(track, "Auto"); }) } if (displayOptions.autoAbr) { self.abr.setAuto(); self.abr.start(); participantView.pickQuality(track, "Auto"); } } for (const qualityDescriptor of track.quality) { if (self.abr) { self.abr.addQuality(qualityDescriptor.quality); self.abr.setQualityAvailable(qualityDescriptor.quality, qualityDescriptor.available); } if (displayOptions.quality) { participantView.addQuality(track, qualityDescriptor.quality, qualityDescriptor.available, async () => { if (self.abr) { self.abr.setManual(); self.abr.setQuality(qualityDescriptor.quality); } return self.pickQuality(track, qualityDescriptor.quality); }); } } resolve(); }, (ex) => reject(ex)); }); }, ... }; ... return instance; } |
9.6.
...
Update available track quailties info
updateQualityInfo() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { ... updateQualityInfo: function (remoteTracks) { for (const remoteTrackQuality of remoteTracks) { const track = this.videoTracks.get(remoteTrackQuality.mid); if (!track) { continue; } if (!this.currentTrack || this.currentTrack.mid !== track.mid) { // update model and return, view not changed for (const remoteQualityInfo of remoteTrackQuality.quality) { const quality = track.quality.find((q) => q.quality === remoteQualityInfo.quality); if (quality) { quality.available = remoteQualityInfo.available; } else { track.quality.push(remoteQualityInfo); } } return; } if (this.abr && track.quality.length === 0 && remoteTrackQuality.quality.length > 0) { const self = this; participantView.addQuality(track, "Auto", true, async () => { if (!self.abr) { return; } self.abr.start(); self.abr.setAuto(); participantView.pickQuality(track, "Auto"); }) if (displayOptions.autoAbr && this.abr) { this.abr.setAuto(); this.abr.start(); participantView.pickQuality(track, "Auto"); } } for (const remoteQualityInfo of remoteTrackQuality.quality) { const localQuality = track.quality.find((q) => q.quality === remoteQualityInfo.quality); if (localQuality) { localQuality.available = remoteQualityInfo.available; if (this.abr) { this.abr.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available) } if (displayOptions.quality) { participantView.updateQuality(track, localQuality.quality, localQuality.available); } } else { track.quality.push(remoteQualityInfo); if (this.abr) { this.abr.addQuality(remoteQualityInfo.quality); this.abr.setQualityAvailable(remoteQualityInfo.quality, remoteQualityInfo.available) } if (displayOptions.quality) { const self = this; participantView.addQuality(track, remoteQualityInfo.quality, remoteQualityInfo.available, async () => { if (self.abr) { self.abr.setManual(); self.abr.setQuality(remoteQualityInfo.quality); } return self.pickQuality(track, remoteQualityInfo.quality); }); } } } } }, ... }; ... return instance; } |
9.7.
...
Pick quality to display
pickQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { ... pickQuality: async function (track, qualityName) { if (this.remoteVideoTrack) { return this.remoteVideoTrack.setPreferredQuality(qualityName).then(() => participantView.pickQuality(track, qualityName)); } }, ... }; ... return instance; } |
9.8.
...
Mute participant video
muteVideo() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { ... muteVideo: async function (track) { if (this.remoteVideoTrack) { return this.remoteVideoTrack.mute(); } else { return new Promise((resolve, reject) => { reject(new Error("Remote track not defined")); }); } }, ... }; ... return instance; } |
9.9.
...
Unmute participant video
unmuteVideo() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { ... const instance = { ... unmuteVideo: async function (track) { if (this.remoteVideoTrack) { return this.remoteVideoTrack.unmute(); } else { return new Promise((resolve, reject) => { reject(new Error("Remote track not defined")); }); } } }; ... return instance; } |
9.10.
...
Dispose the object
dispose() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantModel = function (userId, nickname, participantView, remoteTrackFactory, abrFactory, displayOptions) { const instance = { ... dispose: async function () { this.disposed = true; participantView.dispose(); this.remoteVideoTracks.forEach((track, id) => { track.dispose(); }) this.remoteVideoTracks.clear(); this.remoteAudioTracks.forEach((track, id) => { track.dispose(); }) this.remoteAudioTracks.clear(); this.abrManagers.forEach((abrManager, id) => { abrManager.stop(); }) this.abrManagers.clear(); }, }; ... return instance; } |
10.
...
Participant view object creation for one-to-one meeting room
createOneToOneParticipantView() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { const participantDiv = createContainer(null); const audioDisplay = createContainer(participantDiv); const participantNicknameDisplay = createInfoDisplay(participantDiv, "Name: ") const videoPlayers = new Map(); const audioElements = new Map(); return { rootDiv: participantDiv, dispose: function () { ... }, addVideoTrack: function (track) { ... }, removeVideoTrack: function (track) { ... }, addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler) { ... }, removeVideoSource: function (track) { ... }, showVideoTrack: function (track) { ... }, addAudioTrack: function (track, audioTrack, show) { ... }, removeAudioTrack: function (track) { ... }, setNickname: function (userId, nickname) { ... }, updateQuality: function (track, qualityName, available) { ... }, addQuality: function (track, qualityName, available, onQualityPick) { ... }, pickQuality: function (track, qualityName) { ... } } } |
10.1.
...
Adding video track to play
addVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... addVideoTrack: function (track) { const player = createVideoPlayer(participantDiv); videoPlayers.set(track.mid, player); }, ... } } |
10.2.
...
Removing video track playing
removeVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... removeVideoTrack: function (track) { const player = videoPlayers.get(track.mid); if (player) { player.dispose(); } }, ... } } |
10.3.
...
Adding media source to video tag
addVideoSource() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler) { const player = videoPlayers.get(track.mid); if (player) { player.setVideoSource(remoteVideoTrack, onResize, muteHandler); } }, ... } } |
10.4.
...
Removing media source from video tag
removeVideoSource() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... removeVideoSource: function (track) { const player = videoPlayers.get(track.mid); if (player) { player.removeVideoSource(); } }, ... } } |
10.5.
...
Show video track
showVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... showVideoTrack: function (track) { const player = videoPlayers.get(track.mid); if (player) { player.showVideoTrack(track); } }, ... } } |
10.6.
...
Adding audio track
addAudioTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... addAudioTrack: function (track, audioTrack, show) { const stream = new MediaStream(); stream.addTrack(audioTrack); const audioElement = document.createElement("audio"); if (!show) { hideItem(audioElement); } audioElement.controls = "controls"; audioElement.muted = true; audioElement.autoplay = true; audioElement.onloadedmetadata = function (e) { audioElement.play().then(function () { if (Browser().isSafariWebRTC() && Browser().isiOS()) { console.warn("Audio track should be manually unmuted in iOS Safari"); } else { audioElement.muted = false; } }); }; audioElements.set(track.mid, audioElement); audioDisplay.appendChild(audioElement); audioElement.srcObject = stream; }, ... } } |
10.7.
...
Removing audio track
removeAudioTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... removeAudioTrack: function (track) { const audioElement = audioElements.get(track.mid); if (audioElement) { audioElement.remove(); audioElements.delete(track.mid); } }, ... } } |
10.8.
...
Set participant nickname to display
setNickname() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... setNickname: function (userId, nickname) { const additionalUserId = userId ? "#" + getShortUserId(userId) : ""; participantNicknameDisplay.innerText = "Name: " + nickname + additionalUserId; }, ... } } |
10.9.
...
Update track quality info
updateQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... updateQuality: function (track, qualityName, available) { const player = videoPlayers.get(track.mid); if (player) { player.updateQuality(qualityName, available); } }, ... } } |
10.10.
...
Add track quality info
addQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... addQuality: function (track, qualityName, available, onQualityPick) { const player = videoPlayers.get(track.mid); if (player) { player.addQuality(qualityName, available, onQualityPick); } }, ... } } |
10.11.
...
Pick a quality to display
pickQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... pickQuality: function (track, qualityName) { const player = videoPlayers.get(track.mid); if (player) { player.pickQuality(qualityName); } } ... } } |
10.12.
...
Dispose the object
dispose() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToOneParticipantView = function () { ... return { ... dispose: function () { for (const player of videoPlayers.values()) { player.dispose(); } videoPlayers.clear(); for (const element of audioElements.values()) { element.remove(); } audioElements.clear(); }, ... } } |
11.
...
Participant view object creation for one-to-many meeting room
createOneToManyParticipantView() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { const participantDiv = createContainer(null); const audioDisplay = createContainer(participantDiv); const participantNicknameDisplay = createInfoDisplay(participantDiv, "Name: ") const audioElements = new Map(); const player = createVideoPlayer(participantDiv); return { rootDiv: participantDiv, currentTrack: null, dispose: function () { ... }, addVideoTrack: function (track) { ... }, removeVideoTrack: function (track) { ... }, addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler) { ... }, removeVideoSource: function (track) { ... }, showVideoTrack: function (track) { ... }, addAudioTrack: function (track, audioTrack, show) { ... }, removeAudioTrack: function (track) { ... }, setNickname: function (userId, nickname) { ... }, updateQuality: function (track, qualityName, available) { ... }, addQuality: function (track, qualityName, available, onQualityPick) { ... }, clearQualityState: function (track) { ... }, pickQuality: function (track, qualityName) { ... } } } |
11.1.
...
Adding video track to play
addVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... addVideoTrack: function (track, requestVideoTrack) { player.addVideoTrack(track, async () => { return requestVideoTrack(); }); }, ... } } |
11.2.
...
Removing video track playing
removeVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... removeVideoTrack: function (track) { player.removeVideoTrack(track); }, ... } } |
11.3.
...
Adding media source to video tag
addVideoSource() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... addVideoSource: function (remoteVideoTrack, track, onResize, muteHandler) { this.currentTrack = track; player.setVideoSource(remoteVideoTrack, onResize, muteHandler); }, ... } } |
11.4.
...
Removing media source from video tag
removeVideoSource() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... removeVideoSource: function (track) { if (this.currentTrack && this.currentTrack.mid === track.mid) { player.removeVideoSource(); } }, ... } } |
11.5.
...
Show video track
showVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... showVideoTrack: function (track) { player.showVideoTrack(track); }, ... } } |
11.6.
...
Adding audio track
addAudioTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... addAudioTrack: function (track, audioTrack, show) { const stream = new MediaStream(); stream.addTrack(audioTrack); const audioElement = document.createElement("audio"); if (!show) { hideItem(audioElement); } audioElement.controls = "controls"; audioElement.muted = true; audioElement.autoplay = true; audioElement.onloadedmetadata = function (e) { audioElement.play().then(function () { if (Browser().isSafariWebRTC() && Browser().isiOS()) { console.warn("Audio track should be manually unmuted in iOS Safari"); } else { audioElement.muted = false; } }); }; audioElements.set(track.mid, audioElement); audioDisplay.appendChild(audioElement); audioElement.srcObject = stream; }, ... } } |
11.7.
...
Removing audio track
removeAudioTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... removeAudioTrack: function (track) { const audioElement = audioElements.get(track.mid); if (audioElement) { audioElement.remove(); audioElements.delete(track.mid); } }, ... } } |
11.8.
...
Set participant nickname to display
setNickname() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... setNickname: function (userId, nickname) { const additionalUserId = userId ? "#" + getShortUserId(userId) : ""; participantNicknameDisplay.innerText = "Name: " + nickname + additionalUserId; }, ... } } |
11.9.
...
Update track quality info
updateQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... updateQuality: function (track, qualityName, available) { player.updateQuality(qualityName, available); }, ... } } |
11.10.
...
Add track quality info
addQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... addQuality: function (track, qualityName, available, onQualityPick) { player.addQuality(qualityName, available, onQualityPick); }, ... } } |
11.11.
...
Pick a quality to display
pickQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... pickQuality: function (track, qualityName) { player.pickQuality(qualityName); } ... } } |
11.12.
...
Clear quality state displayed
clearQualityState() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... clearQualityState: function (track) { player.clearQualityState(); }, ... } } |
11.13.
...
Dispose the object
dispose() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createOneToManyParticipantView = function () { ... return { ... dispose: function () { player.dispose(); for (const element of audioElements.values()) { element.remove(); } audioElements.clear(); }, ... } } |
12.
...
Video player object creation
createVideoPlayer() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { const streamDisplay = createContainer(participantDiv); const resolutionLabel = createInfoDisplay(streamDisplay, "0x0"); hideItem(resolutionLabel); const trackNameDisplay = createInfoDisplay(streamDisplay, "track not set"); hideItem(trackNameDisplay); const videoMuteDisplay = createContainer(streamDisplay); const qualityDisplay = createContainer(streamDisplay); const trackDisplay = createContainer(streamDisplay); let videoElement; const trackButtons = new Map(); const qualityButtons = new Map(); const lock = function () { ... } const unlock = function () { ... } const setWebkitEventHandlers = function (video) { ... } const setEventHandlers = function (video) { ... } const repickQuality = function (qualityName) { ... } return { rootDiv: streamDisplay, muteButton: null, autoButton: null, dispose: function () { ... }, clearQualityState: function () { ... }, addVideoTrack: function (track, asyncCallback) { ... }, removeVideoTrack: function (track) { ... }, setVideoSource: function (remoteVideoTrack, onResize, onMute) { ... }, removeVideoSource: function () { ... }, showVideoTrack: function (track) { ... }, updateQuality: function (qualityName, available) { ... }, addQuality: function (qualityName, available, onPickQuality) { ... }, pickQuality: function (qualityName) { ... } } } |
12.1.
...
Lock and unlock player buttons to wait for asynchronous operations
lock(), unlock() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... const lock = function () { for (const btn of trackButtons.values()) { btn.disabled = true; } for (const state of qualityButtons.values()) { state.btn.disabled = true; } } const unlock = function () { for (const btn of trackButtons.values()) { btn.disabled = false; } for (const state of qualityButtons.values()) { state.btn.disabled = false; } } ... return { ... } } |
12.2.
...
Safari event handles set up
setWebkitEventHandlers() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... const setWebkitEventHandlers = function (video) { let needRestart = false; let isFullscreen = false; // Use webkitbeginfullscreen event to detect full screen mode in iOS Safari video.addEventListener("webkitbeginfullscreen", function () { isFullscreen = true; }); video.addEventListener("pause", function () { if (needRestart) { console.log("Media paused after fullscreen, continue..."); video.play(); needRestart = false; } else { console.log("Media paused by click, continue..."); video.play(); } }); video.addEventListener("webkitendfullscreen", function () { video.play(); needRestart = true; isFullscreen = false; }); } ... return { ... } } |
12.3.
...
Other browsers event handlers set up
setEventHandlers() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... const setEventHandlers = function (video) { // Ignore play/pause button video.addEventListener("pause", function () { console.log("Media paused by click, continue..."); video.play(); }); } ... return { ... } } |
12.4.
...
Change quality buttons colors when picking a quality
repickQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... const repickQuality = function (qualityName) { for (const [quality, state] of qualityButtons.entries()) { if (quality === qualityName) { state.btn.style.color = QUALITY_COLORS.SELECTED; } else if (state.btn.style.color === QUALITY_COLORS.SELECTED) { if (state.available) { state.btn.style.color = QUALITY_COLORS.AVAILABLE; } else { state.btn.style.color = QUALITY_COLORS.UNAVAILABLE; } } } } ... return { ... } } |
12.5.
...
Remove quality buttons
clearQualityState() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... clearQualityState: function () { qualityButtons.forEach((state, qName) => { state.btn.remove(); }); qualityButtons.clear(); }, ... } } |
12.6.
...
Adding a video track to play
addVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... addVideoTrack: function (track, asyncCallback) { const trackButton = document.createElement("button"); trackButtons.set(track.mid, trackButton); trackButton.innerText = "Track №" + track.mid + ": " + track.contentType; trackButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px"); trackButton.style.color = QUALITY_COLORS.AVAILABLE; const self = this; trackButton.addEventListener('click', async function () { console.log("Clicked on track button track.mid " + track.mid); if (trackButton.style.color === QUALITY_COLORS.SELECTED) { return } lock(); asyncCallback().then(() => { self.showVideoTrack(track); }).finally(() => { unlock(); }); }); trackDisplay.appendChild(trackButton); }, ... } } |
12.7.
...
Removing video track played
removeVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... removeVideoTrack: function (track) { const trackButton = trackButtons.get(track.mid); if (trackButton) { trackButton.remove(); trackButtons.delete(track.mid); } }, ... } } |
12.8.
...
Adding a video tag and setting video track as a source
setVideoSource() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... setVideoSource: function (remoteVideoTrack, onResize, onMute) { if (!this.muteButton) { const newVideoMuteBtn = document.createElement("button"); this.muteButton = newVideoMuteBtn; newVideoMuteBtn.innerText = "mute"; newVideoMuteBtn.setAttribute("style", "display:inline-block; border: solid; border-width: 1px"); newVideoMuteBtn.addEventListener('click', async function () { newVideoMuteBtn.disabled = true; try { if (newVideoMuteBtn.innerText === "mute") { await onMute(true); newVideoMuteBtn.innerText = "unmute"; } else if (newVideoMuteBtn.innerText === "unmute") { await onMute(false); newVideoMuteBtn.innerText = "mute"; } } finally { newVideoMuteBtn.disabled = false; } }); videoMuteDisplay.appendChild(newVideoMuteBtn); } if (videoElement) { videoElement.remove(); videoElement = null; } if (!remoteVideoTrack) { return; } videoElement = document.createElement("video"); hideItem(videoElement); videoElement.setAttribute("style", "display:none; border: solid; border-width: 1px"); const stream = new MediaStream(); streamDisplay.appendChild(videoElement); videoElement.srcObject = stream; videoElement.onloadedmetadata = function (e) { videoElement.play(); }; videoElement.addEventListener("resize", function (event) { showItem(resolutionLabel); if (videoElement) { resolutionLabel.innerText = videoElement.videoWidth + "x" + videoElement.videoHeight; resizeVideo(event.target); onResize(); } }); stream.addTrack(remoteVideoTrack); if (Browser().isSafariWebRTC()) { videoElement.setAttribute("playsinline", ""); videoElement.setAttribute("webkit-playsinline", ""); setWebkitEventHandlers(videoElement); } else { setEventHandlers(videoElement); } }, ... } } |
12.9.
...
Removing the video tag
removeVideoSource() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... removeVideoSource: function () { if (videoElement) { videoElement.remove(); videoElement = null; } if (this.muteButton) { this.muteButton.remove(); this.muteButton = null; } hideItem(resolutionLabel); trackNameDisplay.innerText = "track not set"; }, ... } } |
12.10.
...
Video tag and track info displaying
showVideoTrack() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... showVideoTrack: function (track) { if (videoElement) { showItem(videoElement); } for (const [mid, btn] of trackButtons.entries()) { if (mid === track.mid) { btn.style.color = QUALITY_COLORS.SELECTED; } else if (btn.style.color === QUALITY_COLORS.SELECTED) { btn.style.color = QUALITY_COLORS.AVAILABLE; } } trackNameDisplay.innerText = "Current video track: " + track.mid; showItem(trackNameDisplay); }, ... } } |
12.11.
...
Update available auality info
updateQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... updateQuality: function (qualityName, available) { const value = qualityButtons.get(qualityName); if (value) { const qualityButton = value.btn; value.available = available; if (qualityButton.style.color === QUALITY_COLORS.SELECTED) { return; } if (available) { qualityButton.style.color = QUALITY_COLORS.AVAILABLE; } else { qualityButton.style.color = QUALITY_COLORS.UNAVAILABLE; } } }, ... } } |
12.12.
...
Add quality button
addQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... addQuality: function (qualityName, available, onPickQuality) { const qualityButton = document.createElement("button"); qualityButtons.set(qualityName, {btn: qualityButton, available: available}); qualityButton.innerText = qualityName; qualityButton.setAttribute("style", "display:inline-block; border: solid; border-width: 1px"); if (available) { qualityButton.style.color = QUALITY_COLORS.AVAILABLE; } else { qualityButton.style.color = QUALITY_COLORS.UNAVAILABLE; } qualityDisplay.appendChild(qualityButton); qualityButton.addEventListener('click', async function () { console.log("Clicked on quality button " + qualityName); if (qualityButton.style.color === QUALITY_COLORS.SELECTED || qualityButton.style.color === QUALITY_COLORS.UNAVAILABLE || !videoElement) { return; } lock(); onPickQuality().finally(() => unlock()); }); }, ... } } |
12.13.
...
Handle a quality button click
pickQuality() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... pickQuality: function (qualityName) { repickQuality(qualityName); } ... } } |
12.14.
...
Dispose the object
dispose() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createVideoPlayer = function (participantDiv) { ... return { ... dispose: function () { streamDisplay.remove(); }, ... } } |
13.
...
Get a track to display from the meeting room
remoteTrackProvider() code
Code Block | ||||
---|---|---|---|---|
| ||||
const remoteTrackProvider = function (room) { return { getVideoTrack: async function () { return await room.getRemoteTrack("VIDEO", false); }, getAudioTrack: async function () { return await room.getRemoteTrack("AUDIO", true); } } } |
14.
...
Helper functions
14.1.
...
Re-scale video to player video tag size
resizeVideo(), downScaleToFitSize() code
Code Block | ||||
---|---|---|---|---|
| ||||
const resizeVideo = function (video, width, height) { // TODO: fix if (video) { return; } if (!video.parentNode) { return; } if (video instanceof HTMLCanvasElement) { video.videoWidth = video.width; video.videoHeight = video.height; } const display = video.parentNode; const parentSize = { w: display.parentNode.clientWidth, h: display.parentNode.clientHeight }; let newSize; if (width && height) { newSize = downScaleToFitSize(width, height, parentSize.w, parentSize.h); } else { newSize = downScaleToFitSize(video.videoWidth, video.videoHeight, parentSize.w, parentSize.h); } display.style.width = newSize.w + "px"; display.style.height = newSize.h + "px"; //vertical align let margin = 0; if (parentSize.h - newSize.h > 1) { margin = Math.floor((parentSize.h - newSize.h) / 2); } display.style.margin = margin + "px auto"; console.log("Resize from " + video.videoWidth + "x" + video.videoHeight + " to " + display.offsetWidth + "x" + display.offsetHeight); } const downScaleToFitSize = function (videoWidth, videoHeight, dstWidth, dstHeight) { var newWidth, newHeight; var videoRatio = videoWidth / videoHeight; var dstRatio = dstWidth / dstHeight; if (dstRatio > videoRatio) { newHeight = dstHeight; newWidth = Math.floor(videoRatio * dstHeight); } else { newWidth = dstWidth; newHeight = Math.floor(dstWidth / videoRatio); } return { w: newWidth, h: newHeight }; } |
14.2.
...
Create a tag to display a textual info
createInfoDisplay() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createInfoDisplay = function (parent, text) { const div = document.createElement("div"); if (text) { div.innerHTML = text; } div.setAttribute("style", "width:auto; height:30px;"); div.setAttribute("class", "text-center"); if (parent) { parent.appendChild(div); } return div; } |
14.3.
...
Create a container tag
createContainer() code
Code Block | ||||
---|---|---|---|---|
| ||||
const createContainer = function (parent) { const div = document.createElement("div"); div.setAttribute("style", "width:auto; height:auto;"); div.setAttribute("class", "text-center"); if (parent) { parent.appendChild(div); } return div; } |
14.4.
...
Show and hide the tag on the page
showItem(), hideItem() code
...