Record the Conference

This tutorial is a part of a series; it comes after 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 with the id recording and in it create:

a button with the id start-recording-btn
a p element with the id record-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 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")
        })
}

Add UI for starting recording in ViewController.swift.

1. In ViewController.swift, add a variable to the ViewController class to refer to the user interface element that will be created in step 2.

class ViewController: UIViewController {
    ...

    // Conference UI.
    var startRecordingButton: UIButton!

    ...
}

2. Modify initConferenceUI to extend the user interface and enable & disable the startRecordingButton as appropriate.

...

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 */

    }
}

3. Add a method to start recording.

...

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

...

1. To modify the layout, edit the main_activity.xml file, adding the following content for Step 6:

<LinearLayout ...>
    ...

    <!-- Step 6. Put the layout changes for the recording step here -->
    <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 6.2 This layout will be upgraded in the stop recording step -->
    </LinearLayout>

</LinearLayout>

2. Modify the interface linking in the MainActivity class in MainActivity.java:

New method for MainActivity:

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

}

Add the following code to 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);
}

3. Add the following logic to the application:

Use the following implementation for onStartRecording:

public void onStartRecording() {
    VoxeetSDK.recording().start()
            .then((result, solver) -> {
            })
            .error((error_in) -> {
                String error_message = "Error";
                if (((ServerErrorException)error_in).error.error_code == 303) {
                    error_message = "Recording already started";
                }
                updateViews();
                Toast.makeText(MainActivity.this, error_message, Toast.LENGTH_SHORT).show();
            });
}

Add a handler for RecordingStatusUpdatedEvent:

@Subscribe(threadMode = ThreadMode.MAIN)
public void onEvent(RecordingStatusUpdatedEvent event) {
    String message = null;
    switch (event.recordingStatus) {
        case "RECORDING": message = "Recording started"; break;
        case "NOT_RECORDING": message = "Recording stopped"; break;
        default: break;
    }
    if (null != message)
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
}

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 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 = () => {
        let recordStatus = document.getElementById("record-status")
        VoxeetSDK.recording.stop()
            .then(() => {
                startRecordingBtn.disabled = false
                stopRecordingBtn.disabled = true
                recordStatus.innerText = ''
            })
            .catch((e) => console.log(e))
    }

Add UI for stopping video in ViewController.swift.

1. In ViewController.swift, add a variable to the ViewController class to refer to the user interface element that will be created in step 2.

class ViewController: UIViewController {
    ...

    // Conference UI.
    var stopRecordingButton: UIButton!

    ...
}

2. Modify initConferenceUI to extend the user interface and enable & disable the stopRecordingButton as appropriate.

...

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 */
    }
}

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

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

        }
    }
}

3. Add a method to stop the recording.

...

@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 */
        }
    }
}

...

1. To modify the layout, edit the main_activity.xml file, adding the following content for Step 6.2:

<LinearLayout ...>
...
<LinearLayout ...>
    ...

        <!-- Step 6.2 This layout will be upgraded in 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>

2. Modify the interface linking in the MainActivity class in MainActivity.java:

New method for MainActivity:

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

}

Add the following code to 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);
}

3. Add the following logic to the application:

Use the following implementation for onStopRecording:

public void onStopRecording() {
    VoxeetSDK.recording().stop()
            .then((result, solver) -> {
            })
            .error(error());
}