Cách thêm luồng vào trang Jamstack của bạn trong vài phút

Tuần trước, tôi rất vui khi được tham gia chương trình phát trực tiếp của bạn tôi là Todd Sharp, Phát trực tuyến trên Truyền trực tuyến. Bạn có thể xem bản ghi của phiên đó tại đây:

Todd là nhà phát triển chính ủng hộ Dịch vụ video tương tác của Amazon (IVS), hay đơn giản hơn là một cách để tận dụng sức mạnh đáng kinh ngạc của nền tảng Twitch và đặt nó vào tay bạn. IVS mang đến cho bạn:

• Khả năng tạo kênh cho nội dung của bạn.

• Nhiều cách để phát nội dung của bạn, từ dựa trên web đến các công cụ mạnh mẽ hơn như OBS.

• Nhiều cách để hiển thị nội dung của bạn, bao gồm SDK web khá đơn giản.

• Báo cáo siêu chi tiết.

• Và tích hợp sâu vào luồng cho phép thực hiện những thứ như chép lời, kiểm duyệt trò chuyện dựa trên Lambda, v.v.

  
  

Đây là một dịch vụ thương mại, nhưng giống như hầu hết mọi thứ trong AWS, có một bậc miễn phí cho phép bạn kiểm tra mọi thứ và xem liệu nó có phù hợp với bạn hay không.

Trong phiên tôi có với Todd, anh ấy muốn đưa tài liệu và bảng điều khiển của riêng họ thông qua "trải nghiệm của nhà phát triển lần đầu". Vì vậy, trước tiên, suy nghĩ và thực sự quan tâm đến trải nghiệm ban đầu của nhà phát triển với sản phẩm của bạn có lẽ là một trong những điều quan trọng nhất bạn có thể làm.

Tôi biết trong sự nghiệp vận động cho nhà phát triển của riêng mình, tôi gần như không thể thử một điều gì đó mới mà không liên tục kiểm tra và nhận xét về quá trình giới thiệu của nhà phát triển. Todd xứng đáng nhận được sự tôn trọng điên cuồng khi thực hiện điều này trực tiếp trên luồng của mình.

Tôi khá nổi tiếng với việc phá vỡ mọi thứ, làm sai mọi thứ và nói chung là cơn ác mộng tồi tệ nhất của bạn khi nói đến DX, vì vậy điều đó khá dũng cảm đối với anh ấy.

(Và rõ ràng là chúng tôi không lên kế hoạch trước cho bất kỳ luồng nào. Tôi không được cung cấp trước bất cứ thứ gì và kiến thức thực sự duy nhất tôi có là đọc các bài đăng trên blog và trò chuyện chung của anh ấy.)

Như bạn có thể tưởng tượng, những thứ như "cuộn IVS của riêng bạn" sẽ thực sự phức tạp, nhưng trong phiên họp kéo dài một giờ của chúng tôi, chúng tôi đã thiết lập kênh của mình, tôi đã phát từ OBS và một công cụ web và có thể tạo một kênh đơn giản. trang web để hiển thị luồng.

Tôi nghĩ mình nên chia sẻ một số điểm nổi bật từ đó ở đây vì ý tưởng hỗ trợ phát trực tuyến trong Jamstack nghe có vẻ vô cùng hấp dẫn. Điều này sẽ hơi cao cấp, nhưng các tài liệu khá kỹ lưỡng và sẽ cung cấp cho bạn thêm chi tiết về các chi tiết cụ thể.

Bạn cũng sẽ muốn bắt đầu với hướng dẫn Bắt đầu .

Với ý nghĩ đó, đây là một phác thảo cơ bản về cách đơn giản để bắt đầu.

Bước một - Nhận AWS

Tôi sẽ bỏ qua điều này. Ý tôi là, tôi đoán tôi không phải như tôi đang nói và bạn không bao giờ nên giả định bất cứ điều gì, nhưng vì một tỷ lệ lớn người dùng đã sử dụng AWS, giả định của tôi là bạn đã có tài khoản.

