Oke, jadi Anda ingin membuat sesuatu berikutnya? Dalam tutorial ini, saya akan menunjukkan cara membuat aplikasi live streaming.

Pada dasarnya yang kita butuhkan adalah server media, klien RTMP, dan klien playback .

(RTMP) Server Media - Server media kami akan menggunakan RTMP. RTMP adalah singkatan dari Real-Time Messaging Protocol (RTMP) dan merupakan protokol untuk streaming audio, video, dan data melalui Internet.

Server HTTP - Server HTTP" adalah istilah lain untuk server Web. Server Web adalah program perangkat lunak yang memetakan permintaan URL dari klien Web (biasanya browser) ke sumber daya yang akan menangani permintaan dan mengembalikan respons ke klien.

Klien web dan server Web menggunakan HTTP untuk berkomunikasi melalui jaringan TCP. Kami akan menggunakan ini untuk melayani file HLS dan FLV kami. (RTMP) Klien - Klien RTMP digunakan untuk memublikasikan streaming langsung ke server RTMP.

• Ini pada dasarnya mengirimkan Permintaan koneksi TCP ke server kemudian server memulai jabat tangan, lalu koneksi RTMP, kemudian klien dapat mulai mengirim paket data.
• RTMP Client menerbitkan data ke RTMP(Media) Server.
• RTMP Server mentranskode data menjadi file FLV atau HLS (dan daftar putar biasanya m3u8 dan ts) dan menyimpannya ke penyimpanan biasanya EFS (Elastic FileSytem) atau EBS (Elastic Block Storage).
• Server HTTP kemudian akan menyajikan file yang ditranskode ke web. Ini akan menangani pengiriman, pembatasan tarif, caching, SSL, dan sebagainya.
• Pemutar Video kemudian akan memutar URL yang disajikan oleh Server HTTP kami. Ini akan menangani buffering dan mengubah bitrate berdasarkan kondisi jaringan pengguna.

Implementasi:

$ # Lets create a new project
$ mkdir rtmp-server && cd rtmp-server
$ npm init
$ npm install node-media-server
$ touch server.js
$ code . # starts vscode on current folder.

Edit package.json add start script

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
   }

Edit server.js

const NodeMediaServer = require('node-media-server')


const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60,
  },
  http: {
    port: 8000,
    allow_origin: '*',
  },
}


var nms = new NodeMediaServer(config)
nms.run()

Kemudian jalankan dengan baik dari terminal Anda.

$ npm run start
2/25/2020 06:46:58 54343 [INFO] Node Media Server v2.1.4
2/25/2020 06:46:58 54343 [INFO] Node Media Rtmp Server started on port: 1935
2/25/2020 06:46:58 54343 [INFO] Node Media Http Server started on port: 8000
2/25/2020 06:46:58 54343 [INFO] Node Media WebSocket Server started on port: 8000

Sekarang Anda memiliki server media. Mari kita uji.

• Anda dapat mengakses panel administrasi dari http://localhost:8000/admin
• Anda dapat menggunakan OBS atau XPLIT untuk mempublikasikan streaming langsung Anda dan Anda dapat menggunakan alamat berikut rtmp://localhost/live/nodeskewela. Kami menggunakan nodekewela sebagai nama aliran Anda untuk kasus ini.
• Menggunakan VLC atau QuickTime player buka alamat ini http://localhost:8000/live/nodeskewela/index.m3u8

Mari kita membangun aplikasi react-native

Pastikan Anda memiliki react-native-cli di mesin Anda.

$ npx react-native init rtmpclient
$ cd rtmpclient
$ npm install https://github.com/michelalbers/react-native-nodemediaclient/tarball/master

Untuk android, tambahkan kode berikut di AndroidManifest.xml Anda.

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

Untuk IOS, tambahkan yang berikut ini di info.plist Anda.

Privacy - Camera Usage Description
Privacy - Microphone Usage Description

Di App.js Anda tambahkan kode berikut.

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  StatusBar,
  Dimensions,
  TouchableOpacity,
  PermissionsAndroid,
} from 'react-native';


import {NodeCameraView} from 'react-native-nodemediaclient';


const styles = StyleSheet.create({
  view: {
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width,
    position: 'relative',
  },
  buttonWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    width: Dimensions.get('window').width,
    height: 50,
    position: 'absolute',
    zIndex: 2,
    bottom: 50,
  },
  button: {
    width: 200,
    height: 40,
    backgroundColor: '#014484',
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 15,
    paddingRight: 15,
  },
  buttonText: {
    color: '#ffffff',
    fontFamily: 'system',
  },
});


class App extends React.Component {
  vb = null;


  state = {
    isStreaming: false,
  };


  videoSettings = {
    preset: 12,
    bitrate: 400000,
    profile: 1,
    fps: 15,
    videoFrontMirror: false,
  };


  cameraSettings = {cameraId: 1, cameraFrontMirror: true};


  audioSettings = {bitrate: 32000, profile: 1, samplerate: 44100};


  channel = 'nodeskwela';


  get height() {
    return Dimensions.get('window').height;
  }


  get width() {
    return Dimensions.get('window').width;
  }


  toggleStream = async () => {
    await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);


    if (this.state.isStreaming) {
      this.vb.stop();
    } else {
      this.vb.start();
    }
    this.setState({
      isStreaming: !this.state.isStreaming,
    });
  };


  render() {
    return (
      <>
        <StatusBar barStyle="dark-content" />
        <View style={styles.view}>
          <NodeCameraView
            style={{
              height: this.height,
              width: this.width,
              zIndex: 1,
              backgroundColor: '#000000',
            }}
            ref={vb => {
              this.vb = vb;
            }}
            outputUrl={`rtmp://YOUR-IP-ADDRESS/live/${this.channel}`}
            camera={this.cameraSettings}
            audio={this.audioSettings}
            video={this.videoSettings}
            autopreview={true}></NodeCameraView>
          <View style={styles.buttonWrapper}>
            <TouchableOpacity onPress  ​={this.toggleStream}>
              <View style={styles.button}>
                <Text style={styles.buttonText}>
                  {this.state.isStreaming
                    ? 'Stop Streaming'
                    : 'Start Streaming'}
                </Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </>
    );
  }
}


export default App;

Ubah ALAMAT IP ANDA dengan Alamat IP pribadi Anda, mis. 192.168.31.194

$ ifconfig # to get your ip address on mac
$ ipconfig # to get your ip address on windows

Mari kita test

npm run android

UI akan terlihat seperti ini

Menggunakan VLC atau QuickTime player buka alamat ini http://localhost:8000/live/nodeskewela/index.m3u8