内蔵カメラ
SDK には内蔵カメラインターフェースが提供されています。開発者が早くカメラを起動したかったり、カメラとのインタラクションをより多く制御したりする必要がある場合は、内蔵カメラインターフェース方式の使用をお勧めします。
ステップ 1：SDK を導入
npmパッケージ方式で SDK を参照：
npm install tencentcloud-webar
import { ArSdk } from 'tencentcloud-webar';
jsファイル方式で SDK を参照：
<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script><script>// Receive ArSdk class from window.ARconst { ArSdk } = window.AR;......</script>
ステップ 2：インスタンスを初期化
次に、表示用の SDK インスタンスを初期化します：
// 認証パラメータを取得const authData = {licenseKey: 'xxxxxxxxx',appId: 'xxx',authFunc: authFunc // 詳細は「License設定と使用 - 署名方法」参照};const config = {module: { // 0.2.0バージョンで追加beautify: true, // 美顔モジュールのオン・オフ、オンにすると美顔、化粧、ステッカーなどの機能が使用可能segmentation: true // シルエット切り抜きモジュールを有効にするかどうか、有効にすると背景機能が使用可能segmentationLevel: 0 // 選択可能な値：0 | 1 | 2 、値が高いほど切り抜き効果が良く、リソース使用が多く、より高いデバイスのハードウェア要件が求められます},auth: authData, // 認証パラメータcamera: { // camera設定を渡して内蔵カメラを起動width: 1280,height: 720},beautify: { // 美顔初期化パラメータ（任意）whiten: 0.1,dermabrasion: 0.3,eye: 0.2,chin: 0,lift: 0.1,shave: 0.2,// より多くの美顔パラメータ設定については「APIドキュメント」を参照},// より多くのパラメータ設定については「APIドキュメント」を参照}const sdk = new ArSdk(// sdk初期化用のconfigオブジェクトを渡しますconfig)let effectList = [];let filterList = [];sdk.on('created', () => {// createdコールバックでエフェクトとフィルターのリストを取得してページに表示。詳細は「SDKアクセス - パラメータとメソッド」参照sdk.getEffectList({Type: 'Preset',Label: '化粧',}).then(res => {effectList = res});sdk.getCommonFilter().then(res => {filterList = res})})// readyコールバックでsetBeautify/setEffect/setFilterなどのレンダリングメソッドを呼び出します// 詳細は「SDKアクセス - 美顔とエフェクトの設定」参照sdk.on('ready', () => {// 美顔を設定sdk.setBeautify({whiten: 0.2});// エフェクトを設定sdk.setEffect({id: effectList[0].EffectId,intensity: 0.7});// フィルターを設定sdk.setFilter(filterList[0].EffectId, 0.5)})
注意：
美顔検出とシルエット切り抜きはいずれも一定の読み込み時間とリソース消費があるため、初期化設定では必要な機能の選択のためのモジュール設定を提供しています。無効化されたモジュールはプリロードや初期化が行われません。
config の camera パラメータは、SDK が現在のデバイスのカメラメディアストリームを入力として取得することを示します。camera パラメータを設定すると、SDK は一連の基本デバイス管理メソッドも提供します。詳細は デバイス制御 をご参照ください。
ステップ 3：ストリームを再生
SDK は表示ページで出力効果をプレビューするための高速プレーヤーを提供しており、ローカルプレビュー効果のシナリオに使用できます。異なるコールバックイベントで取得したplayerには若干の違いがあり、異なるシナリオに適しています。必要に応じて選択してください。
画面表示の速度を求める場合、
cameraReadyコールバックでプレイヤーを取得して再生できます。この時点では SDK はまだリソースのロードと検出が初期化されていないため、元の画面のみ表示されます。sdk.on('cameraReady', async () => {// SDKのplayerを初期化します。my-dom-idはプレーヤーを配置するコンテナIDを表しますconst player = await sdk.initLocalPlayer('my-dom-id')// 直接再生await player.play()})
検出初期化が完了し、美顔が適用された後に再生したい場合は、ready コールバックでプレーヤーを取得します。
sdk.on('ready', async () => {// SDKのplayerを初期化します。my-dom-idはプレーヤーを配置するコンテナIDを表しますconst player = await sdk.initLocalPlayer('my-dom-id')// 直接再生await player.play()})
注意：
initLocalPlayer で取得したプレーヤーはデフォルトでミュートされており、ミュートを解除するとエコーが発生する可能性があります。
取得した player は
sdk.getOutput()メソッドを内蔵しており、ユーザーが使いやすいようになっています。SDK initLocalPlayer 後、その player オブジェクトはいくつかの一般的なインターフェースを内蔵しており、以下のメソッドをサポートしています：
メソッド名 | 説明 | 入力パラメータ | 戻り値 |
play | 再生 | - | Promise; |
pause | 一時停止（ストリームは停止せず、再開可能） | - | - |
stop | 停止（ストリームも停止） | - | - |
mute | ミュート | - | - |
unmute | ミュート解除 | - | - |
setMirror | ミラーリング設定 | true|false | - |
getVideoElement | 内蔵 video オブジェクトの取得 | - | HTMLVideoElement |
destroy | 破棄 | - | - |
注意：
プレーヤーはデフォルトで camera の デバイス制御 の変更に追従します。つまり、camera のデバイス制御はメインスイッチで、localPlayer の再生制御はサブスイッチということです。例えば：
camera.muteVideoを呼び出すと、この時点でデバイスビデオストリームが無効になります。この状態で localPlayer が play を再度呼び出しても、実質的に停止状態のままです。camera.unmuteVideoを呼び出すと、ビデオストリームが再度有効になります。この時点で localPlayer はデフォルトで自動的に再生状態に戻ります。そのため、camera 設定を有効にする場合、localPlayer の状態を手動で制御する必要はなく、camera デバイスの状態を適切に管理するだけで十分です。
ステップ 4：出力を取得
プッシュストリーム関連の需要がある場合は、getOutput メソッドを使用して出力メディアストリームを取得できます。
出力 MediaStream 取得した後、サードパーティー SDK（TRTC Web SDK、クイックライブ Web SDK など）と組み合わせてプッシュストリームなどの後続処理を行うことができます。
const output = await sdk.getOutput()
注意：
内蔵カメラを使用して初期化すると、getOutput で出力されるメディアストリームはすべて
MediaStreamタイプになります。出力メディアストリームの video トラックはAR SDKによってリアルタイムで処理され、
audioトラックがある場合はそのまま維持されます。getOutput メソッドは非同期メソッドであり、SDK が一連の初期化作業を完了してストリームを生成できるようになるまで待ってから返します。
getOutput メソッドは FPS パラメータを渡すことをサポートしており、出力のフレームレートを FPS（例えば15）に設定します。指定しない場合はデフォルトで入力ストリームのフレームレートを使用します。
プッシュストリームなどの操作については TRTCプッシュストリームと統合 および WebRTC プッシュストリームと統合 を参照してください。
ステップ 5：美顔とエフェクトを設定
ステップ 6：デバイスを制御
カメラの起動停止などの操作が必要な場合は、sdk.camera インスタンスを通じて実装できます。サンプルコードは以下の通りです：
const output = await sdk.getOutput()// todo 業務ロジックを色々省略// ...// getOutput後にsdk.cameraは既に初期化されているので直接取得可能const cameraApi = sdk.camera// 現在のデバイスリストを取得const devices = await cameraApi.getDevices()console.log(devices)// ビデオトラックを無効化// cameraApi.muteVideo()// ビデオトラックを有効化// cameraApi.unmuteVideo()// 複数のカメラがある場合、デバイスIDに基づいて切り替え可能// await cameraApi.switchDevices('video', 'your-device-id')
最初に
sdk.cameraを取得する必要がある場合は、初期化時に cameraReady イベントで取得できます：// todo 初期化パラメータを色々省略// ...const sdk = new ArSdk(config)let cameraApi;sdk.on('cameraReady', async () => {cameraApi = sdk.camera// 現在のデバイスリストを取得const devices = await cameraApi.getDevices()console.log(devices)// ビデオトラックを無効化// cameraApi.muteVideo()// ビデオトラックを有効化// cameraApi.unmuteVideo()// 複数のカメラがある場合、デバイスIDに基づいて切り替え可能// await cameraApi.switchDevices('video', 'your-device-id')})
デバイス制御を簡略化するために、内蔵の
cameraは以下のメソッド呼び出しを提供しています：メソッド名 | 説明 | 入力パラメータ | 戻り値 |
getDevices | 現在のすべてのデバイスリストを取得 | - | Promise<Array<MediaDeviceInfo>> |
switchDevice | デバイスを切り替え | type:string, deviceId:string | Promise |
muteAudio | 現在のカメラストリームをミュート | - | - |
unmuteAudio | ミュートを解除 | - | - |
muteVideo | 現在のカメラストリーム内の画像を無効にする。ストリームは存在するが、ビデオトラックは無効になっている | - | - |
unmuteVideo | 現在のカメラストリーム内の画像を有効にする | - | - |
stopVideo | 現在のカメラデバイスを停止する。ビデオストリームは停止する（オーディオストリームは存在） | - | - |
restartVideo | 現在のカメラを再起動する。stopVideo の後に使用する | - | Promise |
stop | 現在のカメラビデオとオーディオデバイスを停止する | - | - |
