javascript - 亚马逊服务器上的 Node.js 视频流问题

Question

我正在开发一个播放一些视频的网站。我使用文件系统将视频流式传输给用户，我在 localhost 上对其进行了测试，它可以工作（虽然它只使用 Internet Explorer 工作，但没有测试 chrome ）

我将代码上传到亚马逊实例，但视频不起作用。并使用 ie 观看视频，它会尝试下载它们而不是在浏览器上播放它们。

在服务器上我有这个来流式传输视频

router.get('/videoplay/:video_name', isLoggedIn, async (req, res)  => {

    const { video_name } = req.params;
    const folder_path = "./uploads/"

    console.log(video_name);

    const stat = fs.statSync(folder_path + video_name);
    const fileSize = stat.size;

    const range = req.headers.range;
    if(range){
        const parts = range.replace(/bytes=/g,"").split("-");
        const start = parseInt(parts[0],10);
        const end = parts[1] ? parseInt(parts[1],10) : fileSize-1;
        const chunksize = (end-start) + 1;
        const file = fs.createReadStream(folder_path+video_name, {start,end});
        const head = {
            'Content-Range' : `bytes ${start}-${end}/${fileSize}`,
            'Accept-Range' : 'bytes',
            'content-Length' : chunksize,
            'Content-Type' : 'video/mp4'
        }
        
        res.writeHead(206, head);
        file.pipe(res);
    }else{
        const head = {
            'Content-Length' : fileSize,
            'Content-Type' : 'video/mp4'
        }
        res.writeHead(200,head);
        fs.createReadStream(folder_path + video_name).pipe(res);
    }
});

并在浏览器上

  <div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <div class="bg-light border-right" id="sidebar-wrapper">
      <div class="sidebar-heading">Videos </div>
      <div class="list-group list-group-flush">
          <input type="text" placeholder="Search..">
        {{#each video_names}}
            <a href="http://localhost:4000/links/watch/{{video_name}}" class="list-group-item list-group-item-action bg-light">{{video_name}}</a>
        {{else}}
            <a>Empty</a>
        {{/each}}
      </div>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        <h1 class="mt-4">Video recordings</h1>
        <video width="640" height="480" controls>   
            <source src="http://localhost:4000/links/videoplay/{{video_display}}">
        </video>
      </div>
    </div>
    <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Menu Toggle Script -->
  <script>
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
  </script>

在服务器上，我刚刚修改了 url，其中显示 localhost 为亚马逊服务器的 ip

标签： javascripthtmlnode.jsvideo-streaming