Record the Conference
This tutorial guides how to add a recording feature to your conference application. We will use the RecordingService.
Start recording
Layout editing
Open the index.html
file and add a new div
with the id recording
and in it create:
- a
button
with the idstart-recording-btn
- a
p
element with the idrecord-status
The record-status
element will be used to inform when the conference is being recorded.
<div id="actions">...</div>
<!-- ADD recording JUST AFTER actions -->
<div id="recording">
<button id="start-recording-btn" disabled>Start recording</button>
<p id="record-status"></p>
</div>
Interface linking
Declare the button
Open the ui.js
file and declare the startRecordingBtn
at the top of the initUI
function:
const startRecordingBtn = document.getElementById("start-recording-btn");
Enable/disabled the button
Edit the joinButton
onclick handler to enable the startRecordingBtn
when the conference is joined:
... => VoxeetSDK.conference.join(conference, {}))
.then(() => {
...
startRecordingBtn.disabled = false;
Then, edit the leaveButton
onclick handler to disable the startRecordingBtn
when the conference is left:
leaveButton.onclick = () => {
VoxeetSDK.conference
.leave()
.then(() => {
joinButton.disabled = false;
leaveButton.disabled = true;
startVideoBtn.disabled = true;
stopVideoBtn.disabled = true;
startScreenShareBtn.disabled = true;
stopScreenShareBtn.disabled = true;
startRecordingBtn.disabled = true;
})
.catch((err) => console.error(err));
};
Logic implementation
Write the onclick
function for the startRecordingBtn
:
startRecordingBtn.onclick = () => {
let recordStatus = document.getElementById("record-status");
VoxeetSDK.recording
.start()
.then(() => {
recordStatus.innerText = "Recording";
startRecordingBtn.disabled = true;
})
.catch((err) => console.error(err));
};
Stop recording
Layout editing
Open the index.html
file and add a button
with the id stop-recording-btn
as a child of the recording
div:
<div id="recording">
<button id="start-recording-btn" disabled>Start recording</button>
<!-- ADD THE stop-recording-btn HERE -->
<button id="stop-recording-btn" disabled>Stop recording</button>
<p id="record-status"></p>
</div>
Interface linking
Get element from the document
Open ui.js
and declare the stopRecordingBtn
in the initUI
:
const stopRecordingBtn = document.getElementById("stop-recording-btn");
Enable/disable the button
Edit the startRecordingBtn
onclick handler to enable the stopRecordingBtn
once a recording is started:
startRecordingBtn.onclick = () => {
let recordStatus = document.getElementById("record-status");
VoxeetSDK.recording
.start()
.then(() => {
recordStatus.innerText = "Recording";
startRecordingBtn.disabled = true;
stopRecordingBtn.disabled = false;
})
.catch((err) => console.error(err));
};
Edit the leaveButton
onclick handler to disable the button when the conference is left:
leaveButton.onclick = () => {
VoxeetSDK.conference
.leave()
.then(() => {
joinButton.disabled = false;
leaveButton.disabled = true;
startVideoBtn.disabled = true;
stopVideoBtn.disabled = true;
startScreenShareBtn.disabled = true;
stopScreenShareBtn.disabled = true;
startRecordingBtn.disabled = true;
stopRecordingBtn.disabled = true;
})
.catch((err) => console.error(err));
};
Logic implementation
Onclick handler
Open the ui.js
file and in the initUI
function, write the onclick
function for the stopRecordingBtn
:
stopRecordingBtn.onclick = () => {
let recordStatus = document.getElementById("record-status");
VoxeetSDK.recording
.stop()
.then(() => {
recordStatus.innerText = "";
startRecordingBtn.disabled = false;
stopRecordingBtn.disabled = true;
})
.catch((err) => console.error(err));
};
Updated about 2 years ago