চলুন লাইভ আইপি টিভি স্ট্রিমিং TvBox ওয়েবসাইট তৈরি করি
ডিজিটাল যুগে টিভি দেখা এখন আর আগের মতো নেই – একদিকে যেমন স্মার্টফোন, ট্যাব, ল্যাপটপে আমরা যেকোনো সময় যেকোনো জায়গা থেকে কন্টেন্ট উপভোগ করতে পারি অন্যদিকে পেইড সাবস্ক্রিপশনের বিড়ম্বনা অনেকের জন্যই সাধ আর সাধ্যের ভেতর সংকুলান হয়না। এক্ষেত্রে ফ্রি লাইভ টিভি স্ট্রিমিং প্ল্যাটফর্মের চাহিদা অনেক – এই বিষয়টা আপনি নিজেও বুঝতে পারেন যখন কোন লাইভ ক্রিকেট বা ফুটবল ম্যাচ চলে তখন ফেসবুকে লাইভ ম্যাচে লক্ষ লক্ষ ভিউয়ার থাকে। অনেকেই আবার চান তার নিজের জন্যই নিজের মতো করে একটা লাইভ টিভি স্ট্রিমিং ওয়েব এপ্লিকেশন থাকুক। চলুন একটি লাইভ আইপি টিভি স্ট্রিমিং TvBox ওয়েবসাইট তৈরি করি যেখানে বিনামূল্যে প্রিমিয়াম সকল ফিচার থাকবে।
ডেমো : TvBox
লাইভ টিভি স্ট্রিমিং ওয়েব অ্যাপ এর উপযোগীতা কি ?
আমরা সবাই জানি বর্তমানে অনলাইনে অসংখ্য লাইভ টিভি স্ট্রিমিং সাইট ও অ্যাপ পাওয়া যায় কিন্তু অধিকাংশই হয় পেইড নয়তো বিজ্ঞাপনে ভরা কিংবা অযাচিত সাইন’ইন/সাইনআপের বিড়ম্বনা থাকে। তদুপরি অনেক সময় আমাদের দরকার হয় দ্রুত একটি চ্যানেল দেখা, কোনো গুরুত্বপূর্ণ খেলা বা সংবাদ — সেটা যেকোনো ব্রাউজার থেকে একদম সহজেই ওপেন রিসোর্স এর মতোই। নিজের তৈরি ওয়েব অ্যাপ্লিকেশন থাকলে আপনি চাইলে যেকোনো ডিভাইসে (মোবাইল, ট্যাব, ডেস্কটপ) সেটি ওপেন করতে পারবেন এবং সঙ্গে সঙ্গে পছন্দের চ্যানেল দেখতে পারবেন। তাছাড়া আপনি নিয়মিত মনিটরিং ও আপডেট করলে এটা হয়ে উঠতে পারে খুব সহজেই জনপ্রিয় করে তুলতে পারেন এবং সেটা স্ট্যাবল করে তুলতে পারেন।
টেক স্ট্যাক (প্রোগ্রামিং ল্যাঙ্গুয়েজ ইউটিলিটি)
TvBox ওয়েব এপ্লিকেশনটি স্ট্যাটিক হিসেবে HTML5 + CSS3 এর সাথে JavaScript (Vanilla JS) এর লজিক, ইভেন্ট হ্যান্ডলিং, ডাইনামিক রেন্ডারিং করা হয়েছে; অন্যদিকে সকল আইপি টিভি চ্যানেল লাইভ করতে HLS.js লাইব্রেরির মাধ্যমে .m3u8 প্লেলিস্ট HTTP Live Streaming ব্যবহার করা হয়েছে যাতে ব্রাউজারে নেটিভ HLS সমর্থন না থাকলেও কাজ করে।
ফিচার
- বিভিন্ন ক্যাটাগরিতে শত শত চ্যানেল থাকছে যেমন Bangla, Documentary, Indian, Indian Bangla, Kids, Movies, Music, News, Religious, Sports, World Cup ইত্যাদি।
- যেকোন চ্যানেল চলমান অবস্থায় চলমান ভিডিও থেকে উচ্চ-রেজুলেশন স্ক্রিনশট নেওয়া যায়। ক্যানভাস ব্যবহার করে ভিডিওর ফ্রেম ক্যাপচার করে PNG ইমেজ অটো ডাউনলোড হয় এটি বিশেষভাবে গুরুত্বপূর্ণ যখন আপনি কোনো গুরুত্বপূর্ণ মুহূর্ত ক্যাপচার করতে চাচ্ছেন – সেটি খুব সহজেই করতে পারেন।
- ফুলস্ক্রিন মোডে টিভি স্ট্রিমিং করতে পারবেন। এছাড়াও ওয়েবসাইটে না থেকে Back করলে আপনার মোবাইল স্ক্রিনের যেকোন স্থানে পপআপ উইন্ডোতে লাইভ টিভি স্ক্রিনে স্ট্রিমিং চলবে যাতে আপনি টিভি দেখার সাথে সাথে অন্যান্য এক্টিভিটিও করতে পারেন।
- থিম কালার চেঞ্জিং (রেসপন্সিভনেস এবং ইউজার ফ্রেন্ডলি করা)
- ডার্ক/লাইট মোড
- অটো ভিডিও কোয়ালিটির পাশাপাশি ম্যানুয়ালি বিভিন্ন রেজুলেশন (২৪০পি, ৩৬০পি, ৪৮০পি, ৭২০পি, ১০৮০পি) সিলেক্ট করার অপশনও আছে।
- অটো রিকানেক্ট ও রিট্রাই মেকানিজমে যদি কোনো কারণে স্ট্রিম লোড না হয়, তাহলে অ্যাপ স্বয়ংক্রিয়ভাবে একাধিকবার রিট্রাই করে। রিট্রাই ফেইল হলে ইউজারকে নোটিফিকেশনের মাধ্যমেও জানিয়ে দিবে।
ডেপ্লয়মেন্ট গাইড
TvBox একটি স্ট্যাটিক ওয়েব অ্যাপ্লিকেশন তাই এটি হোস্ট করা অত্যন্ত সহজ এবং আপনি চাইলে একাধিক উপায়ে সহজেই ডিপ্লয় করতে পারেন।
গিটহাব পেজেস (GitHub Pages)
- প্রথমে এই রিপোজিটরি https://github.com/HumayunShariarHimu/TvBox ডাউনলোড বা ক্লোন করুন।
- আপনার গিটহাব অ্যাকাউন্টে একটি নতুন রিপোজিটরি তৈরি করুন।
- সমস্ত ফাইল (index.html, playlists.json, অন্যান্য অ্যাসেট) আপলোড করুন।
- রিপোজিটরির Settings > Pages-এ যান।
- Branch সিলেক্ট করুন main এবং ফোল্ডার / (root)।
- Save করুন। কয়েক সেকেন্ডের মধ্যেই আপনার সাইট লাইভ হবে https://YourGitHubUsername.github.io/RepoName [আপনি চাইলে কাস্টম ডোমেইনও এড করতে পারেন]
ভার্সেল (Vercel)
- ভার্সেল অ্যাকাউন্ট তৈরি করুন (গিটহাবের সাথে সংযুক্ত করুন)।
- নতুন প্রজেক্ট তৈরি করে আপনার গিট রিপোজিটরি নির্বাচন করুন।
- ভার্সেল স্বয়ংক্রিয়ভাবে ডিটেক্ট করবে এটি একটি স্ট্যাটিক সাইট।
- ডিফল্ট সেটিংসেই Deploy বাটনে ক্লিক করুন।
- মুহূর্তের মধ্যেই আপনি একটি vercel.app ডোমেইনে আপনার সাইট লাইভ হবে।
ক্লাউডফ্লেয়ার পেজেস (Cloudflare Pages)
- ক্লাউডফ্লেয়ার ড্যাশবোর্ডে Pages সেকশনে যান।
- “Connect to Git” দিয়ে আপনার রিপোজিটরি সংযুক্ত করুন।
- বিল্ড সেটিংসে ফ্রেমওয়ার্ক প্রেজেট “None” সিলেক্ট করুন এবং আউটপুট ডিরেক্টরি খালি রাখুন।
- ডেপ্লয় করুন — Cloudflare স্বয়ংক্রিয়ভাবে বিল্ড ও পাবলিশ করবে।
সিপ্যানেল / শেয়ার্ড হোস্টিং
আপনার যদি কোনো সিপ্যানেল হোস্টিং থাকে, তাহলে খুব সহজে
- ফাইল ম্যানেজারে যান।
- পাবলিক_এইচটিএমএল বা যেকোনো ডিরেক্টরিতে সব ফাইল আপলোড করুন।
- তারপর আপনার ডোমেইন/সাবডোমেইনে সাইট লাইভ পাবেন।
কাস্টমাইজেশন ও এক্সটেনশন
আপনি চাইলে নিজের মতো করে এপ্লিকেশনটি কাস্টমাইজ করতে পারেন সেক্ষেত্রে
- কালার প্যালেট – COLORS অ্যারেতে নতুন রং যোগ করে অ্যাকসেন্ট কালার বাড়াতে পারেন।
- ডিফল্ট থিম – localStorage-এর ডিফল্ট মান পরিবর্তন করে ‘light’ বা ‘dark’ সেট করতে পারেন।
- লোগো ও ব্র্যান্ডিং – brand-icon ও brand-name পরিবর্তন করে নিজের ব্র্যান্ড আনতে পারেন।
- নতুন সোর্স – playlists.json-এ নতুন অবজেক্ট এড করে আরও প্লেলিস্ট যুক্ত করতে পারেন।
- কাস্টম CSS – রুট ভেরিয়েবলস পরিবর্তন করে পুরো ডিজাইন নিজের মতো করে ফেলতে পারেন।
পারফরম্যান্স
- প্রক্সি লেয়ার – m3u ফাইল সরাসরি ব্রাউজার থেকে ফেচ না করে প্রোক্সি ব্যবহার করায় CORS ও নেটওয়ার্ক ইস্যু এভয়েড হয়।
- ক্যাশিং – লোকালস্টোরেজে থিম ও কালার সংরক্ষণ করায় পুনরায় লোডে দ্রুত লোডিং হয় এবং ল্যাকিংস কমে যায়।
- লাইটওয়েট – কোনো বড় ফ্রেমওয়ার্ক বা ডিপেন্ডেন্সি নেই তাই লোড টাইম অত্যন্ত কম থাকবে – অযাচিত লোডিং ইস্যু বা বাফিরিং ফ্রি স্ট্রামিং এক্সপেরিয়েন্স
- এইচটিএমএল স্যানিটাইজেশন – চ্যানেলের নাম স্ক্রিনে দেখানোর সময় esc() ফাংশন দিয়ে XSS প্রতিরোধ করা হয়েছে।
- আপনি চাইলে আপনার এই টিভি এপ হতে সোস্যাল মিডিয়াতেও লাইভ স্ট্রিমিং করতে পারবেন।
সবিশেষ সকলের জন্য নিরন্তর শুভকামনা রইলো – ভালো থাকুন।
ওয়েব আমন্ত্রণ রইলো : PsychoTech