I am attempting to stream video from nodejs server in chunks which works properly on desktop and android however when I attempt to play on ios(iphone) it isn’t even requesting for partial content material in any respect. I attempted taking reference from right here even tho it really works however it performs video in broadcast mode and reveals native controls as properly which I’ve set hidden on react.
exports.stream = (req, res) => {
const vary = req.headers.vary;
const id = req.question.id;
// console.log(id, typeof(id))
if (!vary || id == 'null') {
return res.standing(400).ship("Requires Vary Header and ID");
}
let videoPath = metadatahttps://stackoverflow.com/q/76961583.location;
let videoSize = fs.statSync(metadatahttps://stackoverflow.com/q/76961583.location).measurement;
const CHUNK_SIZE = (10 ** 6) / 2; // 1MB
const begin = Quantity(vary.substitute(/D/g, ""));
const finish = Math.min(begin + CHUNK_SIZE, videoSize - 1);
// Create headers
const contentLength = finish - begin + 1;
const headers = {
"Content material-Vary": `bytes ${begin}-${finish}/${videoSize}`,
"Settle for-Ranges": "bytes",
"Content material-Size": contentLength,
"Content material-Sort": "video/mp4",
};
// HTTP Standing 206 for Partial Content material
res.writeHead(206, headers);
// create video learn stream for this explicit chunk
const videoStream = fs.createReadStream(videoPath, { begin, finish });
// Stream the video chunk to the consumer
videoStream.pipe(res);
};
Right here is pattern web page I used to be attempting on
operate Take a look at () {
return (
<>
<video width={'100%'} controls={false}>
<supply src={`${course of.env.REACT_APP_BACKEND_URL}/video?id=8`} kind="video/mp4" />
</video>
</>
)
}
export default Take a look at;
I attempted debugging on backend controller and I doubt it isn’t even sending request for partial content material perfect habits was to play the video however it did not play on ios(each safari and chrome).