사용자 정의 스트림

SDK 통합

1단계: SDK 가져오기

import { ArSdk } from 'tencentcloud-webar';// SDK 클래스
프로젝트에 컴파일이 필요하지 않은 경우 다음 방법을 사용하여 SDK를 가져올 수도 있습니다.
<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>

2단계: 인스턴스 초기화

1. SDK 인스턴스를 초기화합니다.
// 인증 매개변수 가져오기
const authData = {
licenseKey: 'xxxxxxxxx',
appId: 'xxx',
authFunc: authFunc // 자세한 내용은 「License 구성 및 사용 - 서명」 참고
};
// SDK 입력 스트림
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: { width: w, height: h }
})

const config = {
module: { // 0.2.0의 새로운 기능
beautify: true, // 스티커는 물론 뷰티 및 메이크업 효과를 제공하는 효과 모듈 활성화 여부
segmentation: true // 배경을 변경할 수 있는 키잉 모듈 활성화 여부
},
auth: authData, // 인증 매개변수
input: stream, // input 스트림
beautify: { // 초기화를 위한 효과 매개변수(선택 사항)
whiten: 0.1,
dermabrasion: 0.3,
eye: 0.2,
chin: 0,
lift: 0.1,
shave: 0.2
}
}
const sdk = new ArSdk(
// sdk를 초기화하기 위해 config 객체 전달
config
)
주의사항:
효과 및 세그먼트 모듈을 로딩하는 데 시간이 걸리고 리소스가 소모됩니다. 초기화 중에 필요한 모듈만 활성화할 수 있습니다. 활성화되지 않은 모듈은 로딩되거나 초기화되지 않으며 해당 기능을 사용할 수도 없습니다.
2. input의 경우 string|HTMLImageElement를 전달하여 이미지를 처리할 수도 있습니다.
const config = {
auth: authData, // 인증 매개변수
input: 'https://xxx.png', // input 스트림
}
const sdk = new ArSdk(
// sdk를 초기화하기 위해 config 객체 전달
config
)

// created 콜백에 효과 및 필터 목록을 표시할 수 있습니다. 자세한 내용은 「SDK 통합 - 매개변수 및 API」 참고
sdk.on('created', () => {
// 내장 메이크업 효과 가져오기
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)
})

3단계: 스트림 재생

ArSdk.prototype.getOutput을 호출하여 출력 스트림을 가져옵니다.
다른 콜백에서 얻는 출력 스트림은 약간 다릅니다. 귀하의 필요에 맞는 것을 선택하십시오.
가능한 한 빨리 비디오 이미지를 표시하려면 cameraReady 콜백에서 스트림을 가져와서 재생하십시오. SDK가 리소스를 로딩하지 않았거나 초기화를 완료하지 않았기 때문에 원본 동영상만 재생할 수 있습니다.
sdk.on('cameraReady', async () => {
// cameraReady 콜백에서 출력 스트림을 가져와 비디오 이미지를 더 빨리 표시할 수 있습니다. 그러나 이 시점에서 초기화 매개변수가 적용되지 않았기 때문에 얻은 출력 스트림은 원래 스트림과 동일합니다.
// 가능한 한 빨리 비디오 이미지를 표시하고 싶지만 표시되는 순간 비디오에 뷰티 효과를 적용할 필요가 없는 경우 이 방법을 선택할 수 있습니다.
// 뷰티 효과가 작동하기 시작한 후에는 stream을 업데이트할 필요가 없습니다.
const output = await ar.getOutput();
// video를 사용하여 출력 스트림을 미리보기
const video = document.createElement('video')
video.setAttribute('playsinline', '');
video.setAttribute('autoplay', '');
video.srcObject = output
document.body.appendChild(video)
video.play()
})
초기화 및 효과 적용 후 동영상을 재생하려면 ready 재생에서 출력 스트림을 가져와서 재생하십시오.
sdk.on('ready', async () => {
// ready 콜백에서 출력 스트림을 가져오면 초기화 뷰티 효과 매개변수가 이 시점에서 적용되었기 때문에 얻은 output stream에 뷰티 효과가 표시됩니다.
// ready 콜백은 cameraReady보다 늦게 발생합니다. 비디오가 표시되는 순간 효과를 보여주길 원하지만 가능한 한 빨리 표시되기를 기대하지 않는 경우 output 스트림을 ready 상태로 가져올 수 있습니다.
const output = await ar.getOutput();
// video를 사용하여 출력 스트림 미리보기
const video = document.createElement('video')
video.setAttribute('playsinline', '');
video.setAttribute('autoplay', '');
video.srcObject = output
document.body.appendChild(video)
video.play()
})

4단계: 출력 가져오기

MediaStream을 가져온 후 라이브 스트리밍 SDK(예: TRTC Web SDK 또는 LEB Web SDK)를 사용하여 스트림을 게시할 수 있습니다.
const output = await sdk.getOutput()
주의사항:
전달된 input이 이미지인 경우 string 형식의 DataURL이 반환됩니다. 그렇지 않으면 MediaStream이 반환됩니다.
출력 스트림의 video 트랙은 ArSdk에 의해 실시간으로 처리됩니다. audio 트랙(있는 경우)이 유지됩니다.
getOutput은 비동기 API입니다. SDK 초기화가 완료되고 스트림을 생성할 수 있는 경우에만 출력이 반환됩니다.
FPS 매개변수를 getOutput에 전달하여 출력 프레임 레이트(예시: 15)를 지정할 수 있습니다. 이 매개변수를 전달하지 않으면 원래 프레임 레이트가 유지됩니다.
getOutput을 여러 번 호출하여 다양한 시나리오에 대해 서로 다른 프레임 레이트의 스트림을 생성할 수 있습니다(예시: 미리 보기에는 높은 프레임 레이트를 사용하고 스트림 게시에는 낮은 프레임 레이트를 사용할 수 있음).

5단계: 필터 및 효과 구성

자세한 내용은 Configuring Filters and Effects를 참고하십시오.

입력 스트림 업데이트(v0.1.19부터 지원)

장치를 변경하거나 카메라를 활성화/비활성화한 후 새 입력 스트림을 sdk에 공급하려는 경우 sdk를 다시 초기화할 필요가 없습니다. 입력 스트림을 업데이트하려면 sdk.updateInputStream을 호출하기만 하면 됩니다.
다음 코드는 컴퓨터의 기본 카메라에서 외부 카메라로 전환한 후 updateInputStream을 사용하여 입력 스트림을 업데이트하는 방법을 보여줍니다.

async function getVideoDeviceList(){
const devices = await navigator.mediaDevices.enumerateDevices()
const videoDevices = []
devices.forEach((device)=>{
if(device.kind === 'videoinput'){
videoDevices.push({
label: device.label,
id: device.deviceId
})
}
})
return videoDevices
}

async function initDom(){
const videoDeviceList = await getVideoDeviceList()
let dom = ''
videoDeviceList.forEach(device=>{
dom = `${dom}
<button id=${device.id} onclick='toggleVideo("${device.id}")'>${device.label}<nbutton>
`
})
const div = document.createElement('div');
div.id = 'container';
div.innerHTML = dom;
document.body.appendChild(div);
}

async function toggleVideo(deviceId){
const stream = await navigator.mediaDevices.getUserMedia({
video: {
deviceId,
width: 1280,
height: 720,
}
})
// sdk에서 제공하는 API를 호출하여 입력 스트림을 변경합니다. SDK는 기존 트랙을 stop합니다.
// 입력 스트림이 업데이트된 후에는 getOutput을 다시 호출할 필요가 없습니다. SDK가 출력을 가져옵니다.
sdk.updateInputStream(stream)
}

initDom()


감지 일시 중지 및 재개

disable 및 enable을 호출하여 수동으로 감지를 일시 중지하고 다시 시작할 수 있습니다. 감지를 일시 중지하면 CPU 사용량을 줄일 수 있습니다.
<button id="disable">감지 비활성화</button>
<button id="enable">감지 활성화</button>
// 감지를 비활성화하고 원본 스트림 출력
disableButton.onClick = () => {
sdk.disable()
}
// 감지 활성화 및 처리된 스트림 출력
enableButton.onClick = () => {
sdk.enable()
}