Tôi đã làm và sử dụng tài khoản gốc của mình, nhưng nếu bạn theo liên kết bắt đầu mà tôi đã chia sẻ ở trên, họ sẽ thiết lập cho bạn một người dùng có quyền truy cập hạn chế hơn, đó là Điều đúng đắn cần làm và Chúng tôi luôn làm điều đúng đắn trong công nghệ. ừm.

Bước hai - Tạo kênh của bạn

Điều tiếp theo bạn sẽ làm là xác định một kênh trong phần IVS của bảng điều khiển AWS:

Xin nhắc lại, hộp tìm kiếm trên tox của IVS thực hiện rất tốt công việc tìm kiếm nội dung. AWS có thể hơi quá tải, nhưng tìm kiếm của họ gần đây đã khiến mọi thứ trở nên dễ dàng hơn rất nhiều.

Tôi cho rằng hầu hết mọi người đều biết về phát trực tuyến và nắm được ý tưởng cơ bản về một kênh, nhưng nếu tôi bắt đầu phát trực tuyến, có lẽ tôi chỉ có một kênh cho riêng mình.

Nếu tôi muốn thêm tính năng phát trực tuyến vào trang web của công ty mình, tôi có thể tưởng tượng có một kênh dành cho những thứ như đào tạo, sự kiện bên ngoài, v.v.

Ở mức tối thiểu, một kênh là cần thiết. Khi tạo một kênh mới, tối thiểu là tên:

Lưu ý rằng một trong các tùy chọn sẽ tự động lưu trữ các luồng vào S3. Tôi không kích hoạt tính năng đó trên luồng với Todd, nhưng thật tuyệt khi kích hoạt tính năng này rất đơn giản. Rõ ràng, việc lưu trữ các tệp video lớn sẽ tốn chi phí, nhưng tôi đánh giá cao việc kích hoạt tính năng này đơn giản như thế nào.

Bước ba - Tìm ra đài truyền hình của bạn

Tài liệu bắt đầu liên quan đến việc thiết lập bìa phát trực tuyến của bạn bằng SDK, OBS Studio hoặc FFmpeg của họ. Trước đây tôi đã sử dụng OBS Studio nên trong buổi phát trực tiếp với Todd, tôi đã sử dụng nó. Tôi sẽ cảnh báo mọi người rằng nếu bạn chưa bao giờ sử dụng nó trước đây, nó có thể khá choáng ngợp.

Nó chắc chắn là dành cho tôi (chết tiệt, tôi vẫn hầu như không biết mình đang làm gì).

Thay vào đó, hãy để tôi chia sẻ một tùy chọn khác mà Todd đã chia sẻ với tôi sau trong luồng, stream.ivs.rocks . Đây là một giải pháp phát trực tuyến dựa trên web mà bạn có thể sử dụng để kiểm tra IVS.

Mở trang trong trình duyệt của bạn (lưu ý rằng Edge không được hỗ trợ, nhưng tôi không gặp vấn đề gì với nó) và nhấp vào biểu tượng bánh răng để đến phần cài đặt của bạn. Bạn sẽ muốn chỉ định "Điểm cuối nhập" và "Khóa luồng", bạn có thể tìm thấy cả hai điểm này trong bảng điều khiển AWS trong chi tiết kênh của mình.

Đừng mắc lỗi tương tự như tôi đã làm - "Máy chủ nhập" KHÔNG giống với "Điểm cuối nhập", bạn sẽ muốn mở và mở rộng "Tùy chọn nhập khác" để thấy điều đó.

Khi bạn đã hoàn thành việc đó, bạn có thể nhấp vào nút "Bắt đầu phát trực tuyến" bên dưới và theo đúng nghĩa đen, vậy là xong! Mặc dù đây không phải là điều bạn sẽ làm đối với luồng "thực", nhưng việc thiết lập sẽ đơn giản và nhanh chóng hơn nhiều .

Khi bạn đang phát trực tuyến, hãy quay lại bảng điều khiển AWS, nhấp vào "Kênh trực tiếp" và bạn có thể thấy hoạt động phát trực tiếp của mình:

