web-dev-qa-db-ja.com

Angular2アプリケーションでMediaRecorderオブジェクトを使用するにはどうすればよいですか？

私は小さなAngular2アプリを構築していて、MediaRecorderオブジェクト（ https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder ）をそのように使用しようとしています。 ：

var mediaRecorder = new MediaRecorder(stream);

しかし、TypeScriptは「MediaRecorder」という名前が見つからないと言っています。これは、クイックスタートガイドから直接取得したTypeScript構成によるものだと思います（ https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html ）。構成は次のようになります。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "compileOnSave": true
}

「target：es6」または「lib：es6」を含むさまざまな構成や、「commonjs」以外のモジュールを含む構成を見てきましたが、これは初めてなので、何が起こっているのかよくわかりません。 。これらの値を更新しようとすると、さらにエラーが発生します。

誰かが私がこれを機能させる方法を知っていますか？

javascriptangulartypescriptwebrtcmediarecorder-api
13
millarnui

コンパイラはMediaRecorderオブジェクトについて何も知りません。

次のように宣言するだけです。

declare var MediaRecorder: any;
7
Axel Isouard

MediaRecorerがTypeScriptdom.libに到達するまで、怠惰な人々にはanyで十分です。しかし、それはTypeScriptの要点全体を明らかにします。

では、ほぼ本格的な型宣言をしないのはなぜですか？

これをアンビエント宣言ファイルに配置します。例：index.d.ts

declare interface MediaRecorderErrorEvent extends Event {
    name: string;
}

declare interface MediaRecorderDataAvailableEvent extends Event {
    data : any;
}

interface MediaRecorderEventMap {
    'dataavailable': MediaRecorderDataAvailableEvent;
    'error': MediaRecorderErrorEvent ;
    'pause': Event;
    'resume': Event;
    'start': Event;
    'stop': Event;
    'warning': MediaRecorderErrorEvent ;
}


declare class MediaRecorder extends EventTarget {

    readonly mimeType: string;
    readonly state: 'inactive' | 'recording' | 'paused';
    readonly stream: MediaStream;
    ignoreMutedMedia: boolean;
    videoBitsPerSecond: number;
    audioBitsPerSecond: number;

    ondataavailable: (event : MediaRecorderDataAvailableEvent) => void;
    onerror: (event: MediaRecorderErrorEvent) => void;
    onpause: () => void;
    onresume: () => void;
    onstart: () => void;
    onstop: () => void;

    constructor(stream: MediaStream);

    start();

    stop();

    resume();

    pause();

    isTypeSupported(type: string): boolean;

    requestData();


    addEventListener<K extends keyof MediaRecorderEventMap>(type: K, listener: (this: MediaStream, ev: MediaRecorderEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;

    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

    removeEventListener<K extends keyof MediaRecorderEventMap>(type: K, listener: (this: MediaStream, ev: MediaRecorderEventMap[K]) => any, options?: boolean | EventListenerOptions): void;

    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;

}

そして、はいタイプの競争は機能します：

InteliJ Type AutoComplete

ヒント

通常、私はtsconfig.jsonに、typedefを持たないすべてのjsesまたはAPIsを保持するフォルダーを構成します。

たとえば、このようなプロジェクトレイアウトの場合

project/
  @types <- a folder where I define my types 
    index.d.ts
  src
    ...
  ...
  tsconfig.json

私はtsconfig.jsonに次のように書きます：

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "node_modules/@types",
      "./@types"
    ],
    ...
}
13
Tiberiu C.

MediaRecorderのタイプをさらに簡単に追加できるようになりました。npmからインストールするだけで、.

npm install @types/dom-mediacapture-record

これにより、 DefinitelyTyped から最新の型定義がロードされます。それらは自動的に機能し、追加の手順はありません。タイピングに改善があれば、DefinitelyTypedに気軽に投稿してください。

8
Elias Meire

MediaRecorderのタイプをさらに簡単に追加できるようになりました。npmからインストールするだけです。

npm install @types/dom-mediacapture-record

これにより、 DefinitelyTyped から最新の型定義がロードされます。それらは自動的に機能し、追加の手順はありません。タイピングに改善があれば、DefinitelyTypedに気軽に投稿してください。

エリアス・メイレによって提案されたその解決策は私にとって最良です。しかし実際、私はそれを機能させるためにいくつかの追加の手順が必要でした。 githubのこの問題で述べられているように https://github.com/Microsoft/TypeScript/issues/11420#issuecomment-34162525 、この行で使用するには、それを参照する必要があります。

/// <reference types="@types/dom-mediacapture-record" />
2
Eric Niaina

同じ問題でこのページにアクセスし、dom-mediacapture-recordモジュールをインストールしましたが、それでも問題が発生していました。何度も髪を引っ張った後、MediaRecorderがまだ見つからない理由を見つけました。

私のアプリには、自動生成された「tsconfig.app.json」ファイルがあり、次の行があります。

"compilerOptions": {
  "types": ["node"]
  ... }

「types」がdom-mediacapture-recordモジュールの組み込みをブロックしていることに気づきました。次のように変更する必要があります。

"types": ["node", "dom-mediacapture-record"]

何時間も髪を引っ張るのを防ぐために、私はその一口を伝えたいと思いました。

0
jyl087

ただnpm install -D @types/dom-mediacapture-recordで十分です、tsconfig.jsonをまったく変更しないでください、タイプなし///参照なしtypeRootsは必要ありません（そしてそれらは一般的に何かに必要になることはめったにありません..。

0
cancerbero