Add Jitsi Meet iframe
This commit is contained in:
parent
ce0c24a8fb
commit
1beac8a881
GPG Key ID:
9893DA236405AF57
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue