303 판독값

몇 분 안에 Jamstack 사이트에 스트리밍을 추가하는 방법

~에 의해 Raymond Camden7m2023/05/19

너무 오래; 읽다

지난 주에 저는 친구 Todd Sharp의 라이브 스트림인 Streaming on Streaming에 참여하는 특별한 즐거움을 누렸습니다. Todd는 Amazon Interactive Video Service(IVS)의 주요 개발자 옹호자입니다. IVS는 Twitch 플랫폼의 강력한 기능을 사용자에게 제공하는 방법입니다. 시작하는 것이 얼마나 간단한지에 대한 기본 개요는 다음과 같습니다.

featured image - 몇 분 안에 Jamstack 사이트에 스트리밍을 추가하는 방법

지난주에 저는 친구 Todd Sharp의 라이브 스트림인 Streaming on Streaming에 참여하는 특별한 즐거움을 누렸습니다. 여기에서 해당 세션의 녹화를 시청할 수 있습니다.

Todd는 Amazon Interactive Video Service(IVS), 더 간단히 말하면 Twitch 플랫폼의 놀라운 성능을 손에 쥐어주는 방법의 주요 개발자 옹호자입니다. IVS는 다음 을 제공합니다.

콘텐츠에 대한 채널을 생성하는 기능.

웹 기반부터 OBS와 같은 더욱 강력한 도구까지 콘텐츠를 방송하는 다양한 방법입니다.

매우 간단한 웹 SDK를 포함하여 콘텐츠를 표시하는 다양한 방법입니다.

매우 상세한 보고.

그리고 전사, Lambda 기반 채팅 조정 등과 같은 작업을 허용하는 스트림에 대한 심층적인 통합도 가능합니다.

이는 상용 서비스이지만 AWS의 거의 모든 서비스와 마찬가지로 테스트하고 적합한지 확인할 수 있는 무료 티어가 있습니다.

Todd와 함께한 세션에서 그는 "처음 개발자의 경험"을 통해 자신만의 문서와 콘솔을 만들고 싶어했습니다. 따라서 먼저, 제품에 대한 초기 개발자 경험에 대해 생각하고 진심으로 관심을 갖는 것이 아마도 여러분이 할 수 있는 가장 중요한 일 중 하나일 것입니다.

저는 개발자 옹호 분야에서 경력을 쌓으면서 개발자 온보딩에 대해 지속적으로 검토하고 논평하지 않고는 새로운 것을 시도하는 것이 거의 불가능하다는 것을 알고 있습니다. Todd는 자신의 스트림에서 이 일을 실시간으로 수행한 것에 대해 엄청난 존경을 받을 자격이 있습니다.

나는 일을 깨뜨리고, 일을 잘못하고, 일반적으로 DX에 있어서 최악의 악몽을 꾸는 것으로 잘 알려져 있기 때문에 그의 입장에서는 꽤 용감했습니다.

(그리고 분명히 말하면, 우리는 이 스트림을 미리 계획하지 않았습니다. 사전에 아무것도 주어지지 않았고, 제가 가진 유일한 실제 지식은 그의 블로그 게시물과 일반 채팅을 읽는 것뿐이었습니다.)

여러분이 상상할 수 있듯이 "자신만의 IVS를 굴리는 것"과 같은 작업은 정말 복잡할 것입니다. 하지만 1시간짜리 세션에서 우리는 채널을 설정하고 OBS와 웹 도구에서 방송했으며 간단한 IVS를 구축할 수 있었습니다. 스트림을 표시하는 웹 페이지.

Jamstack에서 스트리밍을 지원한다는 아이디어가 믿을 수 없을 정도로 설득력 있게 들리기 때문에 여기서 주요 내용 중 일부를 공유하고 싶다고 생각했습니다. 이는 다소 높은 수준이지만 문서는 매우 철저하며 세부 사항에 대한 자세한 내용을 제공합니다.

또한 시작하기 가이드로 시작하는 것이 좋습니다.

이를 염두에 두고 시작하는 것이 얼마나 간단한지에 대한 기본 개요는 다음과 같습니다.

1단계 - AWS 받기

이 내용은 그냥 건너뛰겠습니다. 내 말은, 내가 말하는 것과는 다르다고 생각하고 아무 것도 가정해서는 안 되지만, 많은 사람들이 이미 AWS를 사용하고 있기 때문에 내 가정은 귀하가 이미 계정을 가지고 있다는 것입니다.

나는 루트 링크를 사용했고 위에서 공유 한 시작하기 링크를 따라가면 더 제한된 액세스 권한을 가진 사용자를 설정하게 됩니다. 이는 해야 할 일이며 기술 분야에서는 항상 올바른 일을 합니다. 에헴.

2단계 - 채널 만들기

다음으로 수행할 작업은 AWS 콘솔의 IVS 부분에서 채널을 정의하는 것입니다.

다시 한번 말씀드리지만, IVS의 검색창은 물건을 찾는 데 정말 효과적입니다. AWS는 다소 압도적일 수 있지만 최근에는 검색이 훨씬 쉬워졌습니다.

나는 대부분의 사람들이 스트리밍에 대해 알고 채널에 대한 기본 아이디어를 알고 있다고 가정합니다. 그러나 스트리밍을 시작한다면 아마도 나 자신을 위한 채널이 하나밖에 없을 것입니다.

