paint-brush
কিভাবে মিনিটে আপনার জ্যামস্ট্যাক সাইটে স্ট্রিমিং যোগ করবেনদ্বারা@raymondcamden
301 পড়া
301 পড়া

কিভাবে মিনিটে আপনার জ্যামস্ট্যাক সাইটে স্ট্রিমিং যোগ করবেন

দ্বারা Raymond Camden7m2023/05/19
Read on Terminal Reader
Read this story w/o Javascript

অতিদীর্ঘ; পড়তে

গত সপ্তাহে, আমি আমার বন্ধু টড শার্পের লাইভ স্ট্রিম, স্ট্রিমিং-এ স্ট্রিমিং-এ থাকার স্বতন্ত্র আনন্দ পেয়েছি। টড হলেন আমাজন ইন্টারেক্টিভ ভিডিও সার্ভিস (IVS) এর প্রধান বিকাশকারী অ্যাডভোকেট IVS হল টুইচ প্ল্যাটফর্মের ক্ষমতা নেওয়া এবং এটি আপনার হাতে রাখার একটি উপায়। এটি শুরু করা কতটা সহজ তার একটি প্রাথমিক রূপরেখা এখানে।
featured image - কিভাবে মিনিটে আপনার জ্যামস্ট্যাক সাইটে স্ট্রিমিং যোগ করবেন
Raymond Camden HackerNoon profile picture

গত সপ্তাহে, আমি আমার বন্ধু টড শার্পের লাইভ স্ট্রিম, স্ট্রিমিং-এ স্ট্রিমিং-এ থাকার স্বতন্ত্র আনন্দ পেয়েছি। আপনি এখানে সেই সেশনের রেকর্ডিং দেখতে পারেন:

টড হলেন আমাজন ইন্টারেক্টিভ ভিডিও সার্ভিস (আইভিএস) এর প্রধান বিকাশকারী উকিল, বা আরও সহজভাবে, টুইচ প্ল্যাটফর্মের অবিশ্বাস্য শক্তি নেওয়ার এবং এটি আপনার হাতে রাখার একটি উপায়। IVS আপনাকে দেয়:


  • আপনার সামগ্রীর জন্য চ্যানেল তৈরি করার ক্ষমতা।


  • আপনার বিষয়বস্তু সম্প্রচার করার একাধিক উপায়, ওয়েব-ভিত্তিক থেকে ওবিএসের মতো আরও শক্তিশালী টুল পর্যন্ত।


  • আপনার বিষয়বস্তু প্রদর্শনের একাধিক উপায়, একটি সুন্দর সহজ ওয়েব SDK সহ।


  • সুপার বিস্তারিত রিপোর্টিং.


  • এবং প্রবাহে গভীর একীকরণ যা ট্রান্সক্রিপশন, ল্যাম্বডা-ভিত্তিক চ্যাট সংযম এবং আরও অনেক কিছুর জন্য অনুমতি দেয়।


এটি একটি বাণিজ্যিক পরিষেবা, কিন্তু AWS-এর প্রায় সমস্ত কিছুর মতো, এখানে একটি বিনামূল্যের স্তর রয়েছে যা আপনাকে জিনিসগুলি পরীক্ষা করতে এবং এটি আপনার জন্য অর্থপূর্ণ কিনা তা দেখতে দেয়৷


টডের সাথে আমার সেশনে, তিনি "প্রথমবার বিকাশকারীর অভিজ্ঞতা" এর মাধ্যমে তাদের নিজস্ব ডকুমেন্টেশন এবং কনসোল রাখতে চেয়েছিলেন। তাই প্রথমেই, আপনার পণ্যের সাথে প্রাথমিক বিকাশকারীর অভিজ্ঞতা সম্পর্কে চিন্তা করা এবং সত্যিই যত্ন নেওয়া সম্ভবত আপনি করতে পারেন এমন সবচেয়ে গুরুত্বপূর্ণ জিনিসগুলির মধ্যে একটি।


আমি জানি ডেভেলপার অ্যাডভোকেসিতে আমার নিজের কর্মজীবনে, ডেভেলপার অনবোর্ডিংয়ে ক্রমাগত পরীক্ষা না করে এবং মন্তব্য না করে নতুন কিছু চেষ্টা করা আমার পক্ষে প্রায় অসম্ভব। টড তার স্ট্রিমে এটি লাইভ করার জন্য পাগল সম্মানের যোগ্য।


আমি কিছু জিনিস ভাঙার জন্য, কিছু ভুল করার জন্য এবং সাধারণত DX এর ক্ষেত্রে আপনার সবচেয়ে খারাপ দুঃস্বপ্ন হওয়ার জন্য সুপরিচিত, তাই এটি তার পক্ষে বেশ সাহসী ছিল।


