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

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

Edit Info.plist

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

XML/HTML/SVG
XML/HTML/SVG
<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

XML/HTML/SVG
XML/HTML/SVG
<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

TypeScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import LiveMediaPublisher = require("sf-core/ui/livemediapublisher");
import Application = require('sf-core/application');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myLiveMediaPublisher: LiveMediaPublisher;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar, myMenu } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
// Camera permission must be granted before calling startPreview method
this.myLiveMediaPublisher.startPreview();
// Start live streaming
setTimeout(() => {
this.myLiveMediaPublisher.start();
}, 2000);
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.myLiveMediaPublisher = new LiveMediaPublisher({
flexGrow: 1,
outputUrl: "rtmp://...",
onChange: (params) => {
console.log(params);
}
});
this.layout.addChild(this.myLiveMediaPublisher, "myLiveMediaPublisher", null, {
flexGrow: 1
});
}