如何从TypeScript使用getUserMedia

juud5qan  于 2022-11-26  发布在  TypeScript
关注(0)|答案(4)|浏览(206)

我想从TypeScript调用getUserMedia,类似于:

return  navigator.getUserMedia()

然而,TypeScript的Navigator定义(在lib.d.ts中)不包含getUserMedia。我该如何解决?我应该修改lib.d.ts吗?我该在哪里进行修改?

hpxqektj

hpxqektj1#

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

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

xzlaal3s2#

当前的做法是将添加到接口,而不是编辑lib.d.ts文件。
你可以在你的TypeScript文件中添加到接口,当lib.d.ts被更新时,编译器会告诉你你不再需要它。我已经把它放在了额外的空白处,以使声明的不同部分更容易阅读,我已经在接口下面添加了一个示例调用。

interface Navigator {
    getUserMedia(
        options: { video?: boolean; audio?: boolean; }, 
        success: (stream: any) => void, 
        error?: (error: string) => void
        ) : void;
}
    
navigator.getUserMedia(
    {video: true, audio: true}, 
    function (stream) {  },
    function (error) {  }
);

我会在使用getUserMedia的类中做这个修改,并且我会尝试将getUserMedia的所有用法限制在该类中。

2ic8powd

2ic8powd3#

导入类型定义已simplified with TypeScript 2.0
将webrtc定义安装为NPM的dev依赖项

$ npm install —save @types/webrtc

安装后,请使用.ts文件顶部的reference指令,该指令与getUserMedia一起使用:

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

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

这样就行了!

jqjz2hbq

jqjz2hbq4#

由于这已经很老了,但人们可能仍然会来这里寻找答案,这里是一个更新的答案使用类型来管理所有明确类型的文件:
安装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库(或多或少为人所知)时,你需要typescript来识别它,你只需使用typings,几秒钟内就可以添加它。

相关问题