(এবং স্পষ্ট করে বলতে গেলে, আমরা এই স্ট্রীমের কোনোটিই পূর্বপরিকল্পনা করিনি। আমাকে আগে থেকে কিছুই দেওয়া হয়নি, এবং আমার কাছে একমাত্র আসল জ্ঞান ছিল তার ব্লগ পোস্ট এবং সাধারণ চ্যাট পড়া।)


আপনি যেমন কল্পনা করতে পারেন, "আপনার নিজের IVS রোল করুন" এর মতো কিছু সত্যিই জটিল হতে চলেছে, কিন্তু আমাদের এক ঘন্টার সেশনে, আমরা আমার চ্যানেল সেট আপ করেছি, আমি OBS এবং একটি ওয়েব টুল থেকে সম্প্রচার করেছি এবং একটি সাধারণ তৈরি করতে সক্ষম হয়েছি স্ট্রীম প্রদর্শনের জন্য ওয়েব পৃষ্ঠা।


আমি ভেবেছিলাম যে আমি এখান থেকে কিছু হাইলাইট শেয়ার করব কারণ জ্যামস্ট্যাকে স্ট্রিমিং সমর্থন করার ধারণাটি অবিশ্বাস্যভাবে বাধ্যতামূলক বলে মনে হচ্ছে। এটি কিছুটা উচ্চ-স্তরের হবে, তবে নথিগুলি বেশ পুঙ্খানুপুঙ্খ এবং আপনাকে বিশদ সম্পর্কে আরও বিশদ দেবে।


আপনি শুরু করার নির্দেশিকা দিয়েও শুরু করতে চাইবেন।


এটি মাথায় রেখে, এটি শুরু করা কতটা সহজ তার একটি প্রাথমিক রূপরেখা এখানে রয়েছে৷

প্রথম ধাপ - AWS পান

আমি শুধু এই এড়িয়ে যাচ্ছি. আমি বলতে চাচ্ছি, আমি অনুমান করছি যে আমি এটা বলছি না, এবং আপনার কখনই কিছু অনুমান করা উচিত নয়, কিন্তু একটি বৃহৎ শতাংশ মানুষ ইতিমধ্যে AWS ব্যবহার করে, আমার অনুমান হল আপনার ইতিমধ্যে একটি অ্যাকাউন্ট আছে।


আমি আমার রুটটি করেছি এবং ব্যবহার করেছি, কিন্তু আপনি যদি উপরে শেয়ার করা শুরু করার লিঙ্কটি অনুসরণ করেন, তবে তারা আপনাকে আরও সীমাবদ্ধ অ্যাক্সেস সহ একটি ব্যবহারকারী সেট আপ করেছে, যা সঠিক জিনিসটি করা এবং প্রযুক্তিতে আমরা সর্বদা সঠিক জিনিসটি করি। আহেম

দ্বিতীয় ধাপ - আপনার চ্যানেল তৈরি করুন

আপনি যা করবেন তা হল AWS কনসোলের IVS অংশে একটি চ্যানেল সংজ্ঞায়িত করুন:


AWS এর IVS অংশ

একটি অনুস্মারক হিসাবে, IVS-এর টক্স-এর অনুসন্ধান বাক্স জিনিসপত্র খোঁজার জন্য সত্যিই একটি ভাল কাজ করে। AWS কিছুটা অপ্রতিরোধ্য হতে পারে, কিন্তু তাদের অনুসন্ধান ইদানীং জিনিসগুলিকে অনেক সহজ করে তুলেছে।


আমি অনুমান করি যে বেশিরভাগ লোকেরা স্ট্রিমিং সম্পর্কে জানে এবং একটি চ্যানেলের প্রাথমিক ধারণা পায়, তবে আমি যদি স্ট্রিমিং শুরু করি তবে আমার নিজের জন্য সম্ভবত একটি চ্যানেল থাকবে।


আমি যদি আমার কোম্পানির ওয়েবসাইটে স্ট্রিমিং যোগ করতে চাই, তাহলে আমি প্রশিক্ষণ, বাহ্যিক ইভেন্ট এবং আরও অনেক কিছুর জন্য একটি চ্যানেল থাকার কল্পনা করতে পারি।


বেয়ার সর্বনিম্ন, একটি চ্যানেল প্রয়োজন. একটি নতুন চ্যানেল তৈরি করার সময়, সর্বনিম্ন নামটি হল:


কনসোলে একটি চ্যানেল তৈরি করা হচ্ছে

