Video Streaming Example 002
This is a simple setup I have on my NAS to stream video and music to either a browser or to VLC. It uses this VideoStream PHP class. You can download it all here in this ZIP file.
Streaming Media
<?php
require_once("VideoStream.php");
$qs = $_SERVER["QUERY_STRING"];
$qs = urldecode($qs);
if( ! file_exists($qs) ) {
http_response_code(404);
echo "404";
exit();
}
$vs = new VideoStream($qs);
$vs->start();Serving Playlists
<?php
$qs = $_SERVER["QUERY_STRING"];
$qs = urldecode($qs);
if( ! is_dir($qs) ) {
http_response_code(404);
echo "404 is not a dir";
exit();
}
$req = $_SERVER['PHP_SELF'];
$srv = $_SERVER['SERVER_NAME'];
$reqb = preg_replace('@^/+@','',dirname($req));
$d = $qs;
$xs = array_merge(glob("$d/*.mp4"),glob("$d/*.m4a"));
foreach($xs as $x) {
$y = urlencode($x);
echo "http://$srv/$reqb/stream.php?$y\n";
}Simple Frontend
Nothing fancy, but does all I need. Subdirectories are stored in separate sections and expand/collapse when their title is clicked.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'/>
<title>Videos</title>
</head>
<body>
<?php
$mp4s = array_merge(glob("*.mp4"),glob("*.m4a"),glob("*.mp3"));
$mp4ds = glob("*/");
echo "<section>\n";
echo "<h1>/</h1>\n";
echo "<ul>\n";
foreach($mp4s as $mp4) {
echo "<li><a href='stream.php?$mp4'>$mp4</a></li>\n";
}
echo "</ul>\n";
echo "</section>\n";
foreach($mp4ds as $d) {
$d = rtrim($d,"/");
$xs = array_merge(glob("$d/*.mp4"),glob("$d/*.m4a"),glob("$d/*.mp3"));
if( count($xs) > 0 ) {
echo "<section class='collapse'>\n";
echo "<h1>$d</h1>\n";
if( count($xs) > 1 ) {
echo "<p><a href='playlist.php?$d' class='playlist'>$d.m3u</a></p>\n";
}
echo "<ul>\n";
foreach($xs as $mp4) {
echo "<li><a href='stream.php?$mp4'>$mp4</a></li>\n";
}
echo "</ul>\n";
echo "</section>\n";
}
}
?>
</body>
<script>
window.q = (x,y=document) => y.querySelector(x)
window.qq = (x,y=document) => Array.from(y.querySelectorAll(x))
const sections = qq("section")
sections.forEach( s => {
const h1 = q("h1",s)
if( h1 ) {
h1.addEventListener("click", e => {
e.preventDefault()
s.classList.toggle("collapse")
})
}
})
</script>
<style>
body {
background-color: #007;
}
section.collapse {
background-color: #ccc;
}
section.collapse ul {
display: none;
}
section.collapse p {
display: none;
}
section p {
padding-left: 1rem;
}
section ul {
list-style-type: none;
}
section {
position: relative;
padding: 0.3rem;
margin: 0.5rem;
border: 1px solid black;
box-shadow: 0.5rem 0.5rem 0.5rem black;
background-color: white;
color: black;
}
section h1 {
width: 100%;
cursor: pointer;
}
section h1:hover {
color: #070;
}
section.collapse:hover {
background-color: #dfd;
}
a {
text-decoration: none;
}
/* Media */
a[href$=mp3] {
color: #700;
}
a[href$=m4a] {
color: #070;
}
a[href$=mp4] {
color: #007;
}
a[href$=mp3]::before {
content: "🎵 ";
}
a[href$=m4a]::before {
content: "🎵 ";
}
a[href$=mp4]::before {
content: "🎥 ";
}
/* Playlist */
a.playlist {
color: #505;
}
a.playlist::before {
content: "🎶 ";
}
</style>
</html>
VideoStream.php
I've pasted this here for convenience.
<?php
/**
* Description of VideoStream
*
* @author Rana
* @link http://codesamplez.com/programming/php-html5-video-streaming-tutorial
*/
class VideoStream
{
private $path = "";
private $stream = "";
private $buffer = 102400;
private $start = -1;
private $end = -1;
private $size = 0;
function __construct($filePath)
{
$this->path = $filePath;
}
/**
* Open stream
*/
private function open()
{
if (!($this->stream = fopen($this->path, 'rb'))) {
die('Could not open stream for reading');
}
}
/**
* Set proper header to serve the video content
*/
private function setHeader()
{
ob_get_clean();
header("Content-Type: video/mp4");
header("Cache-Control: max-age=2592000, public");
header("Expires: ".gmdate('D, d M Y H:i:s', time()+2592000) . ' GMT');
header("Last-Modified: ".gmdate('D, d M Y H:i:s', @filemtime($this->path)) . ' GMT' );
$this->start = 0;
$this->size = filesize($this->path);
$this->end = $this->size - 1;
header("Accept-Ranges: 0-".$this->end);
if (isset($_SERVER['HTTP_RANGE'])) {
$c_start = $this->start;
$c_end = $this->end;
list(, $range) = explode('=', $_SERVER['HTTP_RANGE'], 2);
if (strpos($range, ',') !== false) {
header('HTTP/1.1 416 Requested Range Not Satisfiable');
header("Content-Range: bytes $this->start-$this->end/$this->size");
exit;
}
if ($range == '-') {
$c_start = $this->size - substr($range, 1);
}else{
$range = explode('-', $range);
$c_start = $range[0];
$c_end = (isset($range[1]) && is_numeric($range[1])) ? $range[1] : $c_end;
}
$c_end = ($c_end > $this->end) ? $this->end : $c_end;
if ($c_start > $c_end || $c_start > $this->size - 1 || $c_end >= $this->size) {
header('HTTP/1.1 416 Requested Range Not Satisfiable');
header("Content-Range: bytes $this->start-$this->end/$this->size");
exit;
}
$this->start = $c_start;
$this->end = $c_end;
$length = $this->end - $this->start + 1;
fseek($this->stream, $this->start);
header('HTTP/1.1 206 Partial Content');
header("Content-Length: ".$length);
header("Content-Range: bytes $this->start-$this->end/".$this->size);
}
else
{
header("Content-Length: ".$this->size);
}
}
/**
* close curretly opened stream
*/
private function end()
{
fclose($this->stream);
exit;
}
/**
* perform the streaming of calculated range
*/
private function stream()
{
$i = $this->start;
set_time_limit(0);
while(!feof($this->stream) && $i <= $this->end) {
$bytesToRead = $this->buffer;
if(($i+$bytesToRead) > $this->end) {
$bytesToRead = $this->end - $i + 1;
}
$data = fread($this->stream, $bytesToRead);
echo $data;
flush();
$i += $bytesToRead;
}
}
/**
* Start streaming video content
*/
function start()
{
$this->open();
$this->setHeader();
$this->stream();
$this->end();
}
}