时间戳

首页 > 解决方案 > 架构程序以便 Angular 不会在每次将更新推送到商店时重新渲染 MediaStream 组件？

javascript - 架构程序以便 Angular 不会在每次将更新推送到商店时重新渲染 MediaStream 组件？

问题描述

我创建的示例 Angular 应用程序演示了我遇到的问题，这个应用程序可以在这里找到

基本上我有两家商店，我正在为这些商店使用状态管理库Akita。两者都是实体存储，第一个存储用于所有消息，它具有如下签名：

interface MessageInterface {
 // Unique identifier
 id: ID;
 // The time is was created
 time: number;
 // The actual string message
 value: string;
}

第二个商店是我所有的连接，一个连接的签名是这样的：

interface ConnectionInterface {
  // Unique identifier
  id: ID;
  // The MediaStream (webcam stream object)
  stream: MediaStream;
  // An array of unique ids where each id relates to an id in the MessageStore
  messages: ID[] | MessageInterface[]
}

以下是应用程序启动时执行的步骤：

  1. 使用 启动网络摄像头流getUserMedia。
  2. 然后它将生成的流保存到 ConnectionStore。
  3. 然后它开始每秒创建 1 条消息，在创建每条消息后，它将消息保存到 MessageStore，然后通过将创建的消息的索引添加到 ConnectionStore 实体上的消息数组的开头，将该消息与 ConnectionStore 关联.

以下是两家商店最终的样子：

消息存储：

entities: {
  3ea9454682: {id: "3ea9454682", time: 1548117443764, value: "CIAO"}
  4a66b34aad: {id: "4a66b34aad", time: 1548117444765, value: "SALAAM"}
  4e165d4887: {id: "4e165d4887", time: 1548117445767, value: "SALAAM"}
  4eb22b42a6: {id: "4eb22b42a6", time: 1548117441763, value: "BONJOUR"}
  5cbc594983: {id: "5cbc594983", time: 1548117447771, value: "HELLO"}
  6c574e44a8: {id: "6c574e44a8", time: 1548117446770, value: "NAMASTE"}
  bfdcc344aa: {id: "bfdcc344aa", time: 1548117448771, value: "NAMASTE"}
  c7c55d45a7: {id: "c7c55d45a7", time: 1548117440762, value: "NAMASTE"}
  cc86a045af: {id: "cc86a045af", time: 1548117442764, value: "HOLA"}
  fd2cf744ab: {id: "fd2cf744ab", time: 1548117439760, value: "CIAO"}
}

连接存储：

entities: {
  fda7464bbe: {
     id: "fda7464bbe",
     mediaStream: {
       active: true
       id: "bQO4NI86L7pEHNzEwEK9dVht5wtHf5s81TfV"
       onactive: null
       onaddtrack: null
       oninactive: null
       onremovetrack: null
     },
     messages: [
       "bfdcc344aa"
       "5cbc594983"
       "6c574e44a8"
       "4e165d4887"
       "4a66b34aad"
       "3ea9454682"
       "cc86a045af"
       "4eb22b42a6"
       "c7c55d45a7"
       "fd2cf744ab"
     ]
  }
}

我遇到的问题是每次生成消息并将其保存到商店时，您都会看到网络摄像头视频闪烁。也许我在构建结构错误？也许有一种方法可以只重新渲染消息而不影响流？感谢任何尝试解决此问题的人，任何建议都会有很大帮助！

标签： javascriptangularrxjsangular-akitaakita

解决方案

您可以通过在您的 : 中使用 trackBy 来解决问题ngFor：

<li *ngFor="let connection of connections | async; trackBy: trackByFunction">

在你的打字稿中像这样声明 trackByFunction ：

trackByFunction(index, item) {
  return index;
}

这有助于 Angular 跟踪从列表中添加或删除的项目，并仅重新呈现更改的项目。

我必须将以下内容添加到您的polyfills.ts文件中以使其编译：

import 'core-js/es7/reflect';

希望有帮助。

推荐阅读