質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

Node.jsのStreamをつかって復数の動画から1つの動画を選択して再生する仕組み

TMoon
TMooooon

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

139閲覧

投稿2022/05/25 02:08

編集2022/05/26 08:37

実現したいこと

ローカルフォルダに保存されている復数の動画ファイルから1つを選択し、フロントエンドで動画を再生したいと考えています。

作成したコード

下記のようなコードを作成しました。
実際にNode.js、EJSを使用して、動画のパス部分を可変にして、フロントエンドから選択できるようにコード作成しました。

javascript

var fs = require('fs'); var glob = require("glob") var express = require("express"); const port = 3000; var app = express(); var videoPath = ""; app.set("view engine", "ejs"); app.get('/', function (req, res) { res.render('./sample.ejs', { //ファイルのリストを渡す files: mp4files = glob.sync("video/*.mp4"), path: videoPath, }); }); app.get('/renderVideo', function (req, res) { const path = videoPath const stat = fs.statSync(path) const fileSize = stat.size const range = req.headers.range if (range) { const parts = range.replace(/bytes=/, "").split("-") const start = parseInt(parts[0], 10) const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1 const chunksize = (end - start) + 1 const file = fs.createReadStream(path, { start, end }) const head = { 'Content-Range': `bytes ${start}-${end}/${fileSize}`, 'Accept-Ranges': 'bytes', 'Content-Length': chunksize, 'Content-Type': 'video/mp4', } res.writeHead(206, head); file.pipe(res); } else { const head = { 'Content-Length': fileSize, 'Content-Type': 'video/mp4', } res.writeHead(200, head) fs.createReadStream(path).pipe(res) } }); var bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: false })); app.post('/getMp4Name', function (req, res) { videoPath = req.body.mp4 res.redirect("/") console.log("videoPath : ", videoPath) }); app.listen(port, () => console.log('app listening on port 3000!'))

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Test Application</title> </head> <body> <!-- 保存されている動画のファイル名を取得 --> <div> <form method="POST" id="tableForm" action="/getMp4Name"> <select class="mp4" name="mp4"> <% for (var i=0; i<files.length; i++){ %> <option value=<%=files[i] %> ><%=files[i] %> </option> <%} %> </select> <input type="submit"> </form> </div> <!-- 動画表示 --> <figure> <video id="displayVideo" controls style="max-width: 500px;"> <source src="http://localhost:3000/renderVideo/" type="video/mp4" /> </video> </figure> </body> </html>

参考にしたこと

上記のコードは下記のリンクにある説明を参考にしました。
Video Stream With Node.js and HTML5
こちらではNode.jsのStreamをつかい、パスは決め打ちで単体の動画を再生する方法について説明されています。

/videoでGETされたときに下記が呼び出され、HTMLで表示されます。

javascript

//Node.js app.get('/video', function(req, res) { //ここのパスを可変にした。 const path = 'assets/sample.mp4' const stat = fs.statSync(path) const fileSize = stat.size const range = req.headers.range if (range) { const parts = range.replace(/bytes=/, "").split("-") const start = parseInt(parts[0], 10) const end = parts[1] ? parseInt(parts[1], 10) : fileSize-1 const chunksize = (end-start)+1 const file = fs.createReadStream(path, {start, end}) const head = { 'Content-Range': `bytes ${start}-${end}/${fileSize}`, 'Accept-Ranges': 'bytes', 'Content-Length': chunksize, 'Content-Type': 'video/mp4', } res.writeHead(206, head); file.pipe(res); } else { const head = { 'Content-Length': fileSize, 'Content-Type': 'video/mp4', } res.writeHead(200, head) fs.createReadStream(path).pipe(res) } });

HTML

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

試したこと、考えていること

先程のリンクを参考に、path部分を可変にして(フロントエンドから選択できるようにして)改良してみました。しかし動画を切り替えることができませんでした。
パスが変更されたあと、下記のようなエラーコードがでました。

RangeError [ERR_OUT_OF_RANGE]: The value of "start" is out of range. It must be <= "end"

推測ですが先ほど紹介したコードで、パスを変更する前にapp.get内でpipe()してレスポンスを返している部分をunpipe()する必要があると考えました。

javascript

file.pipe(res);

質問したいこと

上記のやり方で、動画のパスを切り替えてStreamするためにはどのような処理が必要でしょうか?

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

miyabi-sun

2022/05/25 05:29 編集

問題というのは「理想」と「現実」のギャップを指します。 理想は「path部分を可変にして(フロントエンドから選択できるようにして)改良してみました。」で 現実は「しかし動画を切り替えることができませんでした。」ですね。 コードは書いたようにしか動いてくれません。 恐らく「技術力不足等の要因で、言ってることとやってる事が違う」状態になってるのが問題の根本と推測されます。 しかし今回の質問文のように過去の動く時点のコードを見せられても、 これじゃ「理想と過去」だよって話になってしまうんですよね。 問題は「理想と現実」のギャップなので、これは問題とは呼べないし、回答もアドバイスもし辛いです。 というわけで「駄目になった時点のコード」を載せましょう。 これで「理想と現実」を比較出来るようになるので回答者側がぐっと回答しやすくなります。 最初のプロトタイプのコードは、それに対する比較として役に立つので、 そのまま追加するだけで大丈夫です。
TMoon

2022/05/25 05:49

コメントありがとうございます。 > 「技術力不足等の要因で、言ってることとやってる事が違う」 その通りです。 再度、「理想と現実」がはっきりするよう質問を編集させていただきます。
miyabi-sun

2022/05/25 08:03

対応ありがとうございます。 ぐっと良くなりましたね!
TMoon

2022/05/25 08:13

Qiitaの記事(「何故teratailは叩かれるのか」)を読まさせていただきました。普段Qiitaやnoteなどで文章を書くのですが、質問する際の文章は下手くそなのだと認識しました。 今後は注意して質問文をねりたいと思います。 ご指導ありがとうございました!

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。