如何使用 Kodi 将视频流式传输到浏览器

Question

不确定这是不是问这个问题的正确地方，但这里什么都没有。

我在 Raspberry pi2 上设置了 openelec 的 Kodi。我上传了一个视频，并设法让它通过 HDMI 在连接的电视上播放。我似乎无法弄清楚如何让 Kodi 作为媒体服务器，这样我就可以使用手机或计算机的浏览器浏览媒体并播放它。我已经完成了可用的设置，安装了几个插件（即合唱等），但我仍然不知道如何实现这一点。每当我登录 Kodi Web 界面后在浏览器上打开视频时，它仍会在连接到 PI 的电视上播放。

几乎所有 Google 搜索结果都在谈论从设备投射到电视和 chromecast。我希望能够在我的本地浏览器上播放此媒体。不，我无法使用 Kodi 应用，因为我使用的是不受支持的手机和计算机操作系统。

Answer 1

在您的情况下，最好使用 plex 而不是 kodi。

Kodi 不完全是媒体服务器，它充当媒体中心。但是，使用 plex，您可以设置媒体中心并从 Web 浏览器访问您的媒体。

尝试寻找 kodi 和 plex 之间的区别。

Answer 2

Chorus 应该仍然可以选择在浏览器中播放视频。它似乎不再适用于 Chrome 或 Firefox，但请看这里：https://github.com/xbmc/chorus2/issues/127

此功能依赖于 Flash Player，该功能已从大多数网络浏览器中删除。 编号：https://support.google.com/chrome/answer/6258784?visit_id=637521928282450874-904852602&rd=1

Answer 3

我修改了 Chorus Web 界面以允许在后台使用 nodejs 进程进行流式传输。

1. NodeJS 脚本：

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>!');
});

1. 将 div id="movie-watch" 下的文件“Kodi\addons\webinterface.chorus\tpl\MovieView.html”修改为：

                <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>-->

1. 将 div id="movie-watch" 下的“Kodi\addons\webinterface.chorus\tpl\TvshowView.html”文件修改为：

                <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>-->