typescript - 如何从 TypeScript 中使用 getUserMedia

Question

我想 从 TypeScript调用getUserMedia ，例如：

 return  navigator.getUserMedia()

但是，TypeScript 对 Navigator 的定义（在 lib.d.ts 中）不包含 getUserMedia。我该如何解决？我应该修改 lib.d.ts 吗？我在哪里做这个改变？

Answer 1

您可以将带有任意参数的调用强制转换为任何对象，而不是更改定义，例如：

    var n = <any>navigator;
    n.getUserMedia  = n.getUserMedia || n.webkitGetUserMedia || n.mozGetUserMedia || n.msGetUserMedia;
    return  n.getUserMedia({video: true, audio:true}, onSuccess, onFail);

Answer 2

当前的做法是添加到界面中，而不是编辑 lib.d.ts 文件。

您可以在 TypeScript 文件中添加接口，当 lib.d.ts 更新时，编译器会告诉您不再需要它。我把它放在了额外的空白处，以使声明的不同部分更容易阅读，并且我在界面下方添加了一个示例调用。

interface Navigator {
    getUserMedia(
        options: { video?: bool; audio?: bool; }, 
        success: (stream: any) => void, 
        error?: (error: string) => void
        ) : void;
}

navigator.getUserMedia(
    {video: true, audio: true}, 
    function (stream) {  },
    function (error) {  }
);

我会在使用getUserMedia. 我会尽量限制getUserMedia该类的所有用法。

Answer 3

由于这已经很老了，但人们可能仍然会来这里寻找答案，这里有一个更新的答案，使用类型来管理所有明确类型的文件：

安装类型，Github Page，这些命令被侵入命令行（需要安装 npm）并从那里下载 mediastream.d.ts：

npm install typings --global
typings init
typings install mediastream --ambient --save

然后将生成的 typings 文件夹中的 main.d.ts 添加到您的 tsconfig.json 文件中，或者将其直接添加到您希望它在此行中使用的 typescript 文件中：

/// <reference path="typings/main.d.ts" />

现在打字稿将识别 navigator.getUserMedia() 并正确编译它。它最酷的部分是，每当你有另一个 javascript 库（或多或少为人所知）时，你需要 typescript 来识别你可以使用打字，你会在几秒钟内添加它。

Answer 4

TypeScript 2.0 简化了导入类型定义。

使用 NPM 将 webrtc 定义安装为开发依赖项

$ npm install —save @types/webrtc

安装后，使用 .ts 文件顶部的引用指令，该指令与 getUserMedia 一起使用：

/// <reference types="webrtc" />

const getUserMedia = navigator.mediaDevices.getUserMedia ||
                     navigator.getUserMedia ||
                     navigator.webkitGetUserMedia ||
                     navigator.mozGetUserMedia

应该这样做！