如何使用TypeScript中的getUserMedia

Question

我想从TypeScript 调用 getUserMedia,例如:

 return  navigator.getUserMedia()

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

Answer 1

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

\n

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

\n

$ npm install \xe2\x80\x94-save @types/webrtc\n

\n

安装后，使用 .ts 文件顶部与 getUserMedia 配合使用的参考指令：

\n

/// <reference types="webrtc" />\n\nconst getUserMedia = navigator.mediaDevices.getUserMedia ||\n                     navigator.getUserMedia ||\n                     navigator.webkitGetUserMedia ||\n                     navigator.mozGetUserMedia\n

\n

应该这样做！

\n

Answer 2

您可以使用arbitray参数调用任何对象,而不是更改定义,例如:

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

Answer 3

目前的做法是添加到界面,而不是编辑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 4

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

安装打字,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" />

现在,typescript将识别navigator.getUserMedia()并正确编译它.关于它的很酷的部分是,每当你有另一个javascript lib(或多或少知名)时,你需要打字稿来识别你可以只使用打字,你会在几秒钟内添加它.