What You’ll Build (React Native + Shoutcast Net Video Server)

By the end of this tutorial you’ll have a React Native app that:

• Plays your live stream using a stable HTTPS (SSL) stream URL
• Shows a simple Now Playing / program info panel (great for DJs and stations)
• Handles common “broadcaster reality” needs like fallback content via AutoDJ
• Is ready to grow with unlimited listeners on a flat-rate plan (starting at $4/month)

Architecture (simple and broadcaster-friendly)

Your setup will look like this:

• Encoder (OBS, vMix, Wirecast, mobile encoder) sends your live feed to your server
• Shoutcast Net Video Server distributes the stream globally with SSL, reliability, and scale
• React Native app plays the stream and displays metadata / program info

Why broadcasters prefer Shoutcast Net’s flat-rate model

If you’ve looked at Wowza, you’ve probably seen the catch: expensive per-hour/per-viewer billing can balloon costs as your audience grows. Shoutcast Net is built for real-world broadcasting with predictable pricing and a platform that’s designed to stream from any device to any device.

You also get modern flexibility for production workflows: any stream protocols to any stream protocols (RTMP, RTSP, WebRTC, SRT, etc), plus options to Restream to Facebook, Twitch, YouTube when you want multi-platform reach.

Step 2: Get Your Stream URL and Test Playback

Next, you’ll grab the stream URL your React Native app will play and confirm it works in a normal player before you write any code. This saves hours of debugging later.

1) Locate your stream endpoint

From your Shoutcast Net service details (welcome email or panel), find:

• Hostname / IP
• Port
• Stream path (often /stream, /live, /hls.m3u8, etc.)
• SSL URL (preferred for mobile apps)

For mobile apps, prefer HTTPS/SSL streaming URLs whenever possible. Mobile platforms are increasingly strict about non-HTTPS media.

2) Test playback in a desktop player first

Before connecting React Native, test your stream in a reliable player like VLC.

# VLC quick test
# Media → Open Network Stream → paste your SSL stream URL
# Example formats you might see:
https://YOUR-HOST:PORT/stream
https://YOUR-HOST:PORT/hls.m3u8

If VLC plays it, you’re in great shape. If not, fix the stream at the source (encoder config, credentials, path) before moving to the app.

3) Encoder notes (OBS example)

If you’re streaming video from OBS, you’ll typically push via RTMP/SRT (depending on your workflow), then your server outputs a playback format your app can consume. The key advantage with Shoutcast Net is flexibility: any stream protocols to any stream protocols (RTMP, RTSP, WebRTC, SRT, etc), so you can choose what’s best for your setup.

Step 4: Add a Video Player and Connect the Stream

Now you’ll add a player component and connect your Shoutcast Net stream URL. For Expo-based projects, expo-av is a reliable starting point. If you need more advanced playback features later, you can switch to other libraries—but get the stream playing first.

1) Install expo-av

npx expo install expo-av

2) Add the player to App.js (or your screen)

Replace your App.js with a simple player screen. Paste your SSL stream URL where noted.

import React, { useMemo, useState } from "react";
import { SafeAreaView, View, Text, Pressable, StyleSheet } from "react-native";
import { Video, ResizeMode } from "expo-av";

