尝试从 Node.js 以 Angular 流式传输视频答案

【问题标题】：Trying to Stream Videos in Angular from Node.js尝试从 Node.js 以 Angular 流式传输视频
【发布时间】：2021-04-21 06:17:52
【问题描述】：

我正在将视频从 Node.js/Express.js 发送到我的 Angular 前端应用程序。数据是分块发送的，我想在我的 Angular 应用程序中播放视频。不幸的是，有些东西似乎不起作用。谁能告诉我我做错了什么？

Courses.Component.html

  <div class="video-player-wrapper">

  <video id = "videoPlayer" controls preload = "metadata" style = "width: 65%; position: fixed; 
   border: 2px solid #7c2c6c;">
   
        <source [attr.src]="courseVideo" autoplay type = "video/mp4">
  
  </video>

  </div>

Courses.Component.ts

const params = new HttpParams().set('id', this.findcourseservice.getUserSelected()).set('id2', 
this.courseContent).set('id3', courseToPlay);

this.http.get('http://localhost:3000/playVideo', {params, responseType: "blob"})
.subscribe(response => {
  const reader = new FileReader();
  this.courseVideo = reader.readAsArrayBuffer(response);
})

Node.js

router.get('/playVideo', (req, res) => {

const viewCourse = req.query.id;
const viewSubCourse = req.query.id2;
const videoLink = req.query.id3;

const path = `D:/Videos/${viewCourse}/${viewSubCourse}/${videoLink}`;
const stat = fs.statSync(path);
const fileSize = stat.size;

const head = {
  'Content-Length': fileSize,
  'Accept-Ranges' : 'bytes',
  'Content-Type': 'video/mp4'
}

res.writeHead(200, head);
fs.createReadStream(path).pipe(res);
});

视频根本没有播放。我在网上搜索了很多，但找不到任何帮助。如果有人可以提供帮助，请不胜感激。谢谢。对此进行编辑，以便任何人都可以提供帮助。

【问题讨论】：

标签： javascript node.js angular typescript express

【解决方案1】：

我实际上正在使用它并且工作正常。

前面：

 public getVideo(videoUuid: string): Observable<SafeUrl> {
  const params = new HttpParams().set('videoUuid', videoUuid);
  return this.http
   .get(`${this.apiUrl}/video`, { params, responseType: 'arraybuffer' })
   .pipe(
     map((video) => {
      const blob = new Blob([video], { type: 'video/mp4' });

      return this.domSanitizer.bypassSecurityTrustUrl(
        URL.createObjectURL(blob)
      );
    })
  );

}

 const video = await videoFinder.getByUuid(videoUuid as string);
  const videoPath = path.normalize(
    path.join(enviroment.courseFolderPath, video.path.value)
  );

  const videoSize = fs.statSync(videoPath).size;

  if (range) {
    const rangeStringParts = range.replace(/bytes=/, '').split('-');

    const bytesStart = parseInt(rangeStringParts[0]);
    const bytesEnd = rangeStringParts[1]
      ? parseInt(rangeStringParts[1])
      : videoSize - 1;

    const CHUCK_SIZE = bytesEnd - bytesStart + 1; // 1MB

    const videoStream = fs.createReadStream(videoPath, {
      start: bytesStart,
      end: bytesEnd,
    });
    const headers = {
      'Content-Range': `bytes ${bytesStart}-${bytesEnd}/${videoSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': CHUCK_SIZE,
      'Content-Type': 'video/mp4',
    };
    res.writeHead(206, headers);

    videoStream.pipe(res);
    return;
  }

  const headers = {
    'Content-Length': videoSize,
    'Content-Type': 'video/mp4',
  };

  res.writeHead(200, headers);
  fs.createReadStream(videoPath).pipe(res);

【讨论】：