coace
/
scripts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Jitsi Meet iframe

This commit is contained in:
coolneng 2021-02-07 21:18:30 +01:00
parent ce0c24a8fb
commit 1beac8a881
Signed by: coolneng
GPG Key ID: 9893DA236405AF57
2 changed files with 102 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
jitsi-iframe.html Normal file
View File

@ -0,0 +1,102 @@
<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
justify-content: center;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<script src="https://meet.jit.si/external_api.js"></script> <!-- Include the script from here. It should be included in your jitsi installation. -->
</head>
<body>
<div class="row">
<div id=meet></div>
</div>
</body>
<script>
const domain = "meet.jit.si"; //Here goes your domain where the meeting takes place.
var isStreamOn = false; //This is a variable I've defined to use later.
const options = {
roomName: "Coacecursolod", //This is the name of the room. Quite obvious.
width: 800, //Well, you know.
height: 480, //Same as above, just vertical.
parentNode: document.querySelector('#meet') //Now, you declare here which element should parent your stream.
}
const api = new JitsiMeetExternalAPI(domain, options); //This is where the iframe is actually constructed
//The function below turns on the Tile View everytime a participant joins. Practically it makes Tile View the default mode
api.addEventListener(`videoConferenceJoined`, () => {
const listener = ({ enabled }) => {
api.removeEventListener(`tileViewChanged`, listener);
if (!enabled) {
api.executeCommand(`toggleTileView`);
}
};
});
function streamHandler() {
try {
if (!isStreamOn) {
document.getElementById("streamingResponseMsg").innerHTML = "Starting streaming...";
//The function below starts the stream or recording, according to its "mode"
api.executeCommand('startRecording', {
mode: 'stream', //recording mode, either `file` or `stream`.
rtmpStreamKey: '', //This where you *should* put your favoured rtmp stream server along with your key, like "rtmp:\/\/some.address/norecord/stream-key"
youtubeStreamKey: 'rtmp:\/\/some.address/norecord/stream-key', //the youtube stream key.
});
} else {
document.getElementById("streamingResponseMsg").innerHTML = "Stopping streaming...";
//The function below stops the stream or recording, according to the string you pass. Official guide shows an object, while it should be a string
api.executeCommand('stopRecording', 'stream');
}
}
catch (e){
if (isStreamOn){
document.getElementById("streamingResponseMsg").innerHTML = "Error while stopping stream.";
console.log("Exception while stopping stream.", e);
}else{
document.getElementById("streamingResponseMsg").innerHTML = "Error while starting stream.";
console.log("Exception while starting stream.", e);
}
this.isStreamOn = false;
}
};
//This part doesn't work without making some changes to the code as per this; https://github.com/team-ai-repo/jitsi-meet/pull/4/files
api.addEventListener("recordingStarted", () => {
document.getElementById("stream-btn").innerHTML="Stop Streaming";
document.getElementById("streamingResponseMsg").innerHTML = "Stream is on";
this.isStreamOn = true;
console.log("Example Stream On", this.isStreamOn);
});
api.addEventListener("recordingStopped", () => {
document.getElementById("stream-btn").innerHTML="Start Streaming";
document.getElementById("streamingResponseMsg").innerHTML = "Stream is off";
console.log("Example Stream Off", this.isStreamOn);
this.isStreamOn = false;
});
</script>
</html>

9
shell.nix
View File

@ -1,9 +0,0 @@
{ pkgs ? import <nixpkgs> {} }:
with pkgs;
mkShell {
buildInputs = [
];
}