質問編集履歴

1

実際に作成したコードを添付。質問内容の修正。

2022/05/25 06:15

投稿

TMooooon
TMooooon

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,20 +1,110 @@
1
1
  # 実現したいこと
2
- ローカルフォルダに保存されている復数の動画ファイルから1つを選択し、フロントエンドで動画を再生したい
2
+ ローカルフォルダに保存されている復数の動画ファイルから1つを選択し、フロントエンドで動画を再生したいと考えています。
3
3
 
4
- #### できていること
4
+ # 作成したコード
5
+ 下記のようなコードを作成しました。
6
+ 実際にNode.js、EJSを使用して、動画のパス部分を可変にして、フロントエンドから選択できるようにコード作成しました。
7
+ ```javascript
5
- 動画のパスを決め打ちにして、単体の動画を再生すること
8
+ var fs = require('fs');
9
+ var glob = require("glob")
10
+ var express = require("express");
6
11
 
7
- #### できていないこと
12
+ const port = 3000;
13
+ var app = express();
8
- 復数の動画ファイルから1つを選択したときに再生する動画を切り替えること
14
+ var videoPath = "";
9
15
 
16
+ app.set("view engine", "ejs");
17
+ app.get('/', function (req, res) {
18
+ res.render('./sample.ejs', {
19
+ //ファイルのリストを渡す
20
+ files: mp4files = glob.sync("video/*.mp4"),
21
+ path: videoPath,
22
+ });
23
+ });
24
+
25
+ app.get('/renderVideo', function (req, res) {
26
+ const path = videoPath
27
+ const stat = fs.statSync(path)
28
+ const fileSize = stat.size
29
+ const range = req.headers.range
30
+ if (range) {
31
+ const parts = range.replace(/bytes=/, "").split("-")
32
+ const start = parseInt(parts[0], 10)
33
+ const end = parts[1]
34
+ ? parseInt(parts[1], 10)
35
+ : fileSize - 1
36
+ const chunksize = (end - start) + 1
37
+ const file = fs.createReadStream(path, { start, end })
38
+ const head = {
39
+ 'Content-Range': `bytes ${start}-${end}/${fileSize}`,
40
+ 'Accept-Ranges': 'bytes',
41
+ 'Content-Length': chunksize,
42
+ 'Content-Type': 'video/mp4',
43
+ }
44
+ res.writeHead(206, head);
45
+ file.pipe(res);
46
+
47
+ } else {
48
+ const head = {
49
+ 'Content-Length': fileSize,
50
+ 'Content-Type': 'video/mp4',
51
+ }
52
+ res.writeHead(200, head)
53
+ fs.createReadStream(path).pipe(res)
54
+ }
55
+ });
56
+
57
+ var bodyParser = require('body-parser');
58
+ app.use(bodyParser.urlencoded({ extended: false }));
59
+ app.post('/getMp4Name', function (req, res) {
60
+ videoPath = req.body.mp4
61
+ res.redirect("/")
62
+ console.log("videoPath : ", videoPath)
63
+ });
64
+
65
+ app.listen(port, () => console.log('app listening on port 3000!'))
66
+ ```
67
+
68
+ ```HTML
69
+ <!DOCTYPE html>
70
+ <html lang="ja">
71
+
72
+ <head>
73
+ <meta charset="utf-8" />
74
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
75
+ <title>Test Application</title>
76
+ </head>
77
+
78
+ <body>
79
+ <!-- 保存されている動画のファイル名を取得 -->
80
+ <div>
81
+ <form method="POST" id="tableForm" action="/getMp4Name">
82
+ <select class="mp4" name="mp4">
83
+ <% for (var i=0; i<files.length; i++){ %>
84
+ <option value=<%=files[i] %> ><%=files[i] %>
85
+ </option>
86
+ <%} %>
87
+ </select>
88
+ <input type="submit">
89
+ </form>
90
+ </div>
91
+ <!-- 動画表示 -->
92
+ <figure>
93
+ <video id="displayVideo" controls style="max-width: 500px;">
94
+ <source src="http://localhost:3000/renderVideo/" type="video/mp4" />
95
+ </video>
96
+ </figure>
97
+ </body>
98
+
99
+ </html>
100
+ ```
10
101
 
11
102
  # 参考にしたこと
12
- Node.jsStreamをつかった動画再生の方法は下記のリンクを参考にしました。
103
+ 上記コードは下記のリンクにある説明を参考にしました。
13
- こちらではパスは決め打ちで単体の動画を再生する方法について説明されています。
14
104
  [Video Stream With Node.js and HTML5](https://betterprogramming.pub/video-stream-with-node-js-and-html5-320b3191a6b6)
105
+ こちらではNode.jsのStreamをつかい、パスは決め打ちで単体の動画を再生する方法について説明されています。
15
106
 
16
107
  /videoでGETされたときに下記が呼び出され、HTMLで表示されます。
17
- app.get内に記述されているpasth可変にして復数動画に対応させたいと考えています。
18
108
 
19
109
  ```javascript
20
110
  //Node.js
@@ -66,15 +156,13 @@
66
156
  ```
67
157
 
68
158
  推測ですが先ほど紹介したコードで、パスを変更する前に**app.get内でpipe()してレスポンスを返している部分をunpipe()する必要がある**と考えました。
69
- 動画が別ファイルになるとエラーコードで表示されている「start」と「end」が変わるためです。
70
159
 
71
160
  ```javascript
72
161
  file.pipe(res);
73
162
  ```
74
163
 
75
- # あらためて質問したいこと
164
+ # 質問したいこと
76
165
  上記のやり方で、動画のパスを切り替えてStreamするためにはどのような処理が必要でしょうか?
77
- もしunpipeする必要があるなら、どのようにして実装すればよいでしょうか?
78
166
 
79
167
 
80
168