Skip to main content

Playback a Livestream

Playback a Livestream

Using localhost

To play back your livestream, use the playback url that was created for you by your broadcaster node.


(For example, http://localhost:8080/stream+MY_NAME.html)

Using the Catalyst Dashboard

The Catalyst dashboard (powered by MistServer) simplifies the process of serving a stream. To display your stream, replace the stream name placeholders with the stream name from the Catalyst dashboard on port 4242 and embed the following code in your page.

<div class="mistvideo" id="mistvideo">
<a href="http://localhost:8080/stream+MY_NAME.html" target="_blank">
Click here to play this video
var a = function () {
mistPlay("afptest", {
target: document.getElementById("mistvideo"),
if (!window.mistplayers) {
var p = document.createElement("script");
p.src = "http://localhost:8080/player.js";
p.onload = a;
} else {

Playback in HTML

<script src=""></script>

<video id="my-player" controls style="width: 100%; max-width: 500px" />

const videoEl = document.querySelector("#my-player");
const src = "http://localhost:8080/hls/stream+MY_NAME/index.m3u8";
if (videoEl.canPlayType("application/")) {
// Some browers (safari and ie edge) support HLS natively
videoEl.src = src;
} else if (Hls.isSupported()) {
const hls = new Hls();
} else {
console.error("This is a legacy browser that doesn't support MSE");

Playback in React

import React, { useEffect, useRef } from "react";
import Hls from "hls.js";

export default function VideoPlayer() {
const videoRef = useRef(null);
const src = "http://localhost:8080/hls/stream+MY_NAME/index.m3u8";

useEffect(() => {
let hls;
if (videoRef.current) {
const video = videoRef.current;

if (video.canPlayType("application/")) {
// Some browers (safari and ie edge) support HLS natively
video.src = src;
} else if (Hls.isSupported()) {
// This will run in all other modern browsers
hls = new Hls();
} else {
console.error("This is a legacy browser that doesn't support MSE");

return () => {
if (hls) {
}, [videoRef]);

return (
style={{ width: "100%", maxWidth: "500px" }}

Playback in Swift

import SwiftUI
import AVKit

struct ContentView: View {
private let player = AVPlayer(url: URL(string: "http://localhost:8080/hls/stream+MY_NAME/index.m3u8")!)

var body: some View {
// VideoPlayer comes from SwiftUI
// Alternatively, you can use AVPlayerLayer or AVPlayerViewController
VideoPlayer(player: player)
.onAppear() {

struct ContentView_Previews: PreviewProvider {
static var previews: some View {

Playback in Android

implementation ''

// Create a player instance.
SimpleExoPlayer player = new SimpleExoPlayer.Builder(context).build();
// Set the media item to be played.
// Prepare the player.