How to send (express) and receive (vuejs) video on js correctly?

  • 0
    There are 2 problems when sending video files from the express.js server to the vue.js frontend.
    1. On the frontend, when you receive a video, you have to wait until the video is fully loaded, so that it starts playing, but you need to play it during the process.
    Please tell me how to split the incoming video into chunks.
    Now implemented like this:
    async selectVideo(day){
                    this.videoz=[
                            await (await (await fetch(`http://${this.host}:3000/api/play`, 
                        { 
                            method: 'POST',  
                            headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
                            body: JSON.stringify({data: day })
                        }))).arrayBuffer()
                    ]
                    this.$refs.videoRef.src = `${URL.createObjectURL(new Blob(this.videoz))}`;
                },


    2. The second problem when sending a video, a post request comes with parameters for which day to select the video, the file name is matched and the video is sent. The video is sent, but if you select a video from the front from another day, it will cause an error:
    Emitted 'error' event on ReadStream instance at:
        at internal/fs/streams.js:147:14
        at FSReqCallback.oncomplete (fs.js:164:23) {
      errno: -5,
      code: 'EIO',
      syscall: 'open',
      path: '/mnt/mail/videos/cam5_vid_19-11-2020_12-43-52_320x240.mp4'
    }

    Sending code:
    router.post('/play', async function(req, res, next) {
    // ...
    const mimetype = mime.getType(pathToVideo);
        readStream = await fs.createReadStream(pathToVideo);
        res.setHeader('Content-type', mimetype);
    readStream.on('open', async function (err) {
          console.log('error ' + err);
          readStream.pipe(res);
        });

    Do I understand correctly that we need a middleware to clean up the response being sent.
    Tell me how to clean it, and most likely it should be tied to the session.
    Thank you for your help.
    JavaScript Anonymous, Oct 3, 2020

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!