ATD
/
jitsi-stream-client
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

stuff

This commit is contained in:
Henne 2020-04-27 14:57:01 +02:00
parent ffc3940173
commit b503175752
3 changed files with 121 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -8,14 +8,18 @@
<script src="libs/strophe/strophe.disco.min.js?v=1"></script>
<link rel="stylesheet" href="libs/bootstrap.min.css">
<script src="libs/lib-jitsi-meet.min.js"></script>
<script src="example.js" ></script>
<script src="script.js" ></script>
<style type="text/css">
body {
padding: 12px;
padding: 6px;
}
video {
display: block;
margin: 0 auto;
border: 1px solid black;
}
.container-fluid {
padding: 0;
}
.col-md-4 {
padding: 0 !important;
@ -26,56 +30,90 @@
margin: 0 !important;
}
.video {
height: 384px;
text-align: center;
}
</style>
</head>
<body>
<div id="roomselector">
<input type="text" id="roomname" />
<button onclick="connect()" disabled id="roomnamebutton">Connect</button>
</div>
<div style="display: none" id="room">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 video video-0">
<video autoplay='autoplay' width="640" height="360"></video>
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<span></span>
<input type="text" onchange="setName(0, this.value)">
</div>
<div class="col-md-4 video video-1">
<video autoplay='autoplay' width="640" height="360"></video>
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<input type="text" onchange="setName(1, this.value)">
<span></span>
</div>
<div class="col-md-4 video video-2">
<video autoplay='autoplay' width="640" height="360"></video>
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<input type="text" onchange="setName(2, this.value)">
<span></span>
</div>
</div>
<div class="row">
<div class="col-md-4 video video-3">
<video autoplay='autoplay' width="640" height="360"></video>
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<input type="text" onchange="setName(3, this.value)">
<span></span>
</div>
<div class="col-md-4 video video-4">
<video autoplay='autoplay' width="640" height="360"></video>
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<input type="text" onchange="setName(4, this.value)">
<span></span>
</div>
<div class="col-md-4 video video-5">
<video autoplay='autoplay' width="640" height="360"></video>
<video autoplay='autoplay'></video>
<audio autoplay='autoplay'></audio>
<input type="text" onchange="setName(5, this.value)">
<span></span>
</div>
</div>
</div>
<div class="volume-slider">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(0, this.value)">
<span class="name"></span>
</div>
<div class="volume-slider">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(1, this.value)">
<span class="name"></span>
</div>
<div class="volume-slider">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(2, this.value)">
<span class="name"></span>
</div>
<div class="volume-slider">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(3, this.value)">
<span class="name"></span>
</div>
<div class="volume-slider">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(4, this.value)">
<span class="name"></span>
</div>
<div class="volume-slider">
<span class="volume">70%</span>
<input type="range" min="0" max="1" step="0.01" value="0.7" oninput="setLevel(5, this.value)">
<span class="name"></span>
</div>
</div>
<input type="range" min="0" max="1" step="0.01" value="0.7" onchange="setLevel(0, this.value)">
<input type="range" min="0" max="1" step="0.01" value="0.7" onchange="setLevel(1, this.value)">
<input type="range" min="0" max="1" step="0.01" value="0.7" onchange="setLevel(2, this.value)">
<input type="range" min="0" max="1" step="0.01" value="0.7" onchange="setLevel(3, this.value)">
<input type="range" min="0" max="1" step="0.01" value="0.7" onchange="setLevel(4, this.value)">
<input type="range" min="0" max="1" step="0.01" value="0.7" onchange="setLevel(5, this.value)">
<div id="audioOutputSelectWrapper" style="display: none;">
Change audio output device
<select id="audioOutputSelect" onchange="changeAudioOutput(this)"></select>

1
libs/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

123
example.js → script.js
View File

