LiveMediaPublisher

API Reference: UI.LiveMediaPublisher

LiveMediaPublisher is a live streaming publisher. It is used for audio and video playback in RTMP/RTMPT/RTSP/HTTP/TCP/UDP/FILE format.

Original iOS library: https://github.com/NodeMedia/NodeMediaClient-iOS
Original Android library: https://github.com/NodeMedia/NodeMediaClient-Android

Edit Info.plist

You should add camera and microphone permission to workspace/config/iOS/Info.plist

<key>NSCameraUsageDescription</key>
<string>Camera usage description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone usage description</string>

Edit AndroidManifest.xml file

You have to edit your AndroidManifest.xml file under workspace/config/Android.\ Add below lines

<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.FLASHLIGHT"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Android Permissions

You should ensure that required permissions are granted before starting live streaming. Please visit this guide. It helps you to request permissions at runtime.

LiveMediaPlayer Event Callback

You can listen the changes using onChange callback. Events are listed below.

LiveMediaPublisher Events

• 2000: Connecting to server
• 2001: Connect successfully and start streaming
• 2002: Streaming failed
• 2003: Connecting to server
• 2004: Streaming ended
• 2005: Network anomaly
• 2100: Network congestion
• 2101: Network recovery, smooth release

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics

import PageSampleDesign from "generated/pages/page3";
import { Route, Router } from "@smartface/router";
import { styleableComponentMixin } from '@smartface/styling-context'; 
import LiveMediaPublisher from "@smartface/native/ui/livemediapublisher";


class StyleableLiveMediaPublisher extends styleableComponentMixin(LiveMediaPublisher) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
  myLiveMediaPublisher: StyleableLiveMediaPublisher;

  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'ROW',
              justifyContent: 'CENTER',
              alignItems: 'CENTER'
            }
        }
    })
  }

  onShow() {
    super.onShow();
    // Camera permission must be granted before calling startPreview method
    this.myLiveMediaPublisher.startPreview();

    // Start live streaming
    setTimeout(() => {
        this.myLiveMediaPublisher.start();
    }, 2000);
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();

    this.myLiveMediaPublisher = new StyleableLiveMediaPublisher({
        flexGrow: 1,
        outputUrl: "rtmp://...",
        onChange: (params) => {
          console.log(params);
        },
      });
    
      this.addChild(
        this.myLiveMediaPublisher,
        "myLiveMediaPublisher",
        null,
        {
          flexGrow: 1,
        }
      );
  }
}