নোট করুন যে বিকল্পগুলির মধ্যে একটি স্বয়ংক্রিয়ভাবে স্ট্রীমগুলিকে S3 এ সংরক্ষণ করছে৷ আমি টডের সাথে স্ট্রীমে এটি সক্ষম করিনি, তবে এটি সত্যিই চমৎকার যে এটি সক্ষম করা সহজ। স্পষ্টতই, বড় ভিডিও ফাইলগুলি সংরক্ষণ করার জন্য একটি খরচ হতে চলেছে, তবে এটি সক্ষম করা কতটা সহজ তা আমি উপলব্ধি করি।

ধাপ তিন - আপনার সম্প্রচারক চিত্র আউট

তাদের SDKs, OBS Studio, বা FFmpeg ব্যবহার করে আপনার স্ট্রিমিং কভার সেট আপ করার বিষয়ে ডক্স শুরু করা। আমি অতীতে ওবিএস স্টুডিও ব্যবহার করেছি, তাই টডের সাথে প্রবাহের সময়, আমি এটি ব্যবহার করেছি। আমি লোকেদের সতর্ক করব যদিও আপনি যদি এটি আগে কখনও ব্যবহার না করেন তবে এটি বেশ অপ্রতিরোধ্য হতে পারে।


এটা অবশ্যই আমার জন্য ছিল (হেক, আমি এখনও সবেমাত্র জানি আমি কি করছি)।


পরিবর্তে, আমাকে স্ট্রীম, stream.ivs.rocks- এ পরে আমার সাথে টড শেয়ার করা আরেকটি বিকল্প শেয়ার করতে দিন। এটি একটি ওয়েব-ভিত্তিক স্ট্রিমিং সমাধান যা আপনি IVS পরীক্ষা করতে ব্যবহার করতে পারেন।


আপনার ব্রাউজারে পৃষ্ঠাটি খুলুন (মনে রাখবেন যে এটি বলে যে এজ সমর্থিত নয়, তবে এতে আমার কোন সমস্যা ছিল না), এবং আপনার সেটিংসে যেতে গিয়ার আইকনে ক্লিক করুন৷ আপনি আপনার "ইনজেস্ট এন্ডপয়েন্ট" এবং "স্ট্রিম কী" নির্দিষ্ট করতে চাইবেন, যে দুটিই আপনি আপনার চ্যানেলের বিশদ বিবরণে AWS কনসোলে খুঁজে পেতে পারেন।


আমি যে ভুল করেছি তা করবেন না - "ইনজেস্ট সার্ভার" "ইনজেস্ট এন্ডপয়েন্ট" এর মতো নয়, আপনি এটি দেখতে "অন্যান্য ইনজেস্ট বিকল্প" খুলতে এবং প্রসারিত করতে চাইবেন।


ivs রকগুলির জন্য চ্যানেলের বিবরণ প্রয়োজন

একবার আপনি এটি সম্পন্ন করার পরে, আপনি নীচের "স্ট্রিমিং শুরু করুন" বোতামটি ক্লিক করতে পারেন, এবং আক্ষরিক অর্থে, এটিই! যদিও এটি এমন কিছু নয় যা আপনি "বাস্তব" স্ট্রিমের জন্য করবেন, এটি সেট আপ করা অনেক সহজ এবং দ্রুত।


আমার সম্প্রচারের স্ক্রিনশট

একবার আপনি স্ট্রিমিং করলে, AWS কনসোলে ফিরে যান, "লাইভ চ্যানেল" এ ক্লিক করুন এবং আপনি আপনার স্ট্রীমটি কার্যকর দেখতে পাবেন:


লাইভ চ্যানেলের জন্য AWS IVS প্যানেল

আপনি যদি চ্যানেলের বিশদ বিবরণে যান তবে এটি সেখানেও প্রদর্শিত হবে:


সম্প্রচারের আরেকটি দৃশ্য

যাইহোক, সেখানে থাকাকালীন এবং ভবিষ্যতে, আপনি অতীতের স্ট্রীম এবং স্ট্রীম সম্পর্কে সমস্ত ধরণের দুর্দান্ত মেট্রিক্স দেখতে পারেন।


এই ব্যবহৃত পরিভাষাগুলির অনেকগুলির সাথে আমি পরিচিত নই, তাই আপনার স্ট্রিমিং-এ নতুন (এবং এমন কিছু যা আমি টডের সাথে প্রতিক্রিয়া হিসাবে শেয়ার করেছি) মনে রাখতে হবে, তবে আপনি যদি পরিসংখ্যান পছন্দ করেন তবে AWS আপনাকে কভার করেছে।

