nodejs
stream incoming readableStream from server into a HTMLMediaElement
Details
a video is being sent as a readable stream from the nodejs , and i want to assign each chunk of data to the video html element as soon as it's ready.
the problem is , using readable stream to get chunks of data and creating an array buffer from them , and then creating a blob url out of it . will cause it to wait until all the data is received and then blob url is created and assigned to the video element
since a blob can't be updated , unless you create a new one , which means a new BlobUrl and that doesn't sound good to create a new blobURL , each time a chunk of data is available ( which also causes several video interruptions ) .
i am seeking for a way to dynamically assign the new chunk of data to the video , while it's playing the previously received data . and i insist to use a blob url
how is it possible ? same as youtube and many other platforms do , the videos have a single blob url but data is being partially assigned to them .
Node.js version
Node v 15.11.0
Example code
server
app.get("/video", (req, res, next) => {
const readStream = fs.createReadStream(path.resolve("./assets/media/video.mp4"), { flags: "r" });
res.header("Content-Type", "video/mp4");
readStream.pipe(res);
});
client
fetch("/video")
.then((response) => response.body)
.then(async readableSteam => {
const reader = readableSteam.getReader();
let buffer = [];
while (1) {
const { value, done } = await reader.read();
if (done) {
const blob = new Blob(buffer);
const blobUrl = URL.createObjectURL(blob);
videoElm.src = blobUrl;
break;
}
buffer.push(value);
}
})
.catch((err) => {
console.error("ERROR!", err);
});
Operating system
windows 10 - running on localhost:3000
Scope
localhost nodejs server (localhost:3000) using typescript + webpack , server and client are at the same project .
Module and version
"dependencies": { "express": "^4.17.2", "nodemon": "^2.0.15" }, "devDependencies": { "@types/express": "^4.17.13", "@webpack-cli/generators": "^2.4.2", "ts-loader": "^9.2.6", "typescript": "^4.5.5", "webpack": "^5.67.0", "webpack-cli": "^4.9.2", "webpack-node-externals": "^3.0.0" }
am looking for this anwser too since 3 days ,if you did found a solution please let me know here
Node.js does not provide an HTMLMediaElement. If a custom package provides this item, please refer to the maintainers for support.
