Capture and Preview Local Media

Note

About the code examples for the Control Media Capture section:

For .NET MAUI, use the C# code.
For macOS, use the iOS code.

Control Media Capture

To start capturing media, invoke the Start method of your App.LocalMedia implementation. This method is inherited from the FM.LiveSwitch.RtcLocalMedia<T> base class; you don't have to implement it yourself. The Start method returns a promise, which resolves when the instance begins to capture data from the user's camera and microphone. If media can't be captured, then the promise is rejected. You should always specify a reject action, so that you can be notified if an error occurs. Starting media capture is demonstrated below.

localMedia.Start().Then((FM.LiveSwitch.LocalMedia lm) =>
{
    FM.LiveSwitch.Log.Info("Local Media has started successfully!");
}).Fail((Exception ex) =>
{
    FM.LiveSwitch.Log.Error("Local Media has failed to start");
});

localMedia.start().then((fm.liveswitch.LocalMedia lm) -> {
    System.out.println("media capture started");
}).fail((Exception ex) -> {
    System.out.println(ex.getMessage());
});

localMedia.start().then(resolveActionBlock: { (lm:FMLiveSwitchLocalMedia) in
    print("media capture started")
}).fail(rejectActionBlock: { (ex:NSException) in
    print(ex.reason)
})

localMedia.start().then(function(lm) {
    console.log("media capture started");
}).fail(function(ex) {
    console.log(ex.message);
});

Stopping capture works the same way. Invoke the Stop method of your App.LocalMedia class to stop capturing camera and microphone data. Again, this returns a promise, which you can use to determine when the media capture has stopped.

localMedia.Stop().Then((FM.LiveSwitch.LocalMedia lm) =>
{
    FM.LiveSwitch.Log.Info("media capture stopped");
}).Fail((Exception ex) =>
{
    FM.LiveSwitch.Log.Error(ex.Message);
});

localMedia.stop().then((fm.liveswitch.LocalMedia lm) -> {
    System.out.println("media capture stopped");
}).fail((Exception ex) -> {
    System.out.println(ex.getMessage());
});

localMedia.stop().then(resolveActionBlock: { (lm:FMLiveSwitchLocalMedia) in
    print("media capture stopped")
}).fail(rejectActionBlock: { (ex:NSException) in
    print(ex.reason)
})

localMedia.stop().then(function(lm) {
    console.log("media capture stopped");
}).fail(function(err) {
    console.log(err.message);
});

You can start and stop your local media instance as many times as necessary. When you are completely finished with the local media instance, you should destroy it by invoking its Destroy method. This ensures that any input devices are released back to the system.

localMedia.Destroy();

localMedia.destroy();

localMedia.destroy()

localMedia.destroy();

Display a Local Preview

Now that you know how to capture data from a user's camera and microphone, you want to be able to show the user a preview of the video that they are sending out. The easiest way to do this is to let LiveSwitch handle it. You can do this by assigning the user's local media to an instance of FM.LiveSwitch.LayoutManager, which is a class to manage the local and remote video feeds for a video conference.

The specific LayoutManager instance that you should use varies based on your platform but all of the implementations work in largely the same way. Before a video session starts, you create an instance of your layout manager class and pass it a container parameter. The container is used as a canvas for the layout manager and controls the dimensions of displayed video. For example, if you assign the layout manager a 400x400 container and there are four people in a video session, the layout manager draws each person's video in a 200x200 block.

The code samples below show how to initialize a LayoutManager instance for each platform. Note that the API is identical except for the types of objects used.

#if WINFORMS
var layoutManager = new FM.LiveSwitch.WinForms.LayoutManager((System.Windows.Forms.Control)container);
#else // WPF
var layoutManager = new FM.LiveSwitch.Wpf.LayoutManager((System.Windows.Controls.Canvas)container);
#endif

fm.liveswitch.android.LayoutManager layoutManager = new fm.liveswitch.android.LayoutManager((android.view.ViewGroup)container);

var layoutManager = FMLiveSwitchCocoaLayoutManager(container as UIView)

var layoutManager = new fm.liveswitch.DomLayoutManager(document.getElementById("my-container"));

var layoutManager = FMLiveSwitchCocoaLayoutManager(container as NSView)

The LiveSwitch.Unity's implementation of LayoutManager is component based. In the following example, we are using the gameObject's RectTransform to display the local preview.

private RectTransform panelRectTransform;
panelRectTransform = GetComponent<RectTransform>();
.
.
.
var layoutManager = new FM.LiveSwitch.Unity.LayoutManager(panelRectTransform));

Once you have created a LayoutManager instance, you can assign the local view from your App.LocalMedia instance to it. You first retrieve the view by accessing the View property of the App.LocalMedia instance. This returns an object of an appropriate type for your platform. You can now assign this view to the layout manager by invoking the SetLocalView method, demonstrated below.

layoutManager.SetLocalView(localMedia.View);

layoutManager.setLocalView(localMedia.getView());

layoutManager.setLocalView(localMedia.view())

layoutManager.setLocalView(localMedia.getView());

layoutManager.setLocalView(localMedia.view())

layoutManager.SetLocalView(localMedia.view);

When you are done with a media session, you also want to remove this view from the layout manager. This is done by invoking the UnsetLocalView method of the layout manager.

layoutManager.UnsetLocalView();

layoutManager.unsetLocalView();

layoutManager.unsetLocalView()

layoutManager.unsetLocalView();

layoutManager.unsetLocalView()

layoutManager.UnsetLocalView();