웹앱을 빌드할 때 고려해야 할 중요한 요소는 비디오를 페이지 레이아웃에 가장 잘 통합하는 방법입니다. 비디오의 배치 및 수는 페이지 성능, 사용자 품질 환경 및 전반적인 미학에 영향을 미칠 수 있습니다. 이 문서에는 개발자가 웹 페이지에 배치할 비디오 수와 최종 사용자 환경을 최적화하기 위한 최상의 비디오 해상도 크기를 결정하는 데 도움이 되는 지침이 포함되어 있습니다.
비디오 해상도 이해
개발자는 비디오 해상도에 대한 중요한 세부 정보를 알아야 합니다. 해상도는 비디오 출력에 표시되는 픽셀 수를 나타내며, 일반적으로 형식으로 width x height 측정됩니다. 해상도가 높을수록 픽셀이 많아지고 이미지가 선명하고 선명해지게 됩니다. Azure Communication Services 영상 통화에서 사용할 수 있는 들어오는 비디오 해상도는 다음과 같습니다.
- 1080p(전체 HD): 1920 x 1080픽셀
- 720p(HD): 1280 x 720픽셀
- 540p(qHD): 960 x 540픽셀
- 360p(SD): 640 x 360픽셀
- 240p: 426 x 240픽셀
- 180p: 320 x 180픽셀
비디오 품질에 영향을 주는 요인
여러 요인은 웹 페이지에 효과적으로 배치할 수 있는 비디오 수에 영향을 줍니다. 이러한 요인에는 디바이스 유형, 해상도, 사용 가능한 대역폭 및 사용자 환경 고려 사항이 포함됩니다.
로컬 디바이스 기능
웹 페이지를 표시하는 데 사용되는 디바이스 유형이 중요한 역할을 합니다. 예를 들어 화면이 큰 데스크톱 및 노트북은 모바일 장치보다 더 많은 비디오를 수용할 수 있습니다. 반응형 디자인 기법을 사용하여 화면 크기에 따라 비디오의 수와 크기를 조정하는 것이 좋습니다.
또한 로컬 컴퓨터는 이러한 비디오를 제대로 처리, 인코딩 및 표시해야 합니다. 로컬 모니터 화면 및 브라우저 기능의 크기도 웹 페이지에 동시에 표시할 수 있는 활성 비디오 수를 결정합니다.
해상도 및 비디오 화면 크기
최종 사용자 디바이스의 표시 해상도는 페이지당 표시할 수 있는 비디오 수에 직접 영향을 줍니다. 모니터 및 화면 해상도가 높을수록 더 많은 비디오를 표시할 수 있습니다.
페이지에 비디오를 배치할수록 필요한 인터넷 대역폭이 증가합니다. 또한 로컬 컴퓨터에는 비디오를 제대로 인코딩하고 표시할 수 있는 충분한 성능 기능이 있어야 합니다.
비디오 품질과 성능의 균형을 맞추는 것이 좋습니다. 화면의 모든 픽셀을 비디오 출력으로 채우지 마세요. 이로 인해 사용자가 과부하가 될 수 있습니다. 페이지에 비디오를 더 추가할 때 들어오는 대역폭과 나가는 대역폭을 고려합니다.
인터넷 대역폭 고려 사항
최종 사용자 환경을 개선하려면 인터넷 속도를 측정하는 방법과 영향을 줄 수 있는 요인을 이해해야 합니다. 인터넷 속도는 일반적으로 초당 메가비트(Mbps)로 측정되며, 이는 데이터를 다운로드하거나 업로드하는 속도를 나타냅니다. 인터넷 연결 유형(파이버, 케이블, 와이파이, 셀룰러), 네트워킹 장비의 품질(모뎀, 라우터), 네트워크에 연결된 디바이스 수를 비롯한 여러 가지 요인이 이러한 속도에 영향을 줄 수 있습니다.
웹 페이지에 여러 비디오를 배치하는 경우 사용자의 네트워크 대역폭을 고려합니다. 더 높은 해상도의 비디오를 스트리밍하려면 더 많은 데이터가 필요합니다. 페이지에 배치되는 전체 비디오가 많을수록 각 비디오의 대역폭이 더 많이 소비됩니다. 다른 사용자가 전체 대역폭 처리량이 낮은 연결을 통해 인터넷에 연결하는 경우 고해상도 비디오 또는 페이지에서 여러 비디오를 스트리밍하는 기능이 제한됩니다. 반대로 인바운드 및 아웃바운드 트래픽 모두에 대해 인터넷 대역폭이 더 높은 경우 고해상도 비디오를 전달 및 사용하고 페이지에서 더 많은 비디오를 수용할 수 있습니다.
들어오는 비디오 스트림을 처리하는 방법을 가장 최적화하는 방법
웹 UI 라이브러리 사용
Azure Communication Services 웹 UI 라이브러리 는 매끄럽고 시각적으로 매력적인 웹 애플리케이션을 만들려는 개발자를 위한 강력한 도구입니다. 웹 UI 라이브러리는 통합하기 쉽고 사용자 지정할 수 있는 미리 빌드된 포괄적인 UI 구성 요소 집합을 제공합니다. 이 솔루션을 사용하면 개발자가 처음부터 디자인하는 대신 기능 빌드에 집중할 수 있습니다.
웹 UI 라이브러리는 다양한 프로젝트 및 플랫폼에서 일관된 디자인 표준을 보장하여 사용자 환경을 향상시키고 개발 시간을 단축합니다. 광범위한 설명서와 적극적인 커뮤니티 지원을 통해 초보자와 숙련된 개발자 모두에게 훌륭한 선택이 될 수 있습니다. 웹 UI 라이브러리를 적용하여 워크플로를 간소화하고, 전문가 수준의 인터페이스를 만들고, 매력적인 웹 애플리케이션을 보다 효율적으로 제공할 수 있습니다. 또한 웹 UI 라이브러리를 사용하면 한 번에 최적으로 구독할 수 있는 비디오 수를 결정하는 추측이 제거됩니다.
최적의 비디오 수 API 사용
Azure Communication Services WebJS SDK는 그룹 호출 중에 최적으로 렌더링할 수 있는 여러 참가자의 들어오는 비디오 수를 애플리케이션에 알리는 OVC(최적 비디오 수) 를 도입했습니다. 이 속성은 optimalVideoCount네트워크 대역폭 및 하드웨어 기능에 따라 동적으로 조정됩니다.
최적의 비디오 수는 웹 페이지에 표시할 수 있는 이상적인 비디오 수를 정의하는 정수를 반환합니다. 애플리케이션은 OVC의 출력에 따라 렌더링되는 비디오 수를 업데이트해야 합니다.
개발자는 애플리케이션이 그룹 호출의 Optimal Video Count 변경 내용을 구독하고 OVC 수에 따라 웹 페이지에서 렌더링되는 비디오 수를 동적으로 조정해야 합니다. OVC(최적 비디오 수)의 값은 10초마다 업데이트됩니다.
Call 객체의 기능 메서드를 통해 OptimalVideoCount 기능을 참조해야 합니다. optimalVideoCount가 변경되면 알림을 받을 수 있도록 OptimalVideoCountCallFeature의 on 메서드를 통해 수신기를 설정할 수 있습니다.
변경 내용을 구독 취소하려면 off 메서드를 호출할 수 있습니다. 웹 페이지에서 렌더링할 수 있는 들어오는 비디오의 현재 최대 수는 16개입니다. 16개의 들어오는 비디오를 제대로 지원하려면 컴퓨터에 최소 16GB RAM과 3년 미만인 4코어 이상의 CPU가 있어야 합니다.
const optimalVideoCountFeature = call.feature(Features.OptimalVideoCount);
optimalVideoCountFeature.on('optimalVideoCountChanged', () =\> {
const localOptimalVideoCountVariable = optimalVideoCountFeature.optimalVideoCount;
})
최적의 비디오 개수 값이 변경되면 들어오는 비디오의 로컬 컴퓨터 용량이 증가했음을 나타내는 경우 이 메서드를 사용하여 createView 새 들어오는 비디오를 만들어 페이지에 표시할 더 많은 들어오는 비디오 스트림을 표시할 수 있습니다.
반대로, 최적 수가 감소하고 페이지의 현재 비디오 수보다 작으면 dispose 메서드를 사용하여 비디오를 삭제하고 그에 따라 애플리케이션 레이아웃을 업데이트하는 것이 좋습니다.
페이지에 1080p 또는 720p 비디오를 추가할 때 고려해야 할 사항입니다.
- 1080p 들어오는 비디오 하나를 배치하고 나머지는 720p보다 작게 배치할 수 있습니다.
- 720p 들어오는 비디오 두 개를 배치하고, 나머지 비디오는 720p보다 작게 할 수 있습니다.
WebJS 호출 SDK는 1080p 비디오 스트리밍을 지원합니다. 웹 데스크톱 브라우저에서 1080p를 보내려면 SDK를 호출하는 GA 또는 공개 미리 보기 버전 134.1 이상을 사용해야 합니다.
예를 들어 7명의 참가자가 비디오 카메라를 켜고 있는 그룹 통화에서 각 클라이언트 페이지에서 두 명의 참가자 비디오를 더 높은 해상도로 표시할 수 있습니다. 이 두 참가자는 웹 페이지의 보기를 너비가 1280픽셀(이상)인 720픽셀로 설정하여 비디오를 720p로 표시하도록 설정했습니다. 나머지 5개의 참가자 비디오는 360p 이하와 같은 낮은 해상도로 설정해야 합니다.
렌더링된 비디오의 총 수가 OVC(최적 비디오 수) 값을 초과하지 않는지 확인합니다.
각 클라이언트는 특정 사용자로부터 비디오 피드를 선택하고 개별 디바이스에서 해상도 크기를 조정할 수 있습니다.
특정 비디오 해상도를 보내는 각 참가자의 기능은 다를 수 있습니다. 일부 컴퓨터에는 고품질 카메라가 장착되어 있어 1080p 비디오를 전송할 수 있습니다. 반대로 일부 모바일 브라우저는 540p와 같이 비디오 전송 기능이 낮습니다. 페이지에 비디오 해상도를 1080p 또는 720p로 포함하는 경우 들어오는 비디오가 해당 해상도와 일치하지 않을 수 있습니다. 이 경우 시스템은 비디오 스트림의 크기를 조정하여 비디오 렌더러 크기를 채웁니다.
현재 최대 2개의 720p 비디오 스트림을 웹 페이지에 렌더링할 수 있습니다. 두 개 이상의 720p 스트림을 사용하도록 설정하면 모든 720p 비디오 변환이 540p에서 스트리밍됩니다.
사용자가 구독할 수 있는 들어오는 원격 스트림의 최대 수는 16개의 비디오 스트림과 데스크톱 브라우저에서 1개(1) 화면 공유, 4개의 (4) 비디오 스트림과 웹 모바일 브라우저에서 1개의 화면 공유입니다.
Azure Communication Services 비디오 Simulcast 기능은 최종 클라이언트가 여러 해상도 및 비트 전송률로 동시에 제공하는 단일 비디오를 사용하도록 설정하여 비디오 스트리밍을 향상시킵니다.
이 함수를 사용하면 다양한 네트워크 조건을 가진 시청자가 버퍼링 또는 중단 없이 최상의 비디오 품질을 위해 받을 비디오 변환을 선택할 수 있습니다. 대역폭 사용을 최적화하여 simulcast는 고해상도 스트림을 지원할 수 있는 사용자에게만 보냅니다. 이 동작은 불필요한 데이터 전송을 최소화합니다. Simulcast는 안정적이고 일관된 비디오 품질을 제공하여 전반적인 사용자 환경을 개선하고 적응 스트리밍을 가능하게 합니다.
Simulcast는 모든 브라우저, 특히 모바일 브라우저 및 macOS Safari에서 지원되지 않습니다. iOS Safari, Android Chrome 또는 macOS Safari를 사용하는 참가자가 720p 비디오를 렌더링하고 다른 참가자가 낮은 해상도로 동일한 비디오를 렌더링하려고 하면 둘 다 더 낮은 해상도를 받습니다. 이 문제는 동시 전송이 지원되지 않는 경우 이러한 디바이스가 더 작은 해상도의 우선 순위를 지정하기 때문에 발생합니다.
1080p 스트림을 보내도록 구성하는 방법
WebJS SDK를 사용하여 1080p 해상도로 비디오를 보내는 경우 Video Constraints API를 사용하고 1080p를 사용하도록 지정해야 합니다. Video Constraints API가 사용되지 않고 1080p가 지정되지 않은 경우 기본 비디오 스트림 해상도는 720p입니다.
const callOptions = {
videoOptions: {
localVideoStreams: [...],
constraints: {
send: {
height: {
max: 1080
}
}
}
},
audioOptions: {
muted: false
}
};
// make a call
this.callAgent.startCall(identitiesToCall, callOptions);
1080p 비디오 스트림을 보낼 때 주의해야 할 항목
- 카메라는 1080p 비디오를 보낼 수 있어야 합니다. 카메라가 지원하는 해상도를 확인하려면 다음 JavaScript 예제를 사용하여 사용 가능한 해상도를 확인할 수 있습니다.
async function getSupportedResolutions() {
const constraints = {
video: {
width: { ideal: 4096 }, // Try to get the maximum width
height: { ideal: 2160 } // Try to get the maximum height
}
};
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
const videoTrack = stream.getVideoTracks()[0];
const settings = videoTrack.getSettings();
console.log(`Supported resolution: ${settings.width}x${settings.height}`);
// Stop the video track to release the camera
videoTrack.stop();
} catch (error) {
console.error('Error accessing media devices.', error);
}
}
getSupportedResolutions();
- 1080p를 보내는 컴퓨터에는 1080p 전송을 지원할 수 있는 강력한 컴퓨터가 있어야 합니다.
- 수신자 쪽에 있는 클라이언트(1080p 비디오를 수락하는 사람)에는 1080p를 허용하려면 1080p를 사용할 수 있는 비디오 렌더링 HTML5 요소가 있어야 합니다. 통화 중인 참가자가 비디오를 수신할 수 있는 1080p 요소가 없는 경우 통화가 조정되고 더 작은 해상도로 협상됩니다.
- 1080p 비디오 스트림을 보내고 받는 통화의 모든 사용자에게는 1080p 스트림을 지원하는 대역폭이 있어야 합니다.
| 해결 방법 | 최소 프레임 속도 | 최대 프레임 속도 | 최대 비트 전송률 |
|---|---|---|---|
| 1080p | 30 | 30 | 4M |
| 720p | 30 | 30 | 2.5백만 |
| 540p | 30 | 30 | 2M |
| 360p | 30 | 30 | 1백만 |
| 240p | 15 | 15 | 650K |
| 180p | 7.5 | 15 | 250K(15FPS인 경우 350K) |
한 번에 그리드에 배치할 비디오 수
Azure Communication Services WebJS Calling SDK가 계속 발전함에 따라, 주요 기능 중 하나는 데스크톱 및 모바일 브라우저에서 그리드 레이아웃으로 다수의 들어오는 비디오 스트림을 지원하는 것입니다. 이 기능은 여러 참가자가 동시에 표시되어야 하는 가상 교실, 대규모 팀 모임 또는 고객 지원 센터와 같은 시나리오에 유용합니다.
그러나 이러한 확장성은 렌더링된 비디오 스트림의 수와 각 스트림의 시각적 품질 간에 절충을 수반합니다. 전체 화면 영역이 고정되어 있으므로 비디오 타일 수를 늘리면 각 개별 비디오 렌더러가 화면의 더 작은 부분을 차지해야 합니다. 성능을 유지하고 브라우저의 렌더링 파이프라인 오버로드를 방지하기 위해 SDK는 렌더링된 크기에 따라 들어오는 각 비디오 스트림의 해상도를 동적으로 조정합니다. 이렇게 하면 대역폭 및 CPU 사용량이 허용 가능한 한도 내에서 유지되지만 더 많은 참가자가 참가할수록 그리드를 수용하기 위해 각 비디오의 해상도가 감소할 수 있습니다.
이 적응 동작은 안정적인 사용자 성능을 보장하는 데 도움이 됩니다. 예를 들어 참가자가 4명인 2x2 그리드에서 각 비디오를 더 높은 해상도로 렌더링할 수 있습니다. 반면 25명의 참가자를 표시하는 5x5 그리드에서는 각 타일이 더 작고 SDK는 디스플레이 크기에 맞게 비디오 스트림을 축소할 수 있습니다. 이 방법을 사용하면 대역폭 사용량이 줄어들고 프레임이 삭제되거나 지연될 가능성이 낮아집니다. 최대 25개의 들어오는 비디오 스트림을 지원하려면 최소 8코어 프로세서와 16GB RAM이 있는 컴퓨터를 사용하는 것이 좋습니다.
다음 표에서는 들어오는 비디오 표에 표시되는 참가자 수에 따라 비디오 해상도가 한 번에 어떻게 변경되는지 보여 줍니다.
| 들어오는 스트림 수 | 들어오는 비디오 해상도 |
|---|---|
| 1 | 1080p |
| 2 | 720p |
| 3 | 540p |
| 4-9 | 360p |
| 10~16 | 240p |
| 17-25 | 180p |
비고
호출 WebJS SDK의 GA 버전은 데스크톱 브라우저(4x4 그리드)에 대해 최대 16 개의 들어오는 비디오 스트림을 허용합니다.
비고
퍼블릭 프리뷰 1.37.1-beta.1 이상 버전의 호출 WebJS SDK는 현재 데스크톱 브라우저에서 최대 25개의 비디오 스트림(5x5 그리드 형태)을 지원합니다.
결론
웹 페이지에 배치할 비디오 수를 확인하려면 해상도, 디바이스 유형, 대역폭 및 사용자 환경을 신중하게 고려해야 합니다. 이러한 지침 및 모범 사례를 따라 매력적으로 보일 뿐만 아니라 원활하게 작동하는 웹앱을 만들어 다양한 디바이스 및 연결 속도에서 사용자에게 최적의 보기 환경을 제공합니다.
관련 문서
WebJS SDK 내에서 미디어 품질 통계 API를 사용하여 실시간 비디오 전송 및 수신 해상도를 확인할 수 있습니다. 자세한 내용은 미디어 품질을 참조하세요.