0

Sorry for any inconvenience with the question title, but I don't know how to describe issue.

I have the following code to fecth remote video and pipe it to the response (play it in the browser using html5 video tag):

const express = require('express')
//url: https://www.example.com/video.mp4
const http = require('https')
const app = express()
app.get('/', (req, res) => {
    http.get(url, (httpRes) => {
        httpRes.pipe(res)
    })
})

And I also tried using got npm module:

got.stream(url).pipe(res)

the problem is: both methods work just fine if the video duration was not that long (IE 3 minutes), but if it was (IE more than 35 minutes ) it won't fetch the whole video, instead it gives me the first 2:54 minutes.

What could be the problem? and what can I do to fix it? Thank you all for any kind of help.

EDIT:
MY FULL CODE:

const express = require('express')
const url = 'https://www.example.com/video.mp4'
const fs = require('fs')
const http = require('https')
const app = express()
const port = 3000 

// the main request is made by the client to this endopoint '/'
app.get('/', (req, res) => {
    //the server responds by sending 'player.html' file
    res.sendFile(__dirname + '/player.html')
})

// this request is made by the <video> tag in 'player.html'
app.get('/video', (req, res) => {
    http.get(url, (response) => {
        response.pipe(res)
    })

player.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Document</title>
</head>
<body>
    <video id="videoPlayer" controls width="100%" height="auto">

        <source src='/video' type="video/mp4">
      </video>
      
</body>
</html>
Martin Wittick
  • 433
  • 1
  • 4
  • 14
  • 2
    I would guess that the browser is running into some internal storage limits and stops collecting the video at some amount of memory usage. In a more typical video playing from a browser, the video would be requested in chunks (often called ranges). It would download and buffer a chunk and start playing that. Sometime before play reaches the end of the chunk, it requests the next chunk and so on. – jfriend00 Feb 21 '21 at 03:40
  • If the above theory is correct, then you would want to proxy access to [http range requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests) so the browser can request ranges. This would also probably need a ` – jfriend00 Feb 21 '21 at 04:43
  • @jfriend00, I do have a – Martin Wittick Feb 21 '21 at 21:52
  • @jfriend00, can I use the data event of the http.get response to play the chunks that are flowing from the video source directly on the browser? – Martin Wittick Feb 21 '21 at 21:55
  • Well, your code shows a request to `/` that is serving the video so it's hard to understand what your real structure is here. You could fully proxy a request for the image including full support for an http range request and make a video tag work properly in that way. – jfriend00 Feb 21 '21 at 21:56
  • No, that's not the way the chunks need to work. If the browser request comes from a video tag, then the browser will not request the whole video at once. It will request a piece and your server code needs to get just that piece and stream back just the piece that is requested. Right now you're attempting to send the entire video. – jfriend00 Feb 21 '21 at 21:58
  • @jfriend00, I don't know what you mean by proxy a request, I'll edit my post for you to see the full structure of my code. and hope you can help me fix it. – Martin Wittick Feb 21 '21 at 22:07
  • Can you provide a real video URL you're trying to use so I can see what its server supports? – jfriend00 Feb 22 '21 at 00:13
  • It might be useful to read this: [Streaming video in chunks](https://blog.logrocket.com/streaming-video-in-safari/). – jfriend00 Feb 22 '21 at 04:23
  • @jfriend00, sorry for being late to reply, the url works only in my country because it belongs to a local ISP company. I don't think you will be able to fetch it but, here it is: 'https://cdn.shabakaty.com/mp420-240/9E417896-D1F6-1B8F-8BEF-216D411DB50D_video.mp4' – Martin Wittick Feb 26 '21 at 12:03
  • See https://webomnizz.com/video-stream-example-with-nodejs-and-html5/ for how to support and serve byte ranges with video. – jfriend00 Feb 26 '21 at 16:26
  • @jfriend00, I've seen that tutorial before, it's talking about a video that's already existed on my local server. but the video I want to play is on a remote server, that's why I'm using http.get. – Martin Wittick Feb 27 '21 at 07:54

0 Answers0