회사 웹사이트에 스트리밍을 추가하고 싶다면 교육, 외부 이벤트 등을 위한 채널이 있는 것을 상상할 수 있습니다.

최소한 하나의 채널이 필요합니다. 새 채널을 생성할 때 최소한의 이름은 다음과 같습니다.

옵션 중 하나는 스트림을 S3에 자동으로 저장하는 것입니다. Todd와 함께하는 스트림에서는 이 기능을 활성화하지 않았지만 활성화가 이렇게 간단해서 정말 좋습니다. 분명히 대용량 비디오 파일을 저장하려면 비용이 들겠지만, 활성화하는 것이 얼마나 간단한지 감사하게 생각합니다.

3단계 - 방송사 파악

SDK, OBS Studio 또는 FFmpeg를 사용하여 스트리밍 커버 설정 에 관한 시작 문서입니다. 예전에 OBS Studio를 사용해본 적이 있어서 Todd와 함께 방송할 때 그걸 사용했어요. 하지만 이전에 사용해 본 적이 없다면 상당히 부담스러울 수 있다는 점을 사람들에게 경고하겠습니다.

그것은 확실히 나를 위한 것이었습니다(젠장, 나는 아직도 내가 무엇을 하고 있는지 거의 알지 못합니다).

대신 Todd가 나중에 스트림에서 나와 공유한 또 다른 옵션인 stream.ivs.rocks를 공유하겠습니다. 이는 IVS를 테스트하는 데 사용할 수 있는 웹 기반 스트리밍 솔루션입니다.

브라우저에서 페이지를 열고(Edge는 지원되지 않는다고 표시되지만 문제가 없었습니다) 기어 아이콘을 클릭하여 설정으로 이동합니다. AWS 콘솔의 채널 세부 정보에서 찾을 수 있는 "수집 엔드포인트"와 "스트림 키"를 지정하고 싶을 것입니다.

제가 했던 것과 같은 실수를 하지 마십시오. "수집 서버"는 "수집 엔드포인트"와 동일하지 않습니다. 이를 확인하려면 "기타 수집 옵션"을 열고 확장해야 합니다.

그런 다음 아래의 "스트리밍 시작" 버튼을 클릭하면 됩니다. 문자 그대로 끝입니다! 이는 "실제" 스트림에 대해 수행할 작업은 아니지만 설정이 훨씬 간단하고 빠릅니다.

스트리밍하고 나면 AWS 콘솔로 돌아가서 "라이브 채널"을 클릭하면 스트림이 작동하는 것을 볼 수 있습니다.

채널 세부정보로 이동하면 해당 정보도 표시됩니다.

그건 그렇고, 거기에 있는 동안과 앞으로도 과거 스트림과 스트림에 대한 모든 종류의 멋진 측정항목을 볼 수 있습니다.

이 용어는 제가 익숙하지 않은 경우가 많으므로 스트리밍을 처음 사용하는 경우 명심해야 할 사항입니다(그리고 피드백으로 Todd와 공유한 내용입니다). 통계가 마음에 든다면 AWS에서 다룰 수 있습니다.

4단계 - 프런트 엔드

실제로 스트림을 보려면 어디에서 볼 것인지 파악해야 합니다. 제가 웹 전문가이고 이 게시물이 Jamstack에서 수행하는 것에 관한 것이므로 다음에는 Jamstack 문서의 웹 가이드를 참조하세요 . 다시 한번 말씀드리지만, 초기 구현은 매우 간단할 수 있습니다.

전체 구현은 다음과 같습니다.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://player.live-video.net/1.18.0/amazon-ivs-player.min.js"></script> <style> video#video-player { width: 800px; height: 450px; } </style> </head> <body> <h2>My Stream</h2> <video id="video-player" playsinline controls autoplay></video> <script> const pbURL = 'https://e0e6ec1c389e.us-east-1.playback.live-video.net/api/video/v1/us-east-1.100330257216.channel.4tjprROF5ZWE.m3u8'; document.addEventListener('DOMContentLoaded', init, false); async function init() { if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); console.log('player made'); player.load(pbURL); player.play(); } else console.log('u stink'); } </script> </body> </html>

그것을 분석해 봅시다. SDK를 로드하는 데 스크립트 태그가 있습니다. 다음으로 중요한 부분이 <video> 태그인 HTML과 적절한 크기를 지정하는 CSS가 있습니다.

JavaScript는 IVSPlayer 의 인스턴스를 생성하고 이를 DOM에 연결합니다. pbURL 값은 AVS 채널 구성에서 가져옵니다.

그리고 여기 실제로 작동합니다!

자, 너무 흥분하기 전에, 이것은 사용할 수 있는 가장 간단한 코드이지만 사실 그다지 완벽하지는 않습니다. 테스트하는 동안 확실히 이 코드에 직면하게 될 것입니다. 스트리밍 중이 아닌 경우 시도하면 오류가 발생합니다. 스트림을 로드합니다. 그것은 절대적으로 의미가 있으므로 더 나은 코드가 이를 처리할 것입니다.

웹 참조를 잠깐 살펴보고 이벤트 지원을 확인했습니다. 따라서 스트림 시작을 수신하도록 할 수 있을 것입니다. 해당 지점에서 로드하거나 DOM에서 작업을 수행하여 웹 페이지를 보는 사람에게 스트림이 시작되었음을 알릴 수 있습니다.