{"id":21514982,"url":"https://github.com/skyway/skyway-video-processors","last_synced_at":"2025-04-09T20:11:56.659Z","repository":{"id":201154938,"uuid":"705565886","full_name":"skyway/skyway-video-processors","owner":"skyway","description":"The official virtual background library for SkyWay","archived":false,"fork":false,"pushed_at":"2023-11-10T00:40:28.000Z","size":174,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-03-29T19:05:16.445Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://skyway.ntt.com/","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skyway.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-16T09:07:20.000Z","updated_at":"2025-01-10T02:53:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"44aa9314-d241-4b7c-83eb-85dc76747e30","html_url":"https://github.com/skyway/skyway-video-processors","commit_stats":null,"previous_names":["skyway/skyway-video-processors"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyway%2Fskyway-video-processors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyway%2Fskyway-video-processors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyway%2Fskyway-video-processors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyway%2Fskyway-video-processors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skyway","download_url":"https://codeload.github.com/skyway/skyway-video-processors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045230,"owners_count":21038553,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-23T23:53:47.323Z","updated_at":"2025-04-09T20:11:56.630Z","avatar_url":"https://github.com/skyway.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# skyway-video-processors\n\nJavaScript/TypeScript を用いてブラウザ上でカメラから取得した映像の背景を加工するライブラリです。\nカメラから取得した映像の背景を任意の画像に差し替えたり(以下では背景差し替え処理と呼びます)、背景へのぼかし処理(以下では背景ぼかし処理と呼びます)を行うことができます。\n\n## 本リポジトリの運用方針について\n\nこのリポジトリは公開用のミラーリポジトリであり、こちらで開発は行いません。\n\n### Issue / Pull Request\n\n受け付けておりません。\n\nEnterprise プランをご契約のお客様はテクニカルサポートをご利用ください。\n詳しくは[SkyWay サポート](https://support.skyway.ntt.com/hc/ja)をご確認ください。\n\n## 対応ブラウザ\n\n- Chrome\n- Edge\n\n`MediaStreamTrackProcessor` という Experimental のブラウザ API を使用しているため、使用する際は以下より対応ブラウザを参照してください。\n\nhttps://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrackProcessor#browser_compatibility\n\n## インストール\n\n以下のコマンドでインストールを行います。\n\n```\nnpm install skyway-video-processors\n```\n\n## 使い方\n\n以下の使い方の詳細は[Sample](./example/simple/src/index.ts)を参照してください。\n\n任意の画像を利用して背景差し替え処理を行う `VirtualBackground` と、任意の強度で背景ぼかし処理を適用する `BlurBackground` の 2 つのクラスが存在します。\n\n### `VirtualBackground` の使い方\n\n`VirtualBackground` のインスタンスを作成します。\n\n```ts\nimport { VirtualBackground } from 'skyway-video-processors';\nvirtualBackground = new VirtualBackground({ image: 'green.png' });\n```\n\nインスタンスの初期化を行います。\n\n```ts\nawait virtualBackground.initialize();\n```\n\n`createProcessedStream`によって、デバイスからの映像に対して背景差し替え処理を行った映像の `ProcessedStream` を取得できます。\n`ProcessedStream` の track を用いて、背景差し替え処理を行った映像の `MediaStream` を作成できます。\n\n```ts\nconst result = await virtualBackground.createProcessedStream();\nconst stream = new MediaStream([result.track]);\n```\n\n作成した `MediaStream` を `videoElement` の `srcObject` に割り当てることで映像を再生できます。\n\n```ts\nvideoElement.srcObject = stream;\nawait videoElement.play();\n```\n\n### `BlurBackground` の使い方\n\n`BlurBackground` のインスタンスを作成します。\n\n```ts\nimport { BlurBackground } from 'skyway-video-processors';\nblurBackground = new BlurBackground();\n```\n\nインスタンスの初期化を行います。\n\n```ts\nawait blurBackground.initialize();\n```\n\n`createProcessedStream`によって、デバイスからの映像に対して背景ぼかし処理を行った映像の `ProcessedStream` を取得できます。\n`ProcessedStream` の `track` を用いて、背景ぼかし処理を行った映像の `MediaStream` を作成できます。\n\n```ts\nconst result = await blurBackground.createProcessedStream();\nconst stream = new MediaStream([result.track]);\n```\n\n作成した `ProcessedStream` を `videoElement` の `srcObject` に割り当てることで映像を再生できます。\n\n```ts\nvideoElement.srcObject = stream;\nawait videoElement.play();\n```\n\n## JavaScript SDKとの連携方法\n\nバーチャル背景による加工を行った映像を SkyWay で送信する映像として利用することができます。\n\n`VirtualBackground` 、 もしくは `BlurBackground` の初期化を行い、そのインスタンスを JavaScript SDK に引数として渡します。\n\n```\nconst backgroundProcessor = new BlurBackground();\nawait backgroundProcessor.initialize();\n\nconst video = await SkyWayStreamFactory.createCustomVideoStream(backgroundProcessor, {\n    stopTrackWhenDisabled: true,\n});\n\nconst me = await room.join();\nawait me.publish(video);\n```\n\n## API\n\n以下の API を提供しています。\n\n### class `VirtualBackground`\n\n#### constructor\n\n```ts\nnew VirtualBackground({image: (string | HTMLImageElement)}): VirtualBackground\n```\n\n背景差し替え処理に使用する画像をファイルパス、もしくは `HTMLImageElement` の形式で設定します。\n\nなお、外部のURLを指定する場合は、CORSの制約によって外部から画像を読み込むことができない場合があります。そのため、以下いずれかの対応策を取る必要があります。\n\n- `Access-Control-Allow-Origin` ヘッダーの設定により、画像の読み込み元のオリジンからのアクセスが許可されている画像を使用する。\n- 同一のオリジンから使用したい画像を読み込む。\n\n#### Methods\n\n##### `initialize`\n\n`VirtualBackground` のインスタンスの初期化を行います。\n\n```ts\nvirtualBackground.initialize(): Promise\u003cvoid\u003e\n```\n\n##### `createProcessedStream`\n\nカメラから取得した映像に対して、背景差し替え処理を行った映像である `ProcessedStream` を取得します。\n\n```ts\ncreateProcessedStream(): Promise\u003cProcessedStream\u003e\n```\n\n```ts\ncreateProcessedStream(options: {\n    stopTrackWhenDisabled?: boolean,\n    onUpdateTrack?: (track: MediaStreamTrack) =\u003e Promise\u003cvoid\u003e,\n    constraints?: MediaTrackConstraints\n}): Promise\u003cProcessedStream\u003e\n```\n\noptions を指定する場合、以下のプロパティを指定します。\n\n-   `stopTrackWhenDisabled?: boolean`\n    -   `ProcessedStream.setEnabled(false)` の実行時に track を停止するかを示すオプション\n-   `onUpdateTrack?: (track: MediaStreamTrack) =\u003e Promise\u003cvoid\u003e`\n    -   `ProcessedStream.setEnabled(true)` の際にデバイスから再取得した `MediaStreamTrack` に行う操作\n- `constraints: MediaTrackConstraints`\n    - 一例として、以下のような値を指定できます。\n        -   `height: number | ConstrainULongRange`\n        -   `width: number | ConstrainULongRange`\n        -   `deviceId: ConstrainDOMString`\n    - 詳細は https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints を参照してください。\n\n以下のようにして options を指定できます。\n\n```ts\nconst constraints = {\n    height: {ideal: 480},\n    width: {ideal: 640},\n    deviceId: 'default',\n};\nconst result = await virtualBackground.createProcessedStream({\n    stopTrackWhenDisabled: true,\n    onUpdateTrack: async (track) =\u003e {\n        const stream = new MediaStream([track]);\n        videoElement.srcObject = stream;\n    },\n    constraints\n});\n```\n\n##### `dispose`\n\n映像の取得を停止します。\n\n```ts\ndispose(): Promise\u003cvoid\u003e\n```\n\n`dispose` 実行後に背景差し替え処理を行うには、インスタンスを再度作成しなおす必要があります。\n\n### class `BlurBackground`\n\n#### constructor\n\n```ts\nnew BlurBackground(): BlurBackground\n```\n\n```ts\nnew BlurBackground({blur: number}): BlurBackground\n```\n\nぼかしの強度を 1~100 の範囲で指定できます。デフォルトでは 20 と設定されています。\n\n#### Methods\n\n##### `initialize`\n\n`BlurBackground` のインスタンスの初期化を行います。\n\n```ts\nblurBackground.initialize(): Promise\u003cvoid\u003e\n```\n\n\n##### `createProcessedStream`\n\nデバイスのカメラから取得した映像に対して、背景ぼかし処理が行われた映像の`ProcessedStream`を取得します。\n\n```ts\ncreateProcessedStream(): Promise\u003cProcessedStream\u003e\n```\n\n```ts\ncreateProcessedStream(options: {\n    stopTrackWhenDisabled?: boolean,\n    onUpdateTrack?: (track: MediaStreamTrack) =\u003e Promise\u003cvoid\u003e,\n    constraints?: MediaTrackConstraints\n}): Promise\u003cProcessedStream\u003e\n```\n\noptions を指定する場合、以下のプロパティを指定します。\n\n-   `stopTrackWhenDisabled?: boolean`\n    -   `ProcessedStream.setEnabled(false)` の実行時に track を停止するかを示すオプション\n-   `onUpdateTrack?: (track: MediaStreamTrack) =\u003e Promise\u003cvoid\u003e`\n    -   `ProcessedStream.setEnabled(true)` の際にデバイスから再取得した `MediaStreamTrack` に行う操作\n- `constraints: MediaTrackConstraints`\n    - 一例として、以下のような値を指定できます。\n        -   `height: number | ConstrainULongRange`\n        -   `width: number | ConstrainULongRange`\n        -   `deviceId: ConstrainDOMString`\n    - 詳細は https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints を参照してください。\n\n以下のようにして options を指定できます。\n\n```ts\nconst constraints = {\n    height: {ideal: 480},\n    width: {ideal: 640},\n    deviceId: 'default',\n};\nconst result = await blurBackground.createProcessedStream({\n    stopTrackWhenDisabled: true,\n    onUpdateTrack: async (track) =\u003e {\n        const stream = new MediaStream([track]);\n        videoElement.srcObject = stream;\n    },\n    constraints\n});\n```\n\n##### `dispose`\n\n映像の取得を停止します。\n\n```ts\ndispose(): Promise\u003cvoid\u003e\n```\n\n`dispose` 実行後に背景ぼかし処理を行うには、インスタンスを再度作成しなおす必要があります。\n\n### class `ProcessedStream`\n\n`createProcessedStream`の実行により取得されるクラスです。\n\n#### properties\n\n##### `track`\n\n加工した映像の `MediaStreamTrack` です。\n\n```ts\ntrack: MediaStreamTrack | null;\n```\n\n##### `isEnabled`\n\n映像が有効/無効になっているかの状態を示します。\n\n```\nisEnabled: boolean;\n```\n\n#### `methods`\n\n##### `setEnabled`\n\n映像の有効/無効の状態を切り替えます。\n\n```ts\nasync setEnabled(enabled: boolean): Promise\u003cvoid\u003e\n```\n\n##### `dispose`\n\n映像の取得を中止し、track を破棄します。\n\n```ts\nasync dispose(): Promise\u003cvoid\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyway%2Fskyway-video-processors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskyway%2Fskyway-video-processors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyway%2Fskyway-video-processors/lists"}