Record the conference

This tutorial is a part of a series, it comes after the Implement screen sharing.

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 along with the button to start the recording and the record-status that informs if the conference is 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 initUI = () => {
    ...
    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(() => {
            startRecordingBtn.disabled = true;
    ...

Logic implementation

Write the onclick function for the startRecordingBtn:

startRecordingBtn.onclick = () => {
    let recordStatus = document.getElementById('record-status');
    VoxeetSDK.recording.start()
        .then(() => {
            recordStatus.innerText = 'Recording';
        })
        .catch((err) => {
            alert('Cannnot record the conference');
        })
;}

Layout modification

class ViewController: UIViewController {
    ...

    // Conference UI.
    var startRecordingButton: UIButton!

    ...
}

Interface linking

...

func initConferenceUI() {
    ...
        
    // Start recording button.
    startRecordingButton = UIButton(type: .system) as UIButton
    startRecordingButton.frame = CGRect(x: 100, y: stopScreenShareButton.frame.origin.y + stopScreenShareButton.frame.height + 16, width: 100, height: 30)
    startRecordingButton.isEnabled = false
    startRecordingButton.isSelected = true
    startRecordingButton.setTitle("START RECORD", for: .normal)
    startRecordingButton.addTarget(self, action: #selector(startRecordingAction), for: .touchUpInside)
    self.view.addSubview(startRecordingButton)
}

...

@objc func startButtonAction(sender: UIButton!) {
    ...
        // Join the conference with its id.
        VoxeetSDK.shared.conference.join(conference: conference, success: { response in

            ...
            self.startRecordingButton.isEnabled = true /* Update startRecording button state */
            
        }, fail: { error in })
    }, fail: { error in })
}

@objc func leaveButtonAction(sender: UIButton!) {
    VoxeetSDK.shared.conference.leave { error in

        ...
        self.startRecordingButton.isEnabled = false /* Update startRecording button state */

    }
}

Logic implementation

...

@objc func startRecordingAction(sender: UIButton!) {
    VoxeetSDK.shared.recording.start { error in
        if error == nil {
            self.startRecordingButton.isEnabled = false /* Update startRecording button state */
        }
    }
}

...

Layout modification

Edit the main_activity.xml with the following items :

<LinearLayout ...>

    ...
    
    <!-- Step 8. Please put below the layout modification with the start recording step -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/start_recording"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="start recording" />

        <!-- Step 8.2 Please put below the layout modification with the stop recording step -->
    </LinearLayout>

</LinearLayout>

Interface linking

Fields for MainActivity

Add the following into the onCreate method :

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    //adding the start recording in the flow
    add(views, R.id.start_recording);

    add(buttonsInConference, R.id.start_recording);
}

Methods for MainActivity

And create the following methods :

@OnClick(R.id.start_recording)
public void onStartRecording() {

}

Start implementation

Implementation for onStartRecording

public void onStartRecording() {
    VoxeetSDK.recording().start()
            .then((result, solver) -> Log.d(TAG, "onCall: start recording " + result))
            .error(error());
}

Stop recording

Layout editing

Open the index.html file and add the stop-recording-btn button as a child of the actions 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 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 = () => {
    ...recording.start()
        .then(() => {
            ...
            stopRecordingBtn.disabled = false;
    ...

Edit the leaveButton onclick handler to disable the button when the conference is left:

leaveButton.onclick = () => {
    VoxeetSDK.conference.leave()
        .then(() => {
            ...
            stopRecordingBtn.disabled = true;
    ...

Logic implementation

Onclick handler

Open the ui.js file and in the initUI function, write the onclick function for the stopRecordingBtn:

const initUI = () => {
    ...
    stopRecordingBtn.onclick = () => {
        VoxeetSDK.recording.stop()
            .then(() => {
                startRecordingBtn.disabled = false;
                stopRecordingBtn.disabled = true;
                recordStatus.innerText = '';
            })
            .catch((e) => console.log(e))
    };

Layout modification

class ViewController: UIViewController {
    ...

    // Conference UI.
    var stopRecordingButton: UIButton!

    ...
}

Interface linking

...

func initConferenceUI() {
    ...
        
    // Stop recording button.
    stopRecordingButton = UIButton(type: .system) as UIButton
    stopRecordingButton.frame = CGRect(x: 200, y: stopScreenShareButton.frame.origin.y + stopScreenShareButton.frame.height + 16, width: 100, height: 30)
    stopRecordingButton.isEnabled = false
    stopRecordingButton.isSelected = true
    stopRecordingButton.setTitle("STOP RECORD", for: .normal)
    stopRecordingButton.addTarget(self, action: #selector(stopRecordingAction), for: .touchUpInside)
    self.view.addSubview(stopRecordingButton)
}

...

@objc func leaveButtonAction(sender: UIButton!) {
    VoxeetSDK.shared.conference.leave { error in

        ...

        self.stopRecordingButton.isEnabled = false /* Update stopRecording button state */
    }
}

Logic implementation

...

@objc func startRecordingAction(sender: UIButton!) {
    VoxeetSDK.shared.recording.start { error in
        if error == nil {

            ...
            self.stopRecordingButton.isEnabled = true /* Update stopRecording button state */

        }
    }
}

@objc func stopRecordingAction(sender: UIButton!) {
    VoxeetSDK.shared.recording.stop { error in
        if error == nil {
            self.startRecordingButton.isEnabled = true /* Update startRecording button state */
            self.stopRecordingButton.isEnabled = false /* Update stopRecording button state */
        }
    }
}

...

Layout modification

Edit the main_activity.xml with the following items :

<LinearLayout ...>

    ...
    
    <!-- Step 8. Please put below the layout modification with the start recording step -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/start_recording"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="start recording" />

        <!-- Step 8.2 Please put below the layout modification with the stop recording step -->

        <Button
            android:id="@+id/stop_recording"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="stop recording" />
    </LinearLayout>

</LinearLayout>

Interface linking

Fields for MainActivity

Add the following into the onCreate method :

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    //adding the stop recording in the flow
    add(views, R.id.stop_recording);

    add(buttonsInConference, R.id.stop_recording);
}

Methods for MainActivity

And create the following methods :

@OnClick(R.id.stop_recording)
public void onStopRecording() {

}

Stop implementation

Implementation for onStopRecording

public void onStopRecording() {
    VoxeetSDK.recording().stop()
            .then((result, solver) -> Log.d(TAG, "onCall: stop recording " + result))
            .error(error());
}