Site icon 지락문화예술공작단

Amazon IVS 웹 브로드캐스트 SDK 를 사용하여 브라우저에서 브로드캐스트하기

KENNETH

Amazon IVS 웹 브로드캐스트 SDK 를 사용하여 브라우저에서 브로드캐스트하기

Amazon Interactive Video Service (Amazon IVS)를 사용하면 이제 IVS 웹 브로드캐스트 SDK를 사용하여 웹 브라우저에서 직접 스트리밍할 수 있는 브로드캐스트 라이브 스트림을 시작할 수 있습니다.

Amazon IVS는 빠르고 쉽게 설정할 수 있는 관리형 라이브 스트리밍 솔루션이며 대화형 비디오 경험을 만드는 데 이상적입니다. Open Broadcaster Software(OBS)와 같은 표준 스트리밍 소프트웨어를 사용하거나 IVS 웹 브로드캐스트 SDK를 사용하여 브라우저를 열면 라이브 스트림을 Amazon IVS로 보낼 수 있습니다. 이 서비스는 전 세계 모든 시청자가 저지연 비디오를 사용할 수 있도록 하는 데 필요한 모든 작업을 수행하도록 설계되어 여러분이 라이브 스트림과 함께 대화형 경험을 구축하는 데 집중할 수 있습니다.

Amazon IVS는 개발자 커뮤니티에서 라이브 스트리밍 통합을 간소화하는 것으로 잘 알려져 있습니다. 짧은 대기 시간을 제공하는 것 외에도 라이브 비디오 서비스는 “즉시” 작동하도록 설계되었습니다. Amazon IVS 플레이어 SDK, timed metadata API, 모바일 브로드캐스트 SDK 및 스트림 채팅 API를 제공합니다. 이제 Amazon IVS는 스트리머 측면에서도 단순화하여 개발자가 웹 브라우저에서 비디오를 Amazon IVS 채널에 대한 입력으로 보낼 수 있습니다.

Amazon IVS 웹 브로드캐스트 SDK는 신규 및 기존 애플리케이션에 통합할 수 있습니다. 카메라 소스, 화면 공유, 카메라 간의 스위칭, 자동 비트 전송률 조절 및 보안 스트리밍을 지원합니다. 지금 바로 사용해 보려면 stream.ivs.rocks를 방문하십시오.

이 블로그 게시물에서는 Amazon IVS 웹 브로드캐스트 SDK 사용을 시작하고 기존 애플리케이션을 마이그레이션하여 SDK를 활용하는 방법에 대한 개요를 제공합니다.

Amazon IVS 웹 브로드캐스트 SDK로 마이그레이션하기

모든 소스에서 Amazon IVS로 비디오를 스트리밍하려면 RTMPS가 필요합니다. 따라서 Amazon IVS 웹 브로드캐스트 SDK 이전에는 웹 애플리케이션에서 스트리밍하려면 콘텐츠를 트랜스코딩하거나 프록시하여 전송 방식을 WebSocket에서 RTMP로 변경하는 서버가 필요했습니다. 이 문제에 대한 한 가지 잠재적인 솔루션을 최근 블로그 게시물에서 설명했습니다.

Amazon IVS 웹 브로드캐스트 SDK의 도입으로 이제 클라이언트에서 전반적인 스트리머를 구현할 수 있으므로 라이브 스트리밍 프록시와 확장성, 비용 및 복원력을 최적화하기 위한 추가 아키텍처 구성 요소가 필요하지 않습니다.

지원되는 기능 및 사용 사례

SDK 사용의 장점

통합 다이어그램

통합 단계

다음으로는 기존 웹 애플리케이션을 Amazon IVS 웹 브로드캐스트 SDK로 마이그레이션 하는데 필요한 통합 단계가 요약되어 있습니다. 자세한 문서는 Getting Started guide 를 참조하십시오.

전체 sample code 구현이 필요한 경우 ivs.rocks 웹사이트에서 최신 예제 모음과 함께 찾을 수 있습니다.

