1xApi

Posted on Feb 16

Build a Live Football Streaming App in 10 Minutes with JavaScript

#javascript #api #webdev #sports

Ever wanted to build your own football streaming app? With the right API, it's surprisingly easy. In this tutorial, I'll show you how to fetch live match data with streaming links, scores, and team info — all in under 10 minutes.

What We're Building

A simple web page that shows:

🔴 Live football matches with real-time scores
📺 Multiple streaming server links per match
🏆 League info with team logos
📱 Works on any device

The API

We'll use the Football Live Streaming API on RapidAPI. Here's what makes it great:

2-13 streaming servers per match (if one goes down, use another)
50+ leagues — Premier League, La Liga, Champions League, and more
Sub-50ms response time — faster than most sports APIs
Free tier available for testing

Step 1: Get Your API Key

Go to RapidAPI
Click Subscribe (Free plan works)
Copy your X-RapidAPI-Key

Step 2: Fetch Live Matches

async function getLiveMatches() {
  const response = await fetch(
    'https://football-live-streaming-api.p.rapidapi.com/matches?status=live&page=1',
    {
      headers: {
        'X-RapidAPI-Key': 'YOUR_API_KEY',
        'X-RapidAPI-Host': 'football-live-streaming-api.p.rapidapi.com'
      }
    }
  );

  const data = await response.json();
  return data.matches;
}

That's it. One API call gives you everything — scores, team names, logos, league info, and streaming URLs.

Step 3: Display Matches

<!DOCTYPE html>
<html>
<head>
  <title>Live Football</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #0a0a0a; color: #fff; padding: 20px;
    }
    h1 { text-align: center; margin-bottom: 30px; }
    .matches { max-width: 700px; margin: 0 auto; }
    .match {
      background: #1a1a2e; border-radius: 12px; padding: 20px;
      margin-bottom: 16px; border: 1px solid #16213e;
    }
    .league { color: #8892b0; font-size: 13px; margin-bottom: 12px; }
    .teams { display: flex; justify-content: space-between; align-items: center; }
    .team { display: flex; align-items: center; gap: 10px; flex: 1; }
    .team img { width: 32px; height: 32px; }
    .team.away { justify-content: flex-end; text-direction: rtl; }
    .score {
      font-size: 28px; font-weight: 800; color: #64ffda;
      min-width: 80px; text-align: center;
    }
    .live-badge {
      display: inline-block; background: #e74c3c; color: #fff;
      padding: 2px 8px; border-radius: 4px; font-size: 11px;
      font-weight: 700; animation: pulse 1.5s infinite;
    }
    .streams { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
    .stream-btn {
      background: #16213e; color: #64ffda; border: 1px solid #1a365d;
      padding: 6px 14px; border-radius: 6px; cursor: pointer;
      font-size: 12px; text-decoration: none;
    }
    .stream-btn:hover { background: #1a365d; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  </style>
</head>
<body>
  <h1>⚽ Live Football</h1>
  <div class="matches" id="matches">Loading...</div>

  <script>
    const API_KEY = 'YOUR_API_KEY';
    const API_HOST = 'football-live-streaming-api.p.rapidapi.com';

    async function loadMatches() {
      const res = await fetch(
        `https://${API_HOST}/matches?status=live&page=1`,
        { headers: { 'X-RapidAPI-Key': API_KEY, 'X-RapidAPI-Host': API_HOST } }
      );
      const data = await res.json();

      document.getElementById('matches').innerHTML = data.matches.map(m => `
        <div class="match">
          <div class="league">
            ${m.league_name} ${m.match_status === 'live' ? '<span class="live-badge">● LIVE</span>' : ''}
          </div>
          <div class="teams">
            <div class="team">
              <img src="${m.home_team_logo}" alt="${m.home_team_name}" onerror="this.style.display='none'">
              <span>${m.home_team_name}</span>
            </div>
            <div class="score">${m.homeTeamScore || '0'} - ${m.awayTeamScore || '0'}</div>
            <div class="team away">
              <span>${m.away_team_name}</span>
              <img src="${m.away_team_logo}" alt="${m.away_team_name}" onerror="this.style.display='none'">
            </div>
          </div>
          <div class="streams">
            ${m.servers.map((s, i) => `
              <a class="stream-btn" href="${s.url}" target="_blank">▶ ${s.name || 'Server ' + (i+1)}</a>
            `).join('')}
          </div>
        </div>
      `).join('') || '<p style="text-align:center;color:#666">No live matches right now. Try ?status=vs for upcoming.</p>';
    }

    loadMatches();
    setInterval(loadMatches, 60000); // Refresh every minute
  </script>
</body>
</html>

Step 4: Handle Different Stream Types

The API returns 3 types of streams:

Direct Streams (HLS/FLV)

Just play them — works with any video player:

// Using HLS.js
import Hls from 'hls.js';

const hls = new Hls();
hls.loadSource(server.url);  // .m3u8 URL from API
hls.attachMedia(videoElement);

DRM Streams (MPEG-DASH)

Protected streams with clearkey — use Shaka Player:

// URL format: https://stream.example.com/match.mpd|drmScheme=clearkey&drmLicense=...
const [url, params] = server.url.split('|');
const license = new URLSearchParams(params).get('drmLicense');

// Use with Shaka Player or ExoPlayer (Android)

Referer Streams

Require a specific Referer header — handle server-side or with a proxy.

What About Python?

Same API, different language:

import requests

url = "https://football-live-streaming-api.p.rapidapi.com/matches"
headers = {
    "X-RapidAPI-Key": "YOUR_API_KEY",
    "X-RapidAPI-Host": "football-live-streaming-api.p.rapidapi.com"
}

# Get live matches
data = requests.get(url, headers=headers, params={"status": "live"}).json()

for match in data["matches"]:
    home = match["home_team_name"]
    away = match["away_team_name"]
    score = f"{match['homeTeamScore']}-{match['awayTeamScore']}"
    streams = len(match["servers"])
    print(f"🔴 {home} {score} {away} — {streams} streams")

Scaling Up

For production apps, here are some tips:

Cache responses — The API has a 180-second cache. Match your client cache to this.
Use pagination — Don't fetch all matches at once. Use ?page=1, ?page=2, etc.
Filter smartly — Use ?status=live for live-only, ?date=DDMMYYYY for specific dates.
Handle stream fallbacks — If Server 1 fails, switch to Server 2 automatically.
Upgrade when needed — Free plan (100 req/min) is great for testing. PRO ($14.99/mo) handles 20K req/day.

Pricing

Plan	Price	Requests	Use Case
Free	$0	100/min	Testing
PRO	$14.99/mo	20K/day	Small apps
ULTRA	$34.99/mo	55K/day	Production
MEGA	$69.99/mo	2.8M/month	High traffic

Wrapping Up

In under 50 lines of code, we built a functional live football streaming interface. The Football Live Streaming API handles all the heavy lifting — scraping streams, updating scores, managing multiple sources.

Links:

Built by 1xAPI — APIs that just work.

DEV Community