export default function App() {
  // Replace with your Shoutcast Net playback URL (prefer HTTPS/SSL)
  const STREAM_URL = useMemo(() => "https://YOUR-HOST:PORT/hls.m3u8", []);

  const [statusText, setStatusText] = useState("Ready");
  const [shouldPlay, setShouldPlay] = useState(true);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>My Station Live</Text>

      <View style={styles.playerWrap}>
        <Video
          style={styles.video}
          source={{ uri: STREAM_URL }}
          useNativeControls
          shouldPlay={shouldPlay}
          resizeMode={ResizeMode.CONTAIN}
          onError={(e) => setStatusText("Playback error. Check stream URL/SSL.")}
          onPlaybackStatusUpdate={(s) => {
            if (!s || !("isLoaded" in s)) return;
            if (!s.isLoaded) setStatusText("Loading...");
            else if (s.isBuffering) setStatusText("Buffering...");
            else if (s.isPlaying) setStatusText("Live");
            else setStatusText("Paused");
          }}
        />
      </View>

      <View style={styles.panel}>
        <Text style={styles.label}>Status: <Text style={styles.value}>{statusText}</Text></Text>
        <Pressable style={styles.btn} onPress={() => setShouldPlay((v) => !v)}>
          <Text style={styles.btnText}>{shouldPlay ? "Pause" : "Play"}</Text>
        </Pressable>
      </View>

      <Text style={styles.footer}>
        Built to stream from any device to any device.
      </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#0b0f14", padding: 16 },
  title: { color: "#fff", fontSize: 22, fontWeight: "700", marginBottom: 12 },
  playerWrap: { borderRadius: 12, overflow: "hidden", borderWidth: 1, borderColor: "#2b2f36" },
  video: { width: "100%", height: 220, backgroundColor: "#000" },
  panel: { marginTop: 14, padding: 14, borderRadius: 12, backgroundColor: "#111827", borderWidth: 1, borderColor: "#2b2f36" },
  label: { color: "#cbd5e1", marginBottom: 10 },
  value: { color: "#fbbf24", fontWeight: "700" },
  btn: { backgroundColor: "#fbbf24", paddingVertical: 10, borderRadius: 10, alignItems: "center" },
  btnText: { color: "#111827", fontWeight: "800" },
  footer: { color: "#94a3b8", marginTop: 14, fontSize: 12 }
});

3) Latency and “live feel”

For interactive broadcasts (chat, Q&A, live auctions, shout-outs), aim for very low latency 3 sec where your workflow supports it. Lower latency typically requires specific protocol choices and tuning, but Shoutcast Net’s flexibility helps you adapt as your production grows.

4) Common playback pitfalls (and quick fixes)

• Non-SSL URL: use HTTPS if available; mobile devices may block mixed content.
• Wrong path: confirm the exact stream path (HLS playlist vs mount).
• Geo/network restrictions: test on mobile data and Wi-Fi.
• Encoder not live: start your encoder and verify in VLC first.

Step 6: Go Live, Add AutoDJ Fallback, and Keep 99.9% Uptime

A streaming app is only as good as its reliability. Broadcasters need a plan for encoder crashes, internet drops, and off-hours programming. This is where Shoutcast Net shines: 99.9% uptime, predictable flat-rate pricing, and features like AutoDJ so your station stays online.

1) Go live with your encoder

Start your encoder (OBS/vMix/Wirecast or hardware encoder) and confirm the stream is live in a desktop player. Then test in your app on:

• Wi‑Fi
• Mobile data (LTE/5G)
• Another device (borrow a phone/tablet) to verify “real world” behavior

2) Add AutoDJ fallback for always-on streaming

If you’re running a station, the stream should never go silent. With AutoDJ, your server can automatically play scheduled content when you’re not live—or if your live encoder disconnects.

Enable and configure it here: AutoDJ. Typical broadcaster uses include:

• Radio DJs: AutoDJ playlist overnight, live shows on schedule
• Churches: AutoDJ plays music or past sermons when not live
• Schools: scheduled announcements and playlists between live segments
• Podcasters: loop trailers, best-of clips, or reruns between live rooms

3) Plan for scale: unlimited listeners and predictable cost

When a link goes viral or a community event spikes attendance, you don’t want to watch a billing dashboard. Wowza’s expensive per-hour/per-viewer billing can punish growth. Shoutcast Net’s approach is broadcaster-friendly: flat-rate plans, unlimited listeners, and predictable monthly pricing (starting at $4/month).

4) Security and trust: SSL streaming

Use SSL streaming URLs inside your app whenever possible. It improves compatibility (especially on iOS), reduces network blocks, and signals trust to listeners and app reviewers.

5) Multi-platform reach: restream while your app grows

Your React Native app should be your “home base,” but you can still expand discovery. Many broadcasters Restream to Facebook, Twitch, YouTube while promoting their app for the best listener experience and direct audience relationship.