애플리케이션에서 React.js 프레임워크를 사용하는 경우 Simplifying live streaming contribution GitHub 리포지토리를 참조할 수도 있습니다.

  1. IVS 웹 브로드캐스트 SDK 로드

    라이브러리는 npm을 통해서 설치하거나 <script> html 태그를 통해 로드 할 수 있습니다. 이 게시물은 호스팅 된 파일을 사용합니다.
    index.html 파일에서 페이지 head에서 스크립트를 로드 합니다.

    <script src="https://web-broadcast.live-video.net/1.0.0/amazon-ivs-web-broadcast.js"></script>

  2. AmazonIVSBroadcast 클라이언트 인스턴스화

    SDK는 IVSBroadcastClient 전역 변수를 선언하고 우리는 streamConfig 매개변수로 create 메소드를 호출하여 클라이언트의 인스턴스를 생성할 수 있습니다. 이 매개변수는 IVS 채널 클래스 구성(표준 채널 풀 HD 1080p 또는 기본 채널, SD 480p)과 카메라 모드(가로 또는 세로)로 구성됩니다.

    IVSBroadcastClient.STANDARD_LANDSCAPE;

    또한 AWS Management Console에서 얻거나 CreateChannel 또는 GetChannel과 같은 작업을 사용하여 Amazon IVS API에서 반환받게 되는 인제스트 엔드포인트를 제공해야 합니다.

    Amazon IVS Console에서 채널을 찾은 다음 Stream configuration 섹션을 찾습니다. “Other ingest options”에서 인제스트 엔드포인트를 복사하고 다음 단계에서 라이브 방송을 시작하기 위한 매개변수로 사용할 스트림 키도 복사합니다.

    이제 클라이언트 구성을 인스턴스화할 수 있습니다.

    const client = IVSBroadcastClient.create({
    // Enter the desired stream configuration
    streamConfig: IVSBroadcastClient.STANDARD_LANDSCAPE,
    // Enter the ingest endpoint created above
    ingestEndpoint: 'uniqueID.global-contribute.live-video.net',
});

  3. 브라우저 인증 처리 및 스트림 가져오기

    애플리케이션은 MediaDevices API의 getUserMedia 메소드를 사용하여 브라우저 권한을 처리할 수 있습니다. 이를 통해서 카메라, 마이크 및 화면 공유와 같은 연결된 미디어 입력 장치에 액세스할 수 있습니다. 그런 다음 MediaStream 오디오 및 비디오 트랙을 SDK에 입력 장치로 추가할 수 있습니다.

  4. MediaStream 트랙 가져오기

    getUserMedia 메소드는 사용자에게 미디어 입력 사용 권한을 요청하고 오디오 및 비디오 트랙이 포함된 트랙이 있는 MediaStream을 생성합니다.

    const videoParams = {video:true}
const audioParams = {audio: true}

window.cameraStream = await navigator.mediaDevices.getUserMedia(videoParams);
window.microphoneStream = await navigator.mediaDevices.getUserMedia(audioParams);

    참고: API MediaDevices는 사용할 수 있는 디바이스를 나열할 수 있는 enumerateDevices 메서드도 제공하며 오디오 및 비디오 입력 배열을 필터링할 수 있습니다. Sample application 을 참조하십시오.

    구성된 캔버스 요소를 사용하여 비디오 요소에 필터 또는 오버레이를 추가하는 경우 HTMLCanvasElement.captureStream() 메서드를 사용하여 cameraStream을 캡처해야 합니다.

    window.cameraStream = canvas.captureStream(30);

  5. IVS 웹 브로드캐스트 SDK에 스트림 추가

    권한이 부여되면 Amazon IVS 웹 브로드캐스트 SDK에 디바이스 스트림을 추가할 수 있습니다.

    client.addVideoInputDevice(window.cameraStream, 'camera1', { index: 0 });
client.addAudioInputDevice(window.microphoneStream, 'mic1');

  6. 라이브 스트리밍 시작

    이제 오디오 및 비디오 트랙이 있으므로 startBroadcast 메서드를 사용하여 방송을 시작하겠습니다. 2단계의 스트림 키를 매개변수로 제공하십시오.

    client
    .startBroadcast(streamKey)
    .then((result) => {
        console.log('I am successfully broadcasting!');
    })
    .catch((error) => {
        console.error('Something drastically failed while broadcasting!', error);
    });

  7. 라이브 스트리밍 중지

    client.stopBroadcast();

일반 팁

Amazon IVS 웹 브로드캐스트 SDK를 사용하여 바로 시작하기

Amazon IVS 웹 브로드캐스트 SDK를 사용하면 고객은 최소한의 설정으로 브라우저에서 스트리밍할 수 있습니다. Getting Started guide에 따라 SDK를 구현하고 고품질 스트리밍, 자동 비트 전송률 조정, 보안 스트리밍, 다중 입력 소스, 스트림 제어 및 카메라 교체와 같은 주요 기능을 활용할 수 있으며 Sample app을 사용하여 시작하거나 stream.ivs.rocks를 사용하여 기능을 시연할 수 있습니다.

이 글은 AWS Media 블로그의 Broadcast from a browser with the Amazon IVS web broadcast SDK를 기반으로 최요한 AWS 솔루션즈 아키텍트가 한국어로 번역 및 편집하였습니다.

Source: Amazon IVS 웹 브로드캐스트 SDK 를 사용하여 브라우저에서 브로드캐스트하기

Exit mobile version