Question

我正在尝试使用Twitch API在我的Web应用程序中嵌入频道。

说明如下：

<html>
  <body>
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat"
      });
    </script>
  </body>
</html>

我已将https://embed.twitch.tv/embed/v1.js文件包含在我的assets文件夹和angular.json中。

    "scripts": [
      "src/assets/twitch/twitch-embed-v1.js"
    ]

我的组件文件如下：

import Twitch from '../../../../../assets/twitch/twitch-embed-v1';

export class TwitchPlayerComponent implements OnInit {

  ngOnInit() {
    const options = {
      width: 854,
      height: 480,
      channel: '424976424',
    };
    const player = new Twitch.Embed('twitch-embed', options);
    player.setVolume(0.5);
  }

}

该脚本显示在Chrome devtools的“源”面板中，但会产生以下错误：

Embed is not a constructor

正确使用脚本的障碍是什么？

Answer 1

twitch的v1还没有TypeScript类型，它将在v2中提供。您不应将脚本添加到资产文件夹。如果抽搐有更新怎么办？您将必须手动更新资产文件夹。

无论如何，我想要使用twitch SDK，您可以执行以下操作：

npm install twitch-js@next

在您的TS中：

import * as Twitch from 'twitch-js';

new Twitch.Embed({...});

Answer 2

我遇到了同样的问题，这就是为什么我决定为Twitch交互式嵌入播放器实现Typescript包装器的原因。这与Angular 100％兼容，因此，如果您仍然需要实现此目的的方法，请签出该存储库。希望对您有所帮助^^

https://github.com/frozencure/twitch-player

Angular 7：在组件中使用外部脚本

2 个答案: