부가 기능
부가 기능에서는 필수 개발 작업이 아닌 부가적인 개발 또는 제어 기능을 설명합니다.
미디어 처리
SDK에서는 다양한 미디어 처리 기능을 지원합니다.
오디오 레벨 획득 및 오디오 레벨 미터 생성하기
getRemoteAudioLevels() 메서드를 호출하여 리모트 참여자들과 이들의 오디오 레벨을 배열 형태로 획득할 수 있습니다. 이 정보를 활용해 다음 그림과 같이 오디오 레벨 미터를 표시할 수 있습니다.
그림오디오 레벨 미터
코드예제오디오 레벨 미터 표시 Syntax
<style>
.containerStyle {
width: 28px;
height: 28px;
background-color: yellow;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: black;
position: absolute;
left: 5px;
top: 5px;
}
.barStyle {
width: 3px;
border-radius: 3px;
background-color: black;
transition: height 0.1s linear;
will-change: height;
margin-left: 1px;
}
</style>
<div class="containerStyle">
<!-- 왼쪽 막대 -->
<div class="barStyle" id="lvl0"></div>
<!-- 가운데 막대 -->
<div class="barStyle" id="lvl1"></div>
<!-- 오른쪽 막대 -->
<div class="barStyle" id="lvl2"></div>
</div>
오디오 레벨 값의 범위는 0 ~ 100까지의 정수입니다. 다음 예제에서는 이 값을 scale() 메서드에 넘겨 계산된 값을 얻을 수 있습니다.
이때 막대(bar)의 최소 길이는 2px이며, 양 옆의 막대는 최대 20px, 가운데 막대는 최대 30px의 길이로 표현하고 있습니다. 오디오 레벨을 이용해 다양한 스타일의 레벨 미터를 생성할 수 있습니다.
코드예제오디오 설정 변경 Syntax
const scale = (value, total, max) => {
const val = (value / total * max);
return val < 2 ? 2 : val;
}
window.setInterval(()=>{
const audioLevels = room.getRemoteAudioLevels();
audioLevels.remoteParticipants.forEach((audioParticipant)=>{
const lvl = audioParticipant.level;
// 왼쪽 막대
document.getElementById('lvl0').style.height = scale(lvl, 100, 20) + 'px';
// 가운데 막대
document.getElementById('lvl1').style.height = scale(lvl, 100, 30) + 'px';
// 오른쪽 막대
document.getElementById('lvl2').style.height = scale(lvl, 100, 20) + 'px';
});
}, 250);
수신 중인 비디오 품질 변경하기
수신 중인 각 리모트 비디오의 품질을 변경할 수 있습니다. 비디오 품질은 low, middle, high로 표현됩니다. 기본값은 low이며, 필요시 middle 또는 high로 변경할 수 있습니다.
단, h(높은 품질)로 설정 시, 디바이스 성능에 영향이 있을 수 있으므로, 설정에 유의해야 합니다. 메서드에 대한 상세는 setQuality()를 참고하시기 바랍니다.
코드예제비디오 품질 변경 Syntax
const remoteVideo = remoteParticipant.getVideo('{비디오 아이디}')
await remoteVideo.setQuality('h');
카메라 장치 변경하기
switchCamera() 메서드를 사용하여 접근 중인 카메라 장치를 변경할 수 있습니다. 예를 들어 컴퓨터의 기본 카메라를 사용하다가 외장 카메라로 변경할 수 있습니다. 만약 switchCamera() 메서드 호출 시 이미 Room에 접속해 비디오를 송신하고 있다면, 기존 비디오 영상을 제거하고 새로운 카메라로 연결됩니다. 메서드에 대한 상세는 switchCamera()를 참고하시기 바랍니다.
코드예제카메라 장치 변경 Syntax
// 1. localMedia 생성
const localMedia = ConnectLive.createLocalMedia({ video: true });
// 2. 기존 카메라를 화면에 표시
document.querySelector('.local-container').appendChild(localMedia.video.attach());
// 3. 디바이스 목록 가져오기
const cameraDevices = await localMedia.getCameraDevices();
// 4. 기존 비디오 삭제
localMedia.video.detach();
// 5. 카메라 전환(해당 메서드 호출 전에 publish가 수행되어 비디오를 송신 중이라면 기존 비디오를 제거하고 송신을 이어갑니다)
await localMedia.switchCamera(cameraDevices[0].deviceId);
// 6. 새로운 카메라를 화면에 표시
document.querySelector('.local-container').appendChild(localMedia.video.attach());
마이크 장치 변경하기
switchMic() 메서드를 사용하여 접근 중인 마이크 장치를 변경할 수 있습니다. 예를 들어 컴퓨터의 기본 마이크를 사용하다 블루투스 마이크로 변경할 수 있습니다. 만약 switchMic() 메서드 호출 시 이미 Room에 접속해 오디오를 송신하고 있다면, 기존 오디오를 제거하고 새로운 마이크로 연결됩니다. 메서드에 대한 상세는 switchMic()를 참고하시기 바랍니다.
코드예제마이크 장치 변경 Syntax
// 1. localMedia 생성
const localMedia = ConnectLive.createLocalMedia({ audio: true });
// 2. 디바이스 목록 가져오기
const micDevices = await localMedia.getMicDevices();
// 3. 오디오 전환(해당 메서드 호출 전에 publish가 수행되어 오디오를 송신 중이라면 기존 오디오를 제거하고 송신을 이어갑니다)
await localMedia.switchMic(micDevices[0].deviceId);
스피커 장치 변경하기
switchSpeaker() 메서드를 사용하여 오디오를 재생 중인 스피커를 변경할 수 있습니다. 예를 들어 노트북 스피커에서 이어폰으로 변경할 수 있습니다. switchSpeaker() 메서드는 localMedia가 아닌 Room 객체에서 제공하고 있습니다. 메서드에 대한 상세 정보는 switchSpeaker()를 참고하시기 바랍니다.
코드예제스피커 장치 변경 Syntax
// 1. localMedia 생성
const localMedia = ConnectLive.createLocalMedia({ audio: true });
// 2. 디바이스 목록 가져오기
const speakerDevices = await localMedia.getSpeakerDevices();
// 3. 스피커 전환
await room.switchSpeaker(speakerDevices[0].deviceId);
HD 모드 적용하기
setQuality() 메서드는 수신 중인 비디오 품질을 다룹니다. 로컬 비디오의 송신 품질을 향상할 수 있는 방법으로 setHd() 메서드를 통해 HD 모드를 적용할 수 있습니다. HD 모드 적용 시, 반드시 publish() 메서드 호출 전에 setHD() 메서드를 호출해야 합니다. 메서드에 대한 상세 정보는 setHd()를 참고하시기 바랍니다.
코드예제HD 모드 적용 Syntax
// 1. localMedia 생성
const localMedia = ConnectLive.createLocalMedia({ video: true });
// 2. HD 모드 적용하기
localMedia.video.setHd(true);
화면 공유
카카오 i 커넥트 라이브 SDK 2.0은 프레젠테이션을 위한 화면 공유를 지원합니다. 화면 공유용 미디어 객체를 얻기 위해서는 createLocalScreen() 메서드를 사용해야 합니다.
화면 공유용 객체 선언 시 audio 옵션을 줄 수 있습니다. 이 경우 공유한 브라우저에서 현재 오디오가 재생되고 있다면, 해당 오디오도 함께 공유됩니다. 메서드에 대한 상세 정보는 createLocalScreen()를 참고하시기 바랍니다.
코드예제화면 공유 미디어 객체 획득 Syntax
const localScreen = await ConnectLive.createLocalScreen({
audio: true,
video: true
});
// 생성한 미디어는 localMedia와 동일하게 publish로 공유할 수 있습니다.
await room.publish([localScreen]);
화면 공유 미디어 표시하기
화면 공유용 객체를 생성했다면, setExtraValue() 메서드를 사용하여 해당 객체가 화면 공유를 위한 비디오임을 표시할 수 있습니다. setExtraValue() 메서드는 원하는 형태의 문자열 값을 추가할 수 있고, 이 값을 리모트 참여자들과 공유할 수 있습니다. 생성한 객체가 화면 공유용이라는 점을 식별할 수 있는 값을 입력하여 화면 공유 미디어를 표시할 수 있습니다. 여기서는 screen이라는 문자열 값을 입력했지만, 어떠한 값이든 추가하여 사용할 수 있습니다.
코드예제화면 공유 미디어 표시 Syntax
localScreen.video.setExtraValue('screen');
화면 공유 비디오는 서비스마다 다르게 보일 수 있습니다. 예를 들어, 화면 공유 비디오를 가운데 위치시켜 크게 보이도록 하거나 혹은 모든 참여자가 공유한 화면 공유 비디오를 바둑판식으로 배열할 수도 있습니다.
이 경우, 다른 일반 비디오와 화면 공유용 비디오를 구분해야 할 필요가 있습니다. RemoteVideo 객체는 videoId 외에 extraValue라는 값을 전달합니다. 이 값을 이용해 리모트 참여자가 공유한 영상이 화면 공유용 비디오인지 구분할 수 있습니다.
코드예제connected 이벤트 발생 시 비디오 구분 Syntax
room.on('connected', (evt)=>{
//기존 참여자 배열을 순회하며 비디오 구독 및 엘리먼트 생성
evt.participants.forEach(async (participant) => {
const unsubscribeRemoteVideos= participant.getUnsubscribeVideos();
if(unsubscribeRemoteVideos[0].extraValue === 'screen') {
//화면 공유용 비디오 구독 및 화면에 표시
const remoteVideos = await room.subscribe([unsubscribeRemoteVideos[0].videoId]);
document.querySelector('.remote-container').appendChild(remoteVideos[0].attach());
} else {
//일반 비디오
}
});
});
코드예제remoteVideoPublished 이벤트 발생 시 비디오 구분 Syntax
room.on('remoteVideoPublished', (evt)=>{
if(evt.remoteVideo.extraValue === 'screen') {
//화면 공유용 비디오 구독 및 화면에 표시
const remoteVideos = await room.subscribe([evt.remoteVideo.videoId]);
document.querySelector('.remote-container').appendChild(remoteVideos[0].attach());
} else {
//일반 비디오
}
});