ブラウザで動画を収録してサーバーへ送るデモを Express.js で作る
薄田達哉 / tatsuyasusukidaこのスクラップの Git リポジトリ
MIT ライセンスでお気軽にご利用ください。
薄田達哉 / tatsuyasusukidaこのスクラップについて
親しい友人兼人生の先輩より質問を頂いたので自分の復習も兼ねて作ってみようと思います。
薄田達哉 / tatsuyasusukidaワークスペースの準備
mkdir express-movie-upload
cd express-movie-upload
npm init -y
npm install express
touch main.js index.html
npx nodemon main.js
コーディング
const express = require("express");
const path = require("path");
const fsPromises = require("fs/promises");
const app = express();
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "index.html"));
});
app.post("/api/upload/blob", async (req, res, next) => {
try {
const rawBody = await new Promise((resolve, reject) => {
const chunks = [];
req.on("data", (chunk) => chunks.push(chunk));
req.on("end", () => resolve(Buffer.concat(chunks)));
req.on("error", (err) => reject(err));
});
const outputDirectory = path.join(__dirname, "tmp");
const outputFilename = Date.now() + req.query.extname;
const outputPath = path.join(outputDirectory, outputFilename);
await fsPromises.mkdir(outputDirectory, { recursive: true });
await fsPromises.writeFile(outputPath, rawBody);
res.status(201).end();
} catch (err) {
next(err);
}
});
app.post("/api/upload/dataurl", express.json(), async (req, res, next) => {
try {
const recordedVideoBuffer = Buffer.from(
req.body.dataUrl.split("base64,")[1],
"base64"
);
const outputDirectory = path.join(__dirname, "tmp");
const outputFilename = Date.now() + req.body.extname;
const outputPath = path.join(outputDirectory, outputFilename);
await fsPromises.mkdir(outputDirectory, { recursive: true });
await fsPromises.writeFile(outputPath, recordedVideoBuffer);
res.status(201).end();
} catch (err) {
next(err);
}
});
app.listen(3000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
ブラウザで動画を収録してサーバーへ送るデモを Express.js で作る
</title>
</head>
<body>
<h1>ブラウザで動画を収録してサーバーへ送るデモを Express.js で作る</h1>
<div>
<button type="button" id="buttonStart">Start</button>
<button type="button" id="buttonStop" disabled>Stop</button>
<button type="button" id="buttonUploadBlob" disabled>
Upload (Blob)
</button>
<button type="button" id="buttonUploadDataURL" disabled>
Upload (DataURL)
</button>
</div>
<div>
<video autoplay muted playsinline id="videoLive"></video>
</div>
<div>
<video controls playsinline id="videoRecorded"></video>
</div>
<script>
async function main() {
const buttonStart = document.querySelector("#buttonStart");
const buttonStop = document.querySelector("#buttonStop");
const buttonUploadBlob = document.querySelector("#buttonUploadBlob");
const buttonUploadDataURL = document.querySelector(
"#buttonUploadDataURL"
);
const videoLive = document.querySelector("#videoLive");
const videoRecorded = document.querySelector("#videoRecorded");
let recordedVideoBlob = null;
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
});
videoLive.srcObject = stream;
const mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm",
});
buttonStart.addEventListener("click", () => {
mediaRecorder.start();
buttonStart.setAttribute("disabled", "");
buttonStop.removeAttribute("disabled");
});
buttonStop.addEventListener("click", () => {
mediaRecorder.stop();
buttonStart.removeAttribute("disabled");
buttonStop.setAttribute("disabled", "");
buttonUploadBlob.removeAttribute("disabled");
buttonUploadDataURL.removeAttribute("disabled");
});
mediaRecorder.addEventListener("dataavailable", (event) => {
videoRecorded.src = URL.createObjectURL(event.data);
recordedVideoBlob = event.data;
});
buttonUploadBlob.addEventListener("click", async () => {
try {
const search = new URLSearchParams({
extname: ".webm",
}).toString();
const url = "/api/upload/blob?" + search;
console.log(recordedVideoBlob);
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/octet-stream",
},
body: recordedVideoBlob,
});
if (response.status !== 201) {
console.warn(response.status);
console.warn(await response.text());
}
} catch (err) {
console.error(err);
}
});
buttonUploadDataURL.addEventListener("click", async () => {
try {
const url = "/api/upload/dataurl";
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
body: JSON.stringify({
extname: ".webm",
dataUrl: await convertBlob(recordedVideoBlob),
}),
});
if (response.status !== 201) {
console.warn(response.status);
console.warn(await response.text());
}
} catch (err) {
console.error(err);
}
});
}
async function convertBlob(blob) {
return await new Promise((resolve, reject) => {
const fileReader = new FileReader();
const subscribe = () => {
fileReader.addEventListener("abort", onAbort);
fileReader.addEventListener("error", onError);
fileReader.addEventListener("load", onLoad);
};
const unsubscribe = () => {
fileReader.removeEventListener("abort", onAbort);
fileReader.removeEventListener("error", onError);
fileReader.removeEventListener("load", onLoad);
};
const onAbort = () => {
unsubscribe();
reject(new Error("abort"));
};
const onError = (event) => {
unsubscribe();
reject(event.target.error);
};
const onLoad = (event) => {
unsubscribe();
resolve(event.target.result);
};
subscribe();
fileReader.readAsDataURL(blob);
});
}
main();
</script>
</body>
</html>
実行結果
ブラウザで http://localhost:3000 にアクセスします。
Start / Stop で動画を撮影してから Blob のままアップロードするか DataURL に変換してからアップロードします。
薄田達哉 / tatsuyasusukidaつまづいた
fetch() 関数の body オプションを間違えて data にしてしまって 5 分間くらいムダにしてしまった。
薄田達哉 / tatsuyasusukidaBlob と DataURL どっちが良い？
個人的には Blob の方が好き、理由としては変換が無くて楽ちん。
よく知らないけど AWS S3 や GCP Cloud Storage のファイルアップロード API も Blob アップロードが前提になっている気がする。
デメリットとしてはファイル名などのパラメーターを指定できないこと、複数のファイルを一度に送れないこと。
パラメーターはクエリパラメーターで代用できるから良いが、複数のファイルはどうしようもない。
DataURL はクライアントでの変換も必要だし、Base64 に変換しているから転送データ量も増えるのでおすすめではない。
どうしても JSON で送らなければならない時以外は Blob を選ぶ。
mimiHatいつもありがとうございます。
ああ、なるほど。Blobでは、ファイル名などのパラメータも指定できない、複数ファイルを一度に送れないんですね。
う～ん、そうなんだあ。
最大３つの動画ファイルを名前を付けてサーバーに送りたかったんですが、Blobだと別々に処理することになりますね。
ちなみに、DataURLだとファイルが大きくなるようですが（4/3倍くらい？）、動画ひとつ100MBくらいまではいけるかなと思っていたのですが、社内サーバーとはいえやっぱダメかな。
静止画は、DataURLでまとめて送ってるんで、操作画面をほぼ変えずに同じパターンでいけるとよかったんですが。。
勉強もかねて、BlobとDataURLと両方でやってみます。
そろそろ片付けて、TypeScript、React、Next.jsの勉強やらんとです。
また教えてくださいネ！
mimiHatDataURLの転送でrequest entity too largeが出たので、express.json({ extended: true, limit: '100mb'})としたら転送できました！
薄田達哉 / tatsuyasusukidaコメントありがとうございます！
複数ファイルをアップロードする場合は Blob か Data URL か悩ましいですよね。
Data URL だと Base64 なのでおっしゃる通りファイルサイズが 4/3 倍くらいになります。
動画でファイルサイズが 100 MB だとブラウザの方で JSON.stringify() ができなそうなのでほぼ Blob 一択かなって感じがしましたが実際にはサーバー側で express.json({ extended: true, limit: '100mb'}) を設定すれば成功するんですね、勉強になりました。
静止画の場合はサイズが小さいので僕も同じ立場だったら Data URL を使うと思います、別の操作画面で同じようなことやっているのであれば流用できるのでなおさら楽で良いですよね。
Blob の方が行儀の良いやり方なのはわかるのですが Data URL を使った方が JSON リクエスト 1 回で済むので色々と楽ですよね。
Next.js / React + TypeScript でも何かお困りのことがありましたらお気軽にご質問くださいね 🙆
薄田達哉 / tatsuyasusukidaおわりに
ご質問がありましたらお気軽にコメントください！