ghaymah_dev/codepill-sfu
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - improvements

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2022-08-02 23:28:15 +02:00
الأصل 18ab910be9
التزام b31fd294ba
3 ملفات معدلة مع 145 إضافات و113 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

3
public/js/Room.js
عرض الملف

@@ -544,6 +544,7 @@ function joinRoom(peer_name, room_id) {
} else { } else {
console.log('05 ----> join Room ' + room_id); console.log('05 ----> join Room ' + room_id);
rc = new RoomClient( rc = new RoomClient(
localAudio,
remoteAudios, remoteAudios,
videoMediaContainer, videoMediaContainer,
window.mediasoupClient, window.mediasoupClient,
@@ -898,7 +899,7 @@ function handleSelects() {
rc.setLocalStorageDevices(RoomClient.mediaType.audio, microphoneSelect.selectedIndex, microphoneSelect.value); rc.setLocalStorageDevices(RoomClient.mediaType.audio, microphoneSelect.selectedIndex, microphoneSelect.value);
}; };
speakerSelect.onchange = () => { speakerSelect.onchange = () => {
rc.attachSinkId(rc.myVideoEl, speakerSelect.value); rc.attachSinkId(rc.myAudioEl, speakerSelect.value);
rc.setLocalStorageDevices(RoomClient.mediaType.speaker, speakerSelect.selectedIndex, speakerSelect.value); rc.setLocalStorageDevices(RoomClient.mediaType.speaker, speakerSelect.selectedIndex, speakerSelect.value);
}; };
videoSelect.onchange = () => { videoSelect.onchange = () => {

254
public/js/RoomClient.js
عرض الملف

@@ -96,6 +96,7 @@ const _EVENTS = {
let recordedBlobs; let recordedBlobs;
class RoomClient { class RoomClient {
constructor( constructor(
localAudioEl,
remoteAudioEl, remoteAudioEl,
videoMediaContainer, videoMediaContainer,
mediasoupClient, mediasoupClient,
@@ -109,6 +110,7 @@ class RoomClient {
isScreenAllowed, isScreenAllowed,
successCallback, successCallback,
) { ) {
this.localAudioEl = localAudioEl;
this.remoteAudioEl = remoteAudioEl; this.remoteAudioEl = remoteAudioEl;
this.videoMediaContainer = videoMediaContainer; this.videoMediaContainer = videoMediaContainer;
this.mediasoupClient = mediasoupClient; this.mediasoupClient = mediasoupClient;
@@ -164,6 +166,7 @@ class RoomClient {
this.chunkSize = 1024 * 16; // 16kb/s this.chunkSize = 1024 * 16; // 16kb/s
this.myVideoEl = null; this.myVideoEl = null;
this.myAudioEl = null;
this.debug = false; this.debug = false;
this.videoProducerId = null; this.videoProducerId = null;
@@ -691,15 +694,16 @@ class RoomClient {
this.producers.set(producer.id, producer); this.producers.set(producer.id, producer);
let elem; let elem, au;
if (!audio) { if (!audio) {
this.localVideoStream = stream; this.localVideoStream = stream;
elem = await this.handleProducer(producer.id, type, stream);
this.videoProducerId = producer.id; this.videoProducerId = producer.id;
elem = await this.handleProducer(producer.id, type, stream);
//if (!screen && !isEnumerateDevices) enumerateVideoDevices(stream); //if (!screen && !isEnumerateDevices) enumerateVideoDevices(stream);
} else { } else {
this.localAudioStream = stream; this.localAudioStream = stream;
this.audioProducerId = producer.id; this.audioProducerId = producer.id;
au = await this.handleProducer(producer.id, type, stream);
//if (!isEnumerateDevices) enumerateAudioDevices(stream); //if (!isEnumerateDevices) enumerateAudioDevices(stream);
} }
@@ -717,6 +721,12 @@ class RoomClient {
handleAspectRatio(); handleAspectRatio();
console.log('[transportClose] Video-element-count', this.videoMediaContainer.childElementCount); console.log('[transportClose] Video-element-count', this.videoMediaContainer.childElementCount);
} else {
au.srcObject.getTracks().forEach(function (track) {
track.stop();
});
au.parentNode.removeChild(au);
console.log('[transportClose] audio-element-count', this.localAudioEl.childElementCount);
} }
this.producers.delete(producer.id); this.producers.delete(producer.id);
}); });
@@ -731,6 +741,12 @@ class RoomClient {
handleAspectRatio(); handleAspectRatio();
console.log('[closingProducer] Video-element-count', this.videoMediaContainer.childElementCount); console.log('[closingProducer] Video-element-count', this.videoMediaContainer.childElementCount);
} else {
au.srcObject.getTracks().forEach(function (track) {
track.stop();
});
au.parentNode.removeChild(au);
console.log('[closingProducer] audio-element-count', this.localAudioEl.childElementCount);
} }
this.producers.delete(producer.id); this.producers.delete(producer.id);
}); });
@@ -845,75 +861,95 @@ class RoomClient {
async handleProducer(id, type, stream) { async handleProducer(id, type, stream) {
let elem, vb, ts, d, p, i, au, fs, pm, pb; let elem, vb, ts, d, p, i, au, fs, pm, pb;
this.removeVideoOff(this.peer_id); switch (type) {
d = document.createElement('div'); case mediaType.video:
d.className = 'Camera'; case mediaType.screen:
d.id = id + '__d'; this.removeVideoOff(this.peer_id);
elem = document.createElement('video'); d = document.createElement('div');
elem.setAttribute('id', id); d.className = 'Camera';
elem.setAttribute('playsinline', true); d.id = id + '__video';
elem.controls = isVideoControlsOn; elem = document.createElement('video');
elem.autoplay = true; elem.setAttribute('id', id);
elem.muted = true; elem.setAttribute('playsinline', true);
elem.volume = 0; elem.controls = isVideoControlsOn;
elem.poster = image.poster; elem.autoplay = true;
this.isMobileDevice || type === mediaType.screen ? (elem.className = '') : (elem.className = 'mirror'); elem.muted = true;
vb = document.createElement('div'); elem.volume = 0;
vb.setAttribute('id', this.peer_id + '__vb'); elem.poster = image.poster;
vb.className = 'videoMenuBar fadein'; this.isMobileDevice || type === mediaType.screen ? (elem.className = '') : (elem.className = 'mirror');
fs = document.createElement('button'); vb = document.createElement('div');
fs.id = id + '__fullScreen'; vb.setAttribute('id', this.peer_id + '__vb');
fs.className = html.fullScreen; vb.className = 'videoMenuBar fadein';
ts = document.createElement('button'); fs = document.createElement('button');
ts.id = id + '__snapshot'; fs.id = id + '__fullScreen';
ts.className = html.snapshot; fs.className = html.fullScreen;
au = document.createElement('button'); ts = document.createElement('button');
au.id = this.peer_id + '__audio'; ts.id = id + '__snapshot';
au.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff; ts.className = html.snapshot;
p = document.createElement('p'); au = document.createElement('button');
p.id = this.peer_id + '__name'; au.id = this.peer_id + '__audio';
p.className = html.userName; au.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff;
p.innerHTML = '👤 ' + this.peer_name + ' (me)'; p = document.createElement('p');
i = document.createElement('i'); p.id = this.peer_id + '__name';
i.id = this.peer_id + '__hand'; p.className = html.userName;
i.className = html.userHand; p.innerHTML = '👤 ' + this.peer_name + ' (me)';
pm = document.createElement('div'); i = document.createElement('i');
pb = document.createElement('div'); i.id = this.peer_id + '__hand';
pm.setAttribute('id', this.peer_id + '_pitchMeter'); i.className = html.userHand;
pb.setAttribute('id', this.peer_id + '_pitchBar'); pm = document.createElement('div');
pm.className = 'speechbar'; pb = document.createElement('div');
pb.className = 'bar'; pm.setAttribute('id', this.peer_id + '_pitchMeter');
pb.style.height = '1%'; pb.setAttribute('id', this.peer_id + '_pitchBar');
pm.appendChild(pb); pm.className = 'speechbar';
vb.appendChild(au); pb.className = 'bar';
vb.appendChild(ts); pb.style.height = '1%';
vb.appendChild(fs); pm.appendChild(pb);
d.appendChild(elem); vb.appendChild(au);
d.appendChild(pm); vb.appendChild(ts);
d.appendChild(i); vb.appendChild(fs);
d.appendChild(p); d.appendChild(elem);
d.appendChild(vb); d.appendChild(pm);
this.videoMediaContainer.appendChild(d); d.appendChild(i);
this.attachMediaStream(elem, stream, type, 'Producer'); d.appendChild(p);
this.myVideoEl = elem; d.appendChild(vb);
this.handleFS(elem.id, fs.id); this.videoMediaContainer.appendChild(d);
this.handleDD(elem.id, this.peer_id, true); this.attachMediaStream(elem, stream, type, 'Producer');
this.handleTS(elem.id, ts.id); this.myVideoEl = elem;
this.popupPeerInfo(p.id, this.peer_info); this.handleFS(elem.id, fs.id);
this.checkPeerInfoStatus(this.peer_info); this.handleDD(elem.id, this.peer_id, true);
if (participantsCount <= 3 && type === mediaType.screen) { this.handleTS(elem.id, ts.id);
this.peerAction('me', this.peer_id + '___sStart', 'screenStart', true, true, false); this.popupPeerInfo(p.id, this.peer_info);
setAspectRatio(2); // 16:9 this.checkPeerInfoStatus(this.peer_info);
} else { if (participantsCount <= 3 && type === mediaType.screen) {
this.peerAction('me', this.peer_id + '___sStop', 'screenStop', true, true, false); this.peerAction('me', this.peer_id + '___sStart', 'screenStart', true, true, false);
handleAspectRatio(); setAspectRatio(2); // 16:9
} else {
this.peerAction('me', this.peer_id + '___sStop', 'screenStop', true, true, false);
handleAspectRatio();
}
if (!this.isMobileDevice) {
this.setTippy(elem.id, 'Full Screen', 'top-end');
this.setTippy(ts.id, 'Snapshot', 'top-end');
this.setTippy(au.id, 'Audio status', 'top-end');
}
console.log('[addProducer] Video-element-count', this.videoMediaContainer.childElementCount);
break;
case mediaType.audio:
elem = document.createElement('audio');
elem.id = id + '__localAudio';
elem.controls = false;
elem.autoplay = true;
elem.muted = true;
elem.volume = 0;
this.myAudioEl = elem;
this.localAudioEl.appendChild(elem);
this.attachMediaStream(elem, stream, type, 'Producer');
if (this.isAudioAllowed && !speakerSelect.disabled) {
this.attachSinkId(elem, speakerSelect.value);
}
console.log('[addProducer] audio-element-count', this.localAudioEl.childElementCount);
break;
} }
if (!this.isMobileDevice) {
this.setTippy(elem.id, 'Full Screen', 'top-end');
this.setTippy(ts.id, 'Snapshot', 'top-end');
this.setTippy(au.id, 'Audio status', 'top-end');
}
console.log('[addProducer] Video-element-count', this.videoMediaContainer.childElementCount);
return elem; return elem;
} }
@@ -989,7 +1025,7 @@ class RoomClient {
if (type !== mediaType.audio) { if (type !== mediaType.audio) {
let elem = this.getId(producer_id); let elem = this.getId(producer_id);
let d = this.getId(producer_id + '__d'); let d = this.getId(producer_id + '__video');
elem.srcObject.getTracks().forEach(function (track) { elem.srcObject.getTracks().forEach(function (track) {
track.stop(); track.stop();
}); });
@@ -999,6 +1035,15 @@ class RoomClient {
console.log('[producerClose] Video-element-count', this.videoMediaContainer.childElementCount); console.log('[producerClose] Video-element-count', this.videoMediaContainer.childElementCount);
} }
if (type === mediaType.audio) {
let au = this.getId(producer_id + '__localAudio');
au.srcObject.getTracks().forEach(function (track) {
track.stop();
});
this.localAudioEl.removeChild(au);
console.log('[producerClose] Audio-element-count', this.localAudioEl.childElementCount);
}
switch (type) { switch (type) {
case mediaType.audio: case mediaType.audio:
this.setIsAudio(this.peer_id, false); this.setIsAudio(this.peer_id, false);
@@ -1089,7 +1134,7 @@ class RoomClient {
this.removeVideoOff(remotePeerId); this.removeVideoOff(remotePeerId);
d = document.createElement('div'); d = document.createElement('div');
d.className = 'Camera'; d.className = 'Camera';
d.id = id + '__d'; d.id = id + '__video';
elem = document.createElement('video'); elem = document.createElement('video');
elem.setAttribute('id', id); elem.setAttribute('id', id);
elem.setAttribute('playsinline', true); elem.setAttribute('playsinline', true);
@@ -1202,7 +1247,7 @@ class RoomClient {
if (elem) elem.parentNode.removeChild(elem); if (elem) elem.parentNode.removeChild(elem);
if (consumer_kind === 'video') { if (consumer_kind === 'video') {
let d = this.getId(consumer_id + '__d'); let d = this.getId(consumer_id + '__video');
if (d) d.parentNode.removeChild(d); if (d) d.parentNode.removeChild(d);
handleAspectRatio(); handleAspectRatio();
console.log( console.log(
@@ -1387,31 +1432,19 @@ class RoomClient {
// #################################################### // ####################################################
attachMediaStream(elem, stream, type, who) { attachMediaStream(elem, stream, type, who) {
if (who === 'Producer') { let track;
const producerStream = new MediaStream(); switch (type) {
producerStream.addTrack(stream.getVideoTracks()[0]); case mediaType.audio:
if (this.isAudioAllowed) { track = stream.getAudioTracks()[0];
producerStream.addTrack(this.localAudioStream.getAudioTracks()[0]); break;
} case mediaType.video:
elem.srcObject = producerStream; case mediaType.screen:
if (this.isAudioAllowed && !speakerSelect.disabled) { track = stream.getVideoTracks()[0];
this.attachSinkId(elem, speakerSelect.value); break;
}
} else {
let track;
switch (type) {
case mediaType.audio:
track = stream.getAudioTracks()[0];
break;
case mediaType.video:
case mediaType.screen:
track = stream.getVideoTracks()[0];
break;
}
const consumerStream = new MediaStream();
consumerStream.addTrack(track);
elem.srcObject = consumerStream;
} }
const consumerStream = new MediaStream();
consumerStream.addTrack(track);
elem.srcObject = consumerStream;
console.log(who + ' Success attached media ' + type); console.log(who + ' Success attached media ' + type);
} }
@@ -1709,7 +1742,7 @@ class RoomClient {
isVideoControlsOn = value == 'On' ? true : false; isVideoControlsOn = value == 'On' ? true : false;
let cameras = this.getEcN('Camera'); let cameras = this.getEcN('Camera');
for (let i = 0; i < cameras.length; i++) { for (let i = 0; i < cameras.length; i++) {
let cameraId = cameras[i].id.replace('__d', ''); let cameraId = cameras[i].id.replace('__video', '');
let videoPlayer = this.getId(cameraId); let videoPlayer = this.getId(cameraId);
videoPlayer.hasAttribute('controls') videoPlayer.hasAttribute('controls')
? videoPlayer.removeAttribute('controls') ? videoPlayer.removeAttribute('controls')
@@ -2767,26 +2800,23 @@ class RoomClient {
let pbProducer = this.getId(peerId + '_pitchBar'); let pbProducer = this.getId(peerId + '_pitchBar');
let pbConsumer = this.getId(peerId + '__pitchBar'); let pbConsumer = this.getId(peerId + '__pitchBar');
let audioVolume = data.audioVolume * 10; //10-100 let audioVolume = data.audioVolume * 10; //10-100
let audioColor = 'lime';
//console.log('Active speaker', { peer_name: peerName, peer_id: peerId, audioVolume: audioVolume }); //console.log('Active speaker', { peer_name: peerName, peer_id: peerId, audioVolume: audioVolume });
if (audioVolume > 40) { if ([50, 60, 70].includes(audioVolume)) audioColor = 'orange';
if (producerAudioBtn) producerAudioBtn.style.color = 'orange'; if ([80, 90, 100].includes(audioVolume)) audioColor = 'red';
if (consumerAudioBtn) consumerAudioBtn.style.color = 'orange'; if (producerAudioBtn) producerAudioBtn.style.color = audioColor;
if (pbProducer) pbProducer.style.backgroundColor = 'orange'; if (consumerAudioBtn) consumerAudioBtn.style.color = audioColor;
if (pbConsumer) pbConsumer.style.backgroundColor = 'orange'; if (pbProducer) pbProducer.style.backgroundColor = audioColor;
} else { if (pbConsumer) pbConsumer.style.backgroundColor = audioColor;
if (producerAudioBtn) producerAudioBtn.style.color = 'lime';
if (consumerAudioBtn) consumerAudioBtn.style.color = 'lime';
if (pbProducer) pbProducer.style.backgroundColor = 'lime';
if (pbConsumer) pbConsumer.style.backgroundColor = 'lime';
}
if (pbProducer) pbProducer.style.height = audioVolume + '%'; if (pbProducer) pbProducer.style.height = audioVolume + '%';
if (pbConsumer) pbConsumer.style.height = audioVolume + '%'; if (pbConsumer) pbConsumer.style.height = audioVolume + '%';
setTimeout(function () { setTimeout(function () {
if (producerAudioBtn) producerAudioBtn.style.color = 'white'; audioColor = 'white';
if (consumerAudioBtn) consumerAudioBtn.style.color = 'white'; if (producerAudioBtn) producerAudioBtn.style.color = audioColor;
if (consumerAudioBtn) consumerAudioBtn.style.color = audioColor;
if (pbProducer) pbProducer.style.height = '0%'; if (pbProducer) pbProducer.style.height = '0%';
if (pbConsumer) pbConsumer.style.height = '0%'; if (pbConsumer) pbConsumer.style.height = '0%';
}, 2000); }, 4000);
} }
// #################################################### // ####################################################

1
public/views/Room.html
عرض الملف

@@ -281,6 +281,7 @@
<div id="videoMediaContainer"> <div id="videoMediaContainer">
<!-- <div class="Camera"></div> --> <!-- <div class="Camera"></div> -->
</div> </div>
<div id="localAudio"></div>
<div id="remoteAudios"></div> <div id="remoteAudios"></div>
<div id="sendFileDiv" class="fadein center"> <div id="sendFileDiv" class="fadein center">