@ -11,10 +11,9 @@ const confOptions = {
};
const videoSize = {
width: 640,
height: 360
width: 624,
height: 351
};
const roomName = 'tt-test2';
let connection = null;
let isJoined = false;
@ -29,28 +28,8 @@ let remoteMappingName = [
let trackMapping = {};
// alle verfügbaren tracks mit participant id -> {audio: track, video: track}
let tracks = {};
/**
* Hinzufügen der Lokalen Tracks zum Stream, wobei ich immernoch meine, das ist überflüssig.
* @param tracks
*/
function onLocalTracks(tracks) {
localTracks = tracks;
for (let i = 0; i < localTracks.length; i++) {
if (localTracks[i].getType() === 'video') {
$('body').append(`<video autoplay='1' id='localVideo${i}' />`);
localTracks[i].attach($(`#localVideo${i}`)[0]);
} else {
$('body').append(
`<audio autoplay='1' muted='true' id='localAudio${i}' />`);
localTracks[i].attach($(`#localAudio${i}`)[0]);
}
if (isJoined) {
room.addTrack(localTracks[i]);
}
}
}
// name -> id
let nameMapping = {};
/**
*
* @param participant
@ -122,7 +101,7 @@ function onConferenceJoined() {
*/
function onUserJoin(id, user) {
console.log(`user join - ${user.getDisplayName()}`);
nameMapping[user.getDisplayName()] = id;
let position = remoteMappingName.indexOf(user.getDisplayName());
if(position >= 0) {
console.log("user found");
@ -136,6 +115,8 @@ function onUserJoin(id, user) {
* @param displayName
*/
function onNameChange(participant, displayName) {
nameMapping[displayName] = id;
// detach this user from current position
detachUser(participant);
let position = remoteMappingName.indexOf(displayName);
@ -147,15 +128,7 @@ function onNameChange(participant, displayName) {
detachUser(i);
}
}
trackMapping[participant] = position;
if (tracks[participant].video) {
let elemID = `.video-${position} video`;
tracks[participant].video.attach($(elemID)[0]);
}
if(tracks[participant].audio) {
let elemID = `.video-${position} audio`;
tracks[participant].audio.attach($(elemID)[0]);
}
attachUser(participant, position)
}
}
@ -168,6 +141,12 @@ function onUserLeft(id) {
console.log('user left');
detachUser(id);
delete tracks[id];
for(let i in nameMapping) {
if(nameMapping[i] === id) {
delete nameMapping[i];
break;
}
}
}
function detachUser(id) {
@ -182,20 +161,26 @@ function detachUser(id) {
delete trackMapping[id]
}
}
function attachUser(id, position) {
if (trackMapping[id] != null) {
console.log("attaching user " + id);
trackMapping[id] = position;
if (tracks[id].video) {
let elemID = `.video-${position} video`;
tracks[id].video.attach($(elemID)[0]);
}
if(tracks[id].audio) {
let elemID = `.video-${position} audio`;
tracks[id].audio.attach($(elemID)[0]);
}
}
}
/**
* That function is called when connection is established successfully
*/
function onConnectionSuccess() {
room = connection.initJitsiConference(roomName, confOptions);
room.setDisplayName("Streamer");
room.on(JitsiMeetJS.events.conference.TRACK_ADDED, onRemoteTrack);
room.on(JitsiMeetJS.events.conference.TRACK_REMOVED, onRemoteTrackRemove);
room.on(JitsiMeetJS.events.conference.CONFERENCE_JOINED, onConferenceJoined);
room.on(JitsiMeetJS.events.conference.USER_JOINED, onUserJoin);
room.on(JitsiMeetJS.events.conference.USER_LEFT, onUserLeft);
room.on(JitsiMeetJS.events.conference.DISPLAY_NAME_CHANGED, onNameChange);
room.join();
$('#roomnamebutton').prop('disabled', false);
}
/**
@ -208,8 +193,9 @@ function onVideoResize(event) {
const aspectRatio = width/height;
console.log(`${aspectRatio} is the aspect ratio`);
let targetWidth = 640;
let targetHeight = 360;
let targetWidth = videoSize.width;
let targetHeight = videoSize.height
;
if(width > videoSize.width) {
targetHeight *= videoSize.width / width
}
@ -233,8 +219,8 @@ $(document).ready(function() {
if(!video.hasOwnProperty(i)) {
continue;
}
$(video[i]).find('span').text(remoteMappingName[i]);
$(video[i]).find('video').on('resize', onVideoResize);
$(video[i]).find('input')[0].value = remoteMappingName[i];
$(video[i]).find('video').on('resize', onVideoResize).width(videoSize.width).height(videoSize.height);
}
});
@ -251,6 +237,22 @@ function disconnect() {
disconnect);
}
function connect() {
const roomName = $('#roomname').val();
room = connection.initJitsiConference(roomName, confOptions);
room.setDisplayName("Streamer");
room.on(JitsiMeetJS.events.conference.TRACK_ADDED, onRemoteTrack);
room.on(JitsiMeetJS.events.conference.TRACK_REMOVED, onRemoteTrackRemove);
room.on(JitsiMeetJS.events.conference.CONFERENCE_JOINED, onConferenceJoined);
room.on(JitsiMeetJS.events.conference.USER_JOINED, onUserJoin);
room.on(JitsiMeetJS.events.conference.USER_LEFT, onUserLeft);
room.on(JitsiMeetJS.events.conference.DISPLAY_NAME_CHANGED, onNameChange);
room.join();
$('#roomselector').hide();
$('#room').show();
}
/**
*
*/
@ -261,9 +263,25 @@ function unload() {
function setLevel(id, level) {
let track = $(`#audio-${id}`)[0];
console.log(`setting volume of ${id} to ${level*100}%`);
let track = $(`.video-${id} audio`)[0];
track.volume = level;
}
function setName(position, name) {
console.log(`setting name of ${position} to ${name}`);
remoteMappingName[position] = name;
for(let i in trackMapping) {
if(trackMapping[i] === position) {
detachUser(i)
}
}
for(let i in nameMapping) {
if(nameMapping[i] != null) {
attachUser(nameMapping[i], position)
}
}
}
/**
*
* @param selected
@ -291,13 +309,6 @@ connection.addEventListener(
connection.connect();
JitsiMeetJS.createLocalTracks({ devices: [ 'audio', 'video' ] })
.then(onLocalTracks)
.catch(error => {
throw error;
});
if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
JitsiMeetJS.mediaDevices.enumerateDevices(devices => {
const audioOutputDevices