npm install tencentcloud-webar
import { ArSdk } from 'tencentcloud-webar';
<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>
// 認証パラメータを取得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)})
cameraReadyコールバックでプレイヤーを取得して再生できます。この時点では SDK はまだリソースのロードと検出が初期化されていないため、元の画面のみ表示されます。sdk.on('cameraReady', async () => {// SDKのplayerを初期化します。my-dom-idはプレーヤーを配置するコンテナIDを表しますconst player = await sdk.initLocalPlayer('my-dom-id')// 直接再生await player.play()})
sdk.on('ready', async () => {// SDKのplayerを初期化します。my-dom-idはプレーヤーを配置するコンテナIDを表しますconst player = await sdk.initLocalPlayer('my-dom-id')// 直接再生await player.play()})
sdk.getOutput()メソッドを内蔵しており、ユーザーが使いやすいようになっています。メソッド名 | 説明 | 入力パラメータ | 戻り値 |
play | 再生 | - | Promise; |
pause | 一時停止(ストリームは停止せず、再開可能) | - | - |
stop | 停止(ストリームも停止) | - | - |
mute | ミュート | - | - |
unmute | ミュート解除 | - | - |
setMirror | ミラーリング設定 | true|false | - |
getVideoElement | 内蔵 video オブジェクトの取得 | - | HTMLVideoElement |
destroy | 破棄 | - | - |
camera.muteVideoを呼び出すと、この時点でデバイスビデオストリームが無効になります。この状態で localPlayer が play を再度呼び出しても、実質的に停止状態のままです。camera.unmuteVideoを呼び出すと、ビデオストリームが再度有効になります。この時点で localPlayer はデフォルトで自動的に再生状態に戻ります。const output = await sdk.getOutput()
MediaStreamタイプになります。audioトラックがある場合はそのまま維持されます。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 | 現在のカメラビデオとオーディオデバイスを停止する | - | - |
フィードバック