javascript - 将视频帧转换为流式视频

Question

服务器正在发送视频帧。我想使用它们来进行流式传输。我想知道如何组装帧来创建流媒体视频。到目前为止，我可以将帧显示为图片。下面是我的 Angular 代码

组件 Angular

 getVideo() {
    interval(250).switchMap(() => this.appService.getPictures())
      .subscribe(data => {
        const file = new Blob([data], {type:'image/png'});
        this.url = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(file));
      })
  }

模板 html

<img div="test" [src]="url" width="400px" height="300px"/>

我正在尝试使用相机的帧速率更改图片。但是我的图片没有更新，并且由于大量的 http 请求它卡住了我的浏览器。

我想要实现的是缓冲帧以便使用 video 标签而不是 img 标签，就像我连接到实时流发送一样由服务器使用 video 标签将 src 设置为服务器的 url。

Github 链接:https://github.com/kedevked/frameProcessing

Answer 1

与其每隔一段时间触发http请求，不如使用websocket。

通过逐帧显示图像，它给人以实时视频的印象。唯一的问题是网络中可能存在延迟，这使得帧速率不是恒定的。但是，它适用于无法考虑缓冲视频服务器端的用例，例如当我们需要沿每一帧发送数据时。

使用 websocket 的服务

createStream(url) {
  this.ws = webSocket<any>(url);
  return return this.ws.asObservable()
}

组件

constructor (private streamingService: StreamingService) {}
ngOnInit(): void { 
  this.getStream()
}

getStream() {
  this.streamingService.createStream().subscribe(data => {
    const file = new Blob([data], {type:'image/png'});
        this.url = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(file));
 })
}

当我们不仅发送图像而且还发送图像数据时，此解决方案非常适合。在这种情况下，图像需要作为 base64 发送。

getStream() {
      this.streamingService.createStream().subscribe(data => {
            this.url = data.base64ImageData
     })
    }

由于 base64 编码的负载为初始图像的 133%，因此在所有设置中使用它可能成本很高。如果图像需要与其他数据一起提供，则可以将整个数据作为二进制文件发送。这将需要对数据服务器端进行编码并在客户端对其进行解码。由于这可能需要一些计算，因此可以考虑使用 web-worker 来解码数据和显示图像。

如果图像以二进制形式发送，使用 Canvas 进行渲染会更快

canvas.getContex('2d').putImageData(imageBinaryData, 0, 0)