How to stream video to browser with Kodi

Question

Not sure if this is the correct place to ask this but here goes nothing.

I setup openelec's Kodi on a Raspberry pi2. I uploaded a video and managed to get it to play on a connected TV via HDMI. What I can't seem to figure out is how to have Kodi serve as a media server so I can browse media using my phone's or computer's browser and play it. I've been through the settings available, installed several addons(i.e chorus etc) and I still can't see how to make this happen. Whenever I open a video on my browser after logging into the Kodi web interface, it still plays it on the TV connected to the PI.

Almost all Google results out there talk about casting from device onto TV and chromecast. I want to be able to play this media on my local browser. And no, I can't use the Kodi app because I'm using an un-supported Phone and computer OS.

Hetaerism

Answer 1

In your case, it's better to use plex instead of kodi.

Kodi is not exactly a media server, it works as a media center. However, with plex, you can set up your media center and have access to your media from your web browser.

Try looking for the differences between kodi and plex.

Hastie

In the year 2024 plex seems to be asking for a subscription just to get through the setup phase – Croaky

Answer 2

Chorus should still have an option to play the video in the browser. It seems to not work with Chrome or Firefox anymore, but have a look here: https://github.com/xbmc/chorus2/issues/127

This functionality depends on Flash Player, this feature had been removed from most of the web-browsers. REF: https://support.google.com/chrome/answer/6258784?visit_id=637521928282450874-904852602&rd=1

Faria

Answer 3

I've modified the Chorus web interface to allow streaming with a nodejs process in the background.

1. NodeJS script:

const express = require('express')
const fs = require('fs')
const path = require('path')
const app = express()
const url = require('url')
const gracefulFs = require('graceful-fs')
gracefulFs.gracefulify(fs)

app.get('/video', function(req, res) {
  var q = url.parse(req.url, true).query;
  var filepath = q.src;
  fs.stat(filepath, function(err, stats){
	if (err){
		if (err.code === 'ENOENT'){
			//404 Error if file not found
			res.writeHead(404, {
				"Accept-Ranges" : "bytes",
				"Content-Range" : "bytes " + start + "-" + end + "/" + total,
				"Content-Length" : chunksize,
				"Content-Type" : "video/mp4"
			});
		}
		res.end(err);
	}
	
	var start;
	var end;
	var chunksize;
	var total = stats.size;
	
	var range = req.headers.range;
	if (range) {
		var parts = range.replace(/bytes=/, "").split("-");
		start = parseInt(parts[0], 10);
		end = parts[1] ? parseInt(parts[1], 10) : total - 1;
	} else {
		start = 0;
		end = total - 1;
	}
	
	if (start > end || start < 0 || end > total - 1){
		//error 416 is "Range Not Satisfiable"
		res.writeHead(416, {
			"Accept-Ranges" : "bytes",
			"Content-Range" : "*/" + stats.size,
			"Content-Type" : "video/mp4"
		});
		res.end();
		return;
	}
	
	if (start == 0 && end == (total -1)){
		res.writeHead(200, {
			'Accept-Ranges': 'bytes',
			'Content-Range': `bytes ${start}-${end}/${total}`,
			'Content-Length': total,
			'Content-Type': 'video/mp4'
		});
	} else {
		chunksize = (end - start) + 1;
		res.writeHead(206, {
			'Content-Range': `bytes ${start}-${end}/${total}`,
			'Accept-Ranges': 'bytes',
			'Content-Length': chunksize,
			'Content-Type': 'video/mp4'
		});
	}
	var stream = fs.createReadStream(filepath, {
		start : start, 
		end : end
	}).on("open", function() {
		stream.pipe(res);
	}).on("error", function(err) {
		console.log(err);
		res.end(err);
	});
  });
});

app.listen(<port>, function () {
  console.log('Listening on port <port>!');
});

2. Modified the file "Kodi\addons\webinterface.chorus\tpl\MovieView.html" under div id="movie-watch" so:

                <div id="movie-watch" class="tab-pane">

                    <div class="col-1">
						<video id="videoPlayer" controls width="100%" height="90%" preload="metadata">
							<source src="http://<mydomain>:<port>/video?src=<%=encodeURIComponent(file) %>&movieId=<%= movieid %>" type="video/mp4">
						</video>
						<!--
                        <h2>HTML5 player</h2>
                        <p>Codec support is very <a href="https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats" target="_blank">limited in the browser</a>.
                            H.264 video generally works but only with 2 channel audio. Works best in Chrome, may crash browser and/or XBMC!</p>
                        <div class="buttons">
                            <a href="#" class="movie-stream btn" data-player="html5">Launch HTML5 player</a>
                        </div>
                        <br />
                        <h2>VLC player</h2>
                        <p><a href="http://www.videolan.org/vlc/index.html" target="_blank">VLC Player</a> provides an
                            embeddable video player, it will play most videos, but does require you to
                            <a href="http://www.videolan.org/vlc/index.html" target="_blank">download and install</a> extra software.
                            Works well in Chrome and Firefox.</p>
                        <div class="buttons">
                            <a href="#" data-player="vlc" class="movie-stream btn">Launch VLC player</a>
                        </div>-->

3. Modified the file "Kodi\addons\webinterface.chorus\tpl\TvshowView.html" under div id="movie-watch" so:

                <div id="tv-watch" class="tab-pane">

                    <div class="col-1">
						<video id="videoPlayer" controls width="100%" height="90%">
							<source src="http://<mydomain>:<port>/video?src=<%=encodeURIComponent(file) %>&episodeId=<%= episodeid %>" type="video/mp4">
						</video>
						<!--
                        <h2>HTML5 player</h2>
                        <p>Codec support is very <a href="https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats" target="_blank">limited in the browser</a>.
                            H.264 video generally works but only with 2 channel audio. Works best in Chrome, may crash browser and/or XBMC!</p>
                        <div class="buttons">
                            <a href="#" class="tv-stream btn" data-player="html5">Launch HTML5 player</a>
                        </div>
                        <br />
                        <h2>VLC player</h2>
                        <p><a href="http://www.videolan.org/vlc/index.html" target="_blank">VLC Player</a> provides an
                            embeddable video player, it will play most videos, but does require you to
                            <a href="http://www.videolan.org/vlc/index.html" target="_blank">download and install</a> extra software.
                            Works well in Chrome and Firefox.</p>
                        <div class="buttons">
                            <a href="#" data-player="vlc" class="tv-stream btn">Launch VLC player</a>
                        </div>-->

Fete