Videopufferung und -streaming in NodeJS

[ad_1]

In diesem Tutorial zeigen wir Ihnen, wie Sie Video-Streaming und Pufferung erstellen können Youtube in NodeJS. Bei YouTube ist Ihnen aufgefallen, dass nicht das gesamte Video auf einmal im Browser heruntergeladen wird. Nur 10–15 Sekunden des Videos wurden im Browser heruntergeladen. Und weitere werden heruntergeladen, während der Benutzer weiter zuschaut.

Dieselbe Technik wie bei Netflix, bei der Sie sich nur die 10–15 Sekunden des Videos ansehen und die nächsten 10 Sekunden beim Anschauen abgerufen werden. Diese Technik ist in zweierlei Hinsicht nützlich:

  1. Erstens bietet es eine Sicherheitsebene. Sie schreiben den direkten Pfad des Videos nicht in das
  2. Zweitens spart es Bandbreite. Wenn eine Datei 100 MB groß ist, kann der Benutzer beim Start nur 1 MB herunterladen. Der Benutzer kann mit dem Ansehen von 1 MB beginnen und die nächsten MB werden automatisch in regelmäßigen Abständen heruntergeladen. Der Benutzer muss nicht warten, bis ganze 100 MB heruntergeladen sind.

Lass uns anfangen

Erstellen Sie zunächst einen leeren Ordner auf Ihrem Computer. Stell sicher dass du hast NodeJS in Ihrem System installiert. Öffnen Sie die Eingabeaufforderung oder das Terminal in diesem Ordner und führen Sie darin den folgenden Befehl aus:

> npm install express fs ejs

äußern Modul wird für das Routing verwendet. fs steht für File System, dieses Modul wird zum Lesen der Videodatei verwendet. ejs ist eine Template-Engine, die zum Rendern der HTML-Datei verwendet wird. Wir zeigen das Video in einem

Nachdem Sie die oben genannten Befehle ausgeführt haben, erstellen Sie eine Datei mit dem Namen server.js. Hier erledigen wir die gesamte Streaming- und Pufferungsarbeit. Schreiben Sie den folgenden Code in diese Datei:

const app = require("express")()
const fs = require("fs")

app.set("view engine", "ejs")

app.get("/", function (request, result) {
  result.render("video");
})

app.listen(3000, function () {
  console.log("Server started.")
})

Speichern Sie die Datei und führen Sie die URL aus: http://localhost:3000 im Browser. Möglicherweise wird in der Datei ein Fehler angezeigt video.ejs in nicht gefunden in der Ansichten Ordner. Sie müssen einen Ordner mit dem Namen erstellen Ansichten und erstellen Sie in diesem Ordner eine Datei mit dem Namen video.ejs.

Es folgt der Code von Ansichten/video.ejs Datei.

<video id="videoPlayer" width="650" controls>
	<source src="http://localhost:3000/video" type="video/mp4" />
</video>

Sie sehen, dass wir den direkten Pfad des Videos nicht festgelegt haben. Stattdessen haben wir den Pfad unseres API-Endpunkts geschrieben, der die Videodaten zurückgibt.

Puffern Sie das Video

Jetzt müssen wir einen API-Endpunkt erstellen, der diese Anfrage verarbeitet. Erstellen Sie die folgende GET-Route in Ihrem server.js Datei.

app.get("/video", function (req, res) {
  // Ensure there is a range given for the video
  const range = req.headers.range
  if (!range) {
    res.status(400).send("Requires Range header")
  }

  // get video stats (about 100MB)
  const videoPath = "video.mp4"
  const videoSize = fs.statSync(videoPath).size

  // Parse Range
  // Example: "bytes=32324-"
  const CHUNK_SIZE = 10 ** 6 // 1MB
  const start = Number(range.replace(/\D/g, ""))
  const end = Math.min(start + CHUNK_SIZE, videoSize - 1)

  // Create headers
  const contentLength = end - start + 1
  const headers = {
    "Content-Range": `bytes ${start}-${end}/${videoSize}`,
    "Accept-Ranges": "bytes",
    "Content-Length": contentLength,
    "Content-Type": "video/mp4",
  }

  // HTTP Status 206 for Partial Content
  res.writeHead(206, headers)

  // create video read stream for this particular chunk
  const videoStream = fs.createReadStream(videoPath, { start, end })

  // Stream the video chunk to the client
  videoStream.pipe(res)
})

** Der Operator wird verwendet, um den ersten Operanden mit dem zweiten Operanden zu potenzieren. So können Sie in NodeJS eine Video-Streaming- und Pufferungs-Engine erstellen. Zu jeder Zeile wurden zur Erläuterung Kommentare hinzugefügt. Wenn Sie die Seite jetzt aktualisieren, wird das Video mit Puffer angezeigt. Wenn Sie bei der Befolgung dieser Anleitung auf Probleme stoßen, lassen Sie es mich bitte wissen.


Beitragsaufrufe: 26

[ad_2]

Schlagwörter: , , ,