ধাপ চার - সামনের শেষ

আসলে স্ট্রীম দেখার জন্য আপনি কোথায় তা করতে যাচ্ছেন তা খুঁজে বের করতে হবে। বিবেচনা করে আমি একজন ওয়েব লোক, এবং এই পোস্টটি জ্যামস্ট্যাকে এটি করার বিষয়ে, তাদের ডকুমেন্টেশনের ওয়েব গাইড হল যেখানে আপনি পরবর্তীতে যেতে চান। আবার, প্রাথমিক বাস্তবায়ন খুব সহজ হতে পারে.


এখানে একটি সম্পূর্ণ বাস্তবায়ন আছে:


 <!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> ট্যাগ এবং আমার সিএসএস সঠিকভাবে আকার দিতে।


জাভাস্ক্রিপ্ট IVSPlayer এর একটি উদাহরণ তৈরি করে এবং এটি DOM-এর সাথে সংযুক্ত করে। pbURL মান AVS চ্যানেল কনফিগারেশন থেকে আসে:


প্লেব্যাক কনফিগারেশন URL


এবং এখানে এটি কর্ম!


প্লেয়ার সহ ওয়েব পেজ

এখন, খুব উত্তেজিত হওয়ার আগে, মনে রাখবেন যে এটিই সবচেয়ে সহজ কোড যা আপনি ব্যবহার করতে পারেন, কিন্তু আসলে এটি খুব বুলেটপ্রুফ নয়, এবং আপনি অবশ্যই পরীক্ষা করার সময় এটির সাথে জড়িত হবেন, আপনি যদি স্ট্রিমিং না করেন তবে চেষ্টা করার সময় আপনি একটি ত্রুটি পাবেন স্ট্রীম লোড করতে। যে একেবারে বোধগম্য করে তোলে, তাই ভাল কোড যে পরিচালনা করবে.


আমি ওয়েব রেফারেন্সে দ্রুত নজর দিয়েছি, এবং আমি ইভেন্ট সমর্থন দেখতে পাচ্ছি, তাই আপনি এটি একটি স্ট্রিম শুরুর জন্য শুনতে সক্ষম হবেন; হয় সেই মুহুর্তে লোড করুন বা DOM-এ এমন কিছু করুন যাতে ওয়েব পৃষ্ঠাটি দেখা ব্যক্তিকে জানাতে পারে যে একটি স্ট্রিম শুরু হয়েছে।

এটাই!

ঠিক আছে, নিশ্চিত, এটি খুব উত্পাদন-যোগ্য নয়, তবে আমি আক্ষরিক অর্থে এক ঘন্টার মধ্যে একটি স্ট্রিমিং সমাধান করেছি। এখন, এটি বিনামূল্যে হতে যাচ্ছে না, তাই এটি মনে রাখার মতো কিছু, তবে আপনি কত দ্রুত শুরু করতে পারেন, সেইসাথে আপনি বাক্স থেকে কতটা শক্তি পান তা দেখে আমি সত্যিই বিস্মিত হয়েছি।


এবং AWS সবকিছু পরিচালনা করে, এটি Jamstack এর জন্য একটি দুর্দান্ত ফিট। সেখানে সার্ভার-ভিত্তিক API রয়েছে যা আপনিও সংহত করতে পারেন, এবং সেখানেই আমি Netlify ফাংশনের মতো কিছু ব্যবহার করব।


তাই আবার - ডক্স চেক আউট. হজম করার জন্য অনেক কিছু হতে চলেছে, তবে আমি এখানে যা স্পর্শ করেছি তার চেয়ে অনেক বেশি সেখানে রয়েছে।


এরপরে, dev.to-এ টডের পোস্টগুলি দেখুন, যেখানে তিনি একগুচ্ছ উদাহরণ শেয়ার করেছেন৷ অতি সম্প্রতি, তিনি ব্রাউজারে একটি রিয়েল-টাইম মাল্টি-হোস্ট ভিডিও চ্যাট প্রদর্শন করেছেন এবং তারপরে একাধিক হোস্ট এবং লাইভ স্ট্রিমিংয়ের উদাহরণ অনুসরণ করেছেন, আবার ব্রাউজার


চ্যাট জড়িত তার পোস্ট এবং আপনি সেখানে সংযম ক্ষমতা আছে আমার প্রিয়, আমি মনে করি. আপনার নিজের "LoFi" রেডিও স্টেশন তৈরি করার বিষয়ে তিনি যেটিকে লিখেছেন আমি তাকে বিশেষভাবে দুর্দান্ত হিসাবে সুপারিশ করব৷