I am having an issue with streaming a video in Safari for the iPad and Google Chrome browsers on Android devices. The application is working fine on my laptop that is using a Microsoft Edge Chromium browser. I have looked for examples to solve my problem, but I can't find anything specific to this. The issue is that the client will send a get request to retrieve a video file. I use gridfs-stream to retrieve that file from a MongoDb database, and then a pipe the file to the response object. This allows the user to view the video stream in a video-js player. This works with no issues on laptop and desktop devices with Microsoft Edge Chromium browsers, but it is failing in Safari and Mobile Chrome browsers. Here is my code:
I respond to the request and retrieve the file from the database, then pipe it to the response object in node:
app.get('/get-video', (req, res, next) => {
let video = req.query.video;
gfs.files.findOne({ filename: video }, (err, file) => {
// Check if file ex
if (!file || file.length === 0) {
return res.status(404).json({
err: 'No file exists'
});
}
else {
let readstream = gfs.createReadStream(file.filename);
readstream.pipe(res);
}
});
});
As you can say, I find the file based on the video name in the get request, create a ReadStream, and stream the file to the response object. Here is the html code in which the get request is made from the client. The player is utilizing the video-js library, but I couldn't find any compatibility issues with creating streams, AND this does work in the Edge/Chromium browser:
<video class="video-js vjs-big-play-centered vjs-16-9 card-img-top" autopreload="false" data-setup='{"autoplay": false, "controls": true}'>
<source src="/get-video?video=<%= post.source %>">
</video>
I am making the source for the video the response sent from the get request, which is the video stream. In the Safari browser I get the error: The media playback was aborted due to a corruption problem or because the media used features your browser did not support
I do not have this issue in any browsers when sending images via the get request. I also don't have any issues when I simply request static files. The issue seems to be contained to specific browsers when I attempt to send a video stream.
The reason why I am using the stream and not a static file is because I am hosting the application in the cloud. I have to send the raw file from the MongoDb database (or at least that's my understanding). When I was testing the application before sending it to the cloud this issue did not occur because I could simply utilize the file system and store the file path as the source for the video. However, the file system is not persistent with Heroku application, so I am using a cloud database in this situation. Now that I need to stream it from a database the issues are occurring.