Nếu bạn đi đến chi tiết kênh, nó cũng được hiển thị ở đó:

Nhân tiện, trong khi ở đó và trong tương lai, bạn có thể xem các luồng trước đây và tất cả các loại số liệu thú vị về luồng đó.

Tôi không quen thuộc với nhiều thuật ngữ được sử dụng này, vì vậy, đó là điều cần lưu ý nếu bạn mới phát trực tuyến (và là điều mà tôi đã chia sẻ với Todd dưới dạng phản hồi), nhưng nếu bạn thích số liệu thống kê, AWS sẽ hỗ trợ bạn.

Bước bốn - Giao diện người dùng

Trên thực tế, việc xem luồng yêu cầu phải tìm ra nơi bạn sẽ làm như vậy. Xem xét tôi là một người làm web và bài đăng này nói về việc thực hiện nó trên Jamstack, hướng dẫn web trên tài liệu của họ là nơi bạn muốn tiếp tục. Một lần nữa, việc triển khai ban đầu có thể rất đơn giản.

Đây là toàn bộ triển khai:

 <!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>

Hãy chia nhỏ nó ra. Bạn đã có một thẻ tập lệnh tải SDK của họ lên hàng đầu. Tiếp theo, tôi có HTML của mình với các bit quan trọng là thẻ <video> và CSS của tôi để định kích thước phù hợp cho nó.

JavaScript tạo một phiên bản của IVSPlayer và gắn nó vào DOM. Giá trị pbURL đến từ cấu hình kênh AVS:

Và đây là hành động!

Bây giờ, trước khi quá phấn khích, hãy lưu ý rằng đây là mã đơn giản nhất bạn có thể sử dụng, nhưng trên thực tế, nó không chống đạn cho lắm và bạn chắc chắn sẽ gặp phải điều này khi thử nghiệm, nếu bạn không phát trực tuyến, bạn sẽ gặp lỗi khi thử để tải luồng. Điều đó hoàn toàn hợp lý, vì vậy mã tốt hơn sẽ xử lý điều đó.

Tôi đã xem nhanh tài liệu tham khảo trên web và tôi thấy hỗ trợ sự kiện, vì vậy bạn có thể nghe nó khi bắt đầu phát trực tiếp; tải tại thời điểm đó hoặc thực hiện điều gì đó trong DOM để cho người đang xem trang web biết rằng một luồng đã bắt đầu.

Đó là nó!

Ok, chắc chắn rồi, điều đó không đáng để sản xuất lắm, nhưng tôi thực sự đã hoàn thành một giải pháp phát trực tuyến trong một giờ. Bây giờ, điều này sẽ không miễn phí, vì vậy đó là điều cần lưu ý, nhưng tôi thực sự bị ấn tượng bởi tốc độ mà bạn có thể bắt đầu cũng như mức năng lượng mà bạn sử dụng.

Và với việc AWS xử lý mọi thứ, nó rất phù hợp với Jamstack. Cũng có các API dựa trên máy chủ mà bạn có thể tích hợp và đó sẽ là nơi tôi sẽ sử dụng thứ gì đó như Hàm Netlify.

Vì vậy, một lần nữa - kiểm tra các tài liệu . Sẽ có rất nhiều thứ để tiêu hóa, nhưng còn nhiều thứ hơn những gì tôi đã đề cập ở đây.

Tiếp theo, hãy xem các bài đăng của Todd trên dev.to , nơi anh ấy đã chia sẻ rất nhiều ví dụ. Gần đây nhất, anh ấy đã trình diễn trò chuyện video nhiều máy chủ trong thời gian thực trong trình duyệt và sau đó là ví dụ về nhiều máy chủ và phát trực tiếp, một lần nữa là trình duyệt .

Tôi nghĩ rằng các bài đăng của anh ấy liên quan đến trò chuyện và sức mạnh mà bạn phải kiểm duyệt ở đó là bài đăng yêu thích của tôi. Tôi cũng sẽ giới thiệu cái mà anh ấy đã viết khi tạo đài phát thanh "LoFi" của riêng bạn là đặc biệt thú vị.