এইচটিএমএল 5 ভিডিও ক্লায়েন্টে রিয়েল টাইম http স্ট্রিমিংয়ের সর্বোত্তম পন্থা


213

নোড.জেএস ব্যবহার করে এইচটিএমএল 5 ক্লায়েন্টের কাছে ffmpeg এর রিয়েল টাইম আউটপুট প্রবাহের সর্বোত্তম উপায়টি বোঝার চেষ্টা করার জন্য আমি সত্যিই আটকে আছি, কারণ প্লেটিতে বেশ কয়েকটি ভেরিয়েবল রয়েছে এবং এই জায়গাতে আমার অনেক অভিজ্ঞতা নেই, বিভিন্ন সংমিশ্রণ চেষ্টা করে বেশ কয়েক ঘন্টা ব্যয় করেছেন।

আমার ব্যবহারের কেসটি হ'ল:

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

liveFFMPEG = child_process.spawn("ffmpeg", [
                "-i", "rtsp://admin:12345@192.168.1.234:554" , "-vcodec", "copy", "-f",
                "mp4", "-reset_timestamps", "1", "-movflags", "frag_keyframe+empty_moov", 
                "-"   // output to stdout
                ],  {detached: false});

2) আমি STDOUT ক্যাপচার করতে নোড http সার্ভার ব্যবহার করি এবং ক্লায়েন্টের অনুরোধের পরে ক্লায়েন্টের কাছে ফিরে যেতে পারি। যখন ক্লায়েন্টটি প্রথম সংযুক্ত হয় আমি উপরের এফএফএমপিইগ কমান্ড লাইনটিকে স্প্যান করি তারপরে STDOUT স্ট্রিমটি HTTP প্রতিক্রিয়াতে পাইপ করি।

liveFFMPEG.stdout.pipe(resp);

আমি এইচটিটিপি প্রতিক্রিয়াতে এফএফএমপিইগ ডেটা লিখতে স্ট্রিম ইভেন্টটিও ব্যবহার করেছি তবে কোনও তফাত হয় না

xliveFFMPEG.stdout.on("data",function(data) {
        resp.write(data);
}

আমি নিম্নলিখিত HTTP শিরোলেখ ব্যবহার করি (যা প্রাক-রেকর্ডকৃত ফাইলগুলি স্ট্রিম করার সময়ও ব্যবহৃত হয় এবং কাজ করা হয়)

var total = 999999999         // fake a large file
var partialstart = 0
var partialend = total - 1

if (range !== undefined) {
    var parts = range.replace(/bytes=/, "").split("-"); 
    var partialstart = parts[0]; 
    var partialend = parts[1];
} 

var start = parseInt(partialstart, 10); 
var end = partialend ? parseInt(partialend, 10) : total;   // fake a large file if no range reques 

var chunksize = (end-start)+1; 

resp.writeHead(206, {
                  'Transfer-Encoding': 'chunked'
                 , 'Content-Type': 'video/mp4'
                 , 'Content-Length': chunksize // large size to fake a file
                 , 'Accept-Ranges': 'bytes ' + start + "-" + end + "/" + total
});

3) ক্লায়েন্টকে এইচটিএমএল 5 ভিডিও ট্যাগ ব্যবহার করতে হবে।

স্ট্রিমিং প্লেব্যাক নিয়ে আমার কোনও সমস্যা নেই (20s এইচটিটিপি আংশিক সামগ্রী সহ fs.createReadStream ব্যবহার করে) উপরের FFMPEG কমান্ড লাইনের সাথে রেকর্ড করা একটি ফাইল ফাইল (তবে STDOUT এর পরিবর্তে কোনও ফাইলে সংরক্ষণ করা হয়েছে), তাই আমি এফএফএমপিইগ স্ট্রিমটি জানি সঠিক, এবং HTTP নোড সার্ভারের সাথে সংযোগ করার সময় আমি ভিএলসি-তে সরাসরি লাইভ স্ট্রিমিংটি দেখতে পাচ্ছি see

তবে এফএফএমপিইগ থেকে নোড এইচটিটিপি-র মাধ্যমে সরাসরি প্রবাহিত করার চেষ্টা করা আরও শক্ত বলে মনে হচ্ছে কারণ ক্লায়েন্টটি একটি ফ্রেম প্রদর্শন করবে তারপরে থামবে। আমার সন্দেহ হয় যে সমস্যাটি হ'ল আমি এইচটিটিপি সংযোগটি এইচটিএমএল 5 ভিডিও ক্লায়েন্টের সাথে সামঞ্জস্য করতে সেট আপ করছি না। আমি এইচটিটিপি 206 (আংশিক সামগ্রী) এবং 200 টি প্রতিক্রিয়া ব্যবহার করে ডেটা বাফারে রাখার পরে ভাগ্যবিহীন স্ট্রিমিংয়ের মতো বিভিন্ন জিনিস চেষ্টা করেছি, তাই আমি এটিকে সঠিকভাবে স্থাপন করছি তা নিশ্চিত করার জন্য আমাকে প্রথম নীতিগুলিতে ফিরে যেতে হবে উপায়।

এটি কীভাবে কাজ করা উচিত তা সম্পর্কে আমার বোঝার জন্য, আমি ভুল হলে দয়া করে আমাকে সংশোধন করুন:

1) এফএফএমপিইগকে আউটপুট টুকরো টুকরো করে সেট করতে হবে এবং একটি ফাঁকা মুভ ব্যবহার করতে হবে (এফএফএমপিইজি ফ্রেজ_কিফ্রেম এবং খালি_মুভ মুভ ফ্ল্যাগ)। এর অর্থ ক্লায়েন্টটি মুভ অ্যাটম ব্যবহার করে না যা সাধারণত ফাইলের শেষে থাকে যা স্ট্রিমিংয়ের সময় প্রাসঙ্গিক নয় (ফাইলের শেষ নেই), তবে এর অর্থ কোনও সম্ভাবনা নেই যা আমার ব্যবহারের ক্ষেত্রে উপযুক্ত।

2) যদিও আমি এমপি 4 খণ্ডগুলি এবং খালি এমওওভি ব্যবহার করি, তবুও আমাকে এইচটিটিপি আংশিক সামগ্রী ব্যবহার করতে হবে, কারণ এইচটিএমএল 5 প্লেয়ার খেলার আগে পুরো স্ট্রিমটি ডাউনলোড না হওয়া পর্যন্ত অপেক্ষা করবে, যা কোনও লাইভ স্ট্রিম দিয়ে কখনই শেষ হয় না তাই অকার্যকর।

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

4) ক্যামেরা থেকে এফএফএমপিইগ দ্বারা নির্মিত একটি এমপি 4 ফাইল স্ট্রিমিং করার সময় এইচটিটিপি ক্লায়েন্টের নেটওয়ার্ক লগটি পরীক্ষা করার সময়, আমি দেখতে পাই 3 টি ক্লায়েন্টের অনুরোধ: ভিডিওটির জন্য একটি সাধারণ জিইটি অনুরোধ, যা এইচটিটিপি সার্ভারটি প্রায় 40Kb ফেরায়, তার পরে একটি আংশিক ফাইলের শেষ 10 কে এর জন্য বাইট সীমা সহ সামগ্রীর অনুরোধ, তারপরে মাঝের বিটগুলির জন্য একটি চূড়ান্ত অনুরোধ লোড হয়নি। সম্ভবত এইচটিএমএল 5 ক্লায়েন্টটি প্রথম প্রতিক্রিয়াটি পেয়ে গেলে এমপি 4 এমওওভি পরমাণুটি লোড করার জন্য ফাইলের শেষ অংশটি জিজ্ঞাসা করছে? যদি এটি হয় তবে এটি স্ট্রিমিংয়ের জন্য কাজ করবে না কারণ সেখানে এমওওভি ফাইল নেই এবং ফাইলটির শেষ নেই।

5) লাইভ স্ট্রিম করার চেষ্টা করার সময় নেটওয়ার্ক লগটি পরীক্ষা করার সময়, আমি প্রায় 200 বাইট পেয়েছি, তবে পুনরায় অনুরোধটি 200 বাইটের সাথে বাতিল এবং তৃতীয় অনুরোধ যা কেবল 2K দীর্ঘ। আমি বুঝতে পারছি না যে এইচটিএমএল 5 ক্লায়েন্ট কেন অনুরোধটি বাতিল করে দেবে কারণ রেকর্ডকৃত ফাইল থেকে স্ট্রিমিংয়ের সময় আমি সাফল্যের সাথে ব্যবহার করতে পারি বাইটাস্টিমটি ঠিক একই। এটি নোড ক্লায়েন্টের কাছে বাকি এফএফএমপিইগ স্ট্রিমটি প্রেরণ করছে না বলে মনে হয়, তবুও আমি .on ইভেন্টের রুটিনে এফএফএমপিইগ ডেটা দেখতে পাচ্ছি যাতে এটি এফএফএমপিইগ নোড এইচটিটিপি সার্ভারে পাওয়া যায়।

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

7) আমি কি 206 টি আংশিক সামগ্রী অনুরোধগুলি পরিচালনা করার চেষ্টা করে ভুল পথে চলেছি এবং এটি কি 200 টি এইচটিটিপি প্রতিক্রিয়া নিয়ে কাজ করা উচিত? এইচটিটিপি 200 প্রতিক্রিয়াগুলি ভিএলসির পক্ষে ঠিক কাজ করে তাই আমার সন্দেহ হয় যে এইচটিএমএল 5 ভিডিও ক্লায়েন্ট কেবল আংশিক সামগ্রী অনুরোধের সাথে কাজ করবে?

যেহেতু আমি এই জিনিসটি এখনও এই সমস্যার বিভিন্ন স্তর (এফএফএমপিইগ, নোড, স্ট্রিমিং, এইচটিটিপি, এইচটিএমএল 5 ভিডিও) এর মাধ্যমে কাজ করা কঠিন এটি শিখছি সুতরাং যে কোনও পয়েন্টার প্রশংসিত হবে। আমি এই সাইট এবং নেট নিয়ে গবেষণার জন্য কয়েক ঘন্টা ব্যয় করেছি এবং আমি নোডে রিয়েল টাইম স্ট্রিমিং করতে সক্ষম এমন কাউকেই পাইনি তবে আমি প্রথম হতে পারি না এবং আমি মনে করি এটি কাজ করতে সক্ষম হবে (একরকম) !)।


4
এটি একটি জটিল বিষয়। আগেরটা আগে. তুমি কি Content-Typeতোমার মাথায় রেখেছ? আপনি কি খণ্ড এনকোডিং ব্যবহার করছেন? আমি এখানেই শুরু করতাম। এছাড়াও, HTML5 এর অগত্যা কার্যকারিতা প্রবাহে, উপলব্ধ করা হয় না আপনি যে আরও পড়তে পারেন এখানে । আপনার সম্ভবত নিজস্ব উপায় ( এখানে দেখুন ) ব্যবহার করে ভিডিও স্ট্রিম বাফার এবং প্লে করার একটি উপায় বাস্তবায়নের প্রয়োজন হবে , ভেবেছিলেন এটি সম্ভবত সমর্থিত নয়। এছাড়াও মিডিয়াসোর্স এপিআইতে গুগল করুন।
tsturzl

উত্তরের জন্য ধন্যবাদ. হ্যাঁ, বিষয়বস্তুর ধরণটি 'ভিডিও / এমপি 4' এবং এই কোডটি ভিডিও ফাইলগুলি স্ট্রিমিংয়ের জন্য কাজ করে। দুর্ভাগ্যক্রমে মিডিয়া সোর্স কেবল ক্রোম, আমাকে অন্যান্য ব্রাউজারগুলিকে সমর্থন করতে হবে। এইচটিএমএল 5 ভিডিও ক্লায়েন্ট কীভাবে এইচটিটিপি স্ট্রিমিং সার্ভারের সাথে ইন্টারেক্ট করে তা নিয়ে কোনও অনুমান আছে? আমি নিশ্চিত যে আমি কী করতে চাই, ঠিক কীভাবে তা নিশ্চিত নয় (
নোড.জেএস দিয়ে

2
সমস্যা আপনার ব্যাকএন্ডে নেই। আপনি ভিডিও ঠিক স্ট্রিম করছি। সমস্যাটি আপনার ফ্রন্টএন্ড / ক্লায়েন্টে রয়েছে, আপনার নিজের স্ট্রিমিং বাস্তবায়ন করতে হবে। এইচটিএমএল 5 স্ট্রিমগুলি হ্যান্ডেল করে না। আপনার সম্ভবত ব্রাউজার প্রতি বিকল্পগুলি অন্বেষণ করতে হবে। ভিডিও ট্যাগ এবং মিডিয়া এপিআইয়ের জন্য ডাব্লু 3 মান পড়া শুরু করার জন্য ভাল জায়গা হবে।
tsturzl

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

আমি ওয়েবআরটিটিসি বিবেচনা করার পরামর্শ দেব যা দিনে দিনে ক্রস ব্রাউজারের আরও ভাল সমর্থন লাভ করে।
অ্যালেক্স কোহন

উত্তর:


209

সম্পাদনা 3: আইওএস 10 হিসাবে, এইচএলএস খণ্ডিত এমপি 4 ফাইলগুলিকে সমর্থন করবে। এখন উত্তরটি হ'ল একটি ড্যাশ এবং এইচএলএস ম্যানিফেস্টের মাধ্যমে খণ্ডিত এমপি 4 সম্পদ তৈরি করা। > ফ্ল্যাশ, আইওএস 9 এবং নীচে এবং আইই 10 এবং নীচে উপস্থিত নেই।

এই লাইনের নীচে থাকা সমস্ত কিছুই পুরানো। উত্তরোত্তর জন্য এটি এখানে রাখা।


সম্পাদনা 2: মন্তব্যগুলিতে লোকেরা যেমন নির্দেশ করছে, জিনিসগুলি পরিবর্তিত হয়। প্রায় সমস্ত ব্রাউজারগুলি অ্যাভিসি / এএসি কোডেকগুলি সমর্থন করবে। আইওএসের এখনও এইচএলএস প্রয়োজন। তবে hls.js এর মতো অ্যাডাপ্টারের মাধ্যমে আপনি এমএসইতে এইচএলএস খেলতে পারেন। আপনার আইওএস লাগলে নতুন উত্তরটি হ'ল এইচএলএস + এইচএলএস.জে এস। অথবা যদি না করেন তবে কেবল ফ্রেগমেন্টেড এমপি 4 (অর্থাত্ ড্যাশ)

ভিডিও এবং বিশেষত লাইভ ভিডিও খুব কঠিন হওয়ার অনেক কারণ রয়েছে। (দয়া করে মনে রাখবেন যে মূল প্রশ্নটি এইচটিএমএল 5 ভিডিওর প্রয়োজনীয়তা উল্লেখ করেছে, তবে প্রশ্নকর্তা মন্তব্যগুলিতে ফ্ল্যাশ সম্ভব বলে মন্তব্য করেছেন So তাই অবিলম্বে, এই প্রশ্নটি বিভ্রান্তিমূলক)

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

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

পরবর্তী, আপনার বুঝতে হবে যে ভিডিও অন ডিমান্ড (ভিওডি) এবং লাইভ ভিডিওটি খুব আলাদা। হ্যাঁ, তারা উভয়ই ভিডিও, তবে সমস্যাগুলি আলাদা, তাই ফর্ম্যাটগুলি আলাদা। উদাহরণস্বরূপ, যদি আপনার কম্পিউটারের ঘড়িটি এটির চেয়ে 1% দ্রুত চলে, আপনি কোনও ভিওডি তে লক্ষ্য করবেন না। লাইভ ভিডিও সহ, আপনি ভিডিওটি হওয়ার আগে প্লে করার চেষ্টা করবেন। আপনি যদি এএ লাইভ ভিডিও স্ট্রিমটিতে যোগ দিতে চান তবে ডিকোডার শুরু করতে আপনার প্রয়োজনীয় ডেটা দরকার, তাই এটি অবশ্যই স্ট্রিমে পুনরাবৃত্তি করতে হবে, বা ব্যান্ডের বাইরে পাঠানো উচিত। ভিওডিএর সাহায্যে আপনি যে ফাইলটি চান তার ফাইলটি শুরুতে পড়তে পারেন।

এবার কিছুটা খনন করা যাক।

প্ল্যাটফর্মসমূহ:

  • আইওএস
  • পিসি
  • ম্যাক
  • অ্যান্ড্রয়েড

কোডেক:

  • VP8 / 9
  • H.264
  • থোরা (ভিপি 3)

ব্রাউজারগুলিতে লাইভ ভিডিওর জন্য সাধারণ বিতরণ পদ্ধতি:

  • ড্যাস (HTTP)
  • এইচএলএস (এইচটিটিপি)
  • ফ্ল্যাশ (আরটিএমপি)
  • ফ্ল্যাশ (এইচডিএস)

ব্রাউজারগুলিতে ভিওডির জন্য সাধারণ বিতরণ পদ্ধতি:

  • ড্যাস (HTTP স্ট্রিমিং)
  • এইচএলএস (এইচটিটিপি স্ট্রিমিং)
  • ফ্ল্যাশ (আরটিএমপি)
  • ফ্ল্যাশ (HTTP স্ট্রিমিং)
  • এমপি 4 (এইচটিটিপি সিউডো স্ট্রিমিং)
  • আমি এমকেভি এবং ওওজি সম্পর্কে কথা বলতে যাচ্ছি না কারণ আমি তাদের খুব ভাল জানি না।

এইচটিএমএল 5 ভিডিও ট্যাগ:

  • আছে MP4
  • WebM
  • OGG

কোন ব্রাউজারগুলি কোন ফর্ম্যাটগুলিকে সমর্থন করে তা দেখে আসুন

সাফারি:

  • এইচএলএস (কেবলমাত্র আইওএস এবং ম্যাক)
  • H.264
  • আছে MP4

ফায়ারফক্স

  • ড্যাশ (এমএসইয়ের মাধ্যমে তবে কোনও h.264 নয়)
  • h.264 কেবল ফ্ল্যাশের মাধ্যমে!
  • VP9
  • আছে MP4
  • OGG
  • WebM

আই ই

  • ফ্ল্যাশ
  • ড্যাশ (কেবল এমএসই আইই 11+ এর মাধ্যমে)
  • H.264
  • আছে MP4

ক্রৌমিয়াম

  • ফ্ল্যাশ
  • ড্যাস (এমএসই এর মাধ্যমে)
  • H.264
  • VP9
  • আছে MP4
  • WebM
  • OGG

এমপি 4 লাইভ ভিডিওর জন্য ব্যবহার করা যাবে না (দ্রষ্টব্য: ড্যাশ এমপি 4 এর একটি সুপারস্টার, সুতরাং এতে বিভ্রান্ত হবেন না)। এমপি 4 দুটি টুকরো টুকরো হয়েছে: মুভ এবং এমড্যাট। mdat এ কাঁচা অডিও ভিডিও ডেটা রয়েছে। তবে এটি সূচকযুক্ত নয়, সুতরাং মুভ ব্যতীত এটি অকেজো। Moov এ mdat এর সমস্ত ডেটার একটি সূচক থাকে। তবে এর বিন্যাসের কারণে, প্রতিটি ফ্রেমের টাইমস্ট্যাম্প এবং আকার জানা না হওয়া পর্যন্ত এটি 'সমতল' করা যাবে না। ফ্রেম মাপের 'ফাইব' আকারের একটি মুভ নির্মাণ করা সম্ভব হতে পারে তবে এটি ব্যর্থ ব্যান্ডউইদথ বুদ্ধিমান।

সুতরাং আপনি যদি সর্বত্র বিতরণ করতে চান তবে আমাদের সর্বনিম্ন সাধারণ ডিনোমিনেটর খুঁজে বের করতে হবে। আপনি দেখতে পাবেন যে এখানে ফ্ল্যাশ উদাহরণের অবলম্বন ছাড়া কোনও এলসিডি নেই:

  • আইওএস কেবলমাত্র h.264 ভিডিও সমর্থন করে। এবং এটি কেবল লাইভের জন্য এইচএলএস সমর্থন করে।
  • আপনি ফ্ল্যাশ ব্যবহার না করলে ফায়ারফক্স h.264 মোটেই সমর্থন করে না
  • ফ্ল্যাশ আইওএসে কাজ করে না

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

শীঘ্রই, এটি করার সর্বাধিক সাধারণ উপায় হ'ল আইওএস / ম্যাকের এইচএলএস এবং এমএসই এর মাধ্যমে অন্য কোথাও (নেটফ্লিক্স শীঘ্রই এটি করবে) be তবে আমরা এখনও তাদের ব্রাউজারগুলি আপগ্রেড করার জন্য অপেক্ষা করছি। ফায়ারফক্সের জন্য আপনার পৃথক ডিএএসএইচ / ভিপি 9ও লাগবে (আমি ওপেন 264 সম্পর্কে জানি; এটি সফল হয়) এটি মূল বা উচ্চ প্রোফাইলে ভিডিও করতে পারে না So সুতরাং এটি বর্তমানে অকেজো)।


বিভিন্ন বিকল্প সম্পর্কে বিস্তারিত পটভূমি এবং প্রো / কনসের জন্য জাজমেরিকে ধন্যবাদ। আমি এই উত্তরটি গ্রহণযোগ্য হিসাবে বেছে নিয়েছি কারণ ধারণাগুলির রূপরেখাটি মূল প্রশ্নের উত্তর পাওয়া যায় বলে নির্দিষ্ট নির্দিষ্ট স্থির চেয়ে আরও গুরুত্বপূর্ণ। সৌভাগ্য কামনা করছি!
ডানডব

9
এটি এই প্রশ্নের কার্যকর সমাধান নয়। নীচে এই সমস্যার একটি কার্যকরী সমাধান রয়েছে।
jwriteclub

2
ফায়ারফক্স এখন এমএসই এবং h.264 স্থানীয়ভাবে সমর্থন করে। নিশ্চিত করতে সর্বশেষতম এফএফ ব্রাউজারের সাথে www.youtube.com/html5 এ যান। আমি এফএফ 37 দিয়ে পরীক্ষা করেছি Mac ম্যাকের সাফারি 8+ এছাড়াও এখন এমএসই সমর্থন করে।
বিগটুন্ড্রা

@ বিগটুন্ড্রা হ্যাঁ, ম্যাকে ইয়োসেমাইট চালু হওয়ার পর থেকে সাফারি এমএসই সমর্থন করেছেন। তবে আইওএস নয়। উইন্ডোজ সম্পর্কে নিশ্চিত নয়। (উইন্ডোতে সাফারি কি এখনও একটি জিনিস?) ফায়ারফক্স ৩ 37.০.২ (আমার) ম্যাকটি সেই লিঙ্ক অনুসারে এমএসই সমর্থন করছে না বলে মনে হয় না। তবে H.264 সমর্থন করে। ফায়ারফক্স অতীতে H.264 সমর্থন যোগ করেছে এবং মুছে ফেলেছে এবং পুনরায় যুক্ত করেছে।
szatmary

আপ-টু-ডেট ব্রাউজারটি MPEG-4 / H.264 ভিডিও ফর্ম্যাটটির জন্য সমর্থন করে: caniuse.com/#feat=mpeg4
ম্যাক্সেন্স

75

প্রত্যেককে ধন্যবাদ বিশেষত জাজমেত্রি কারণ এটি একটি জটিল প্রশ্ন এবং এর অনেক স্তর রয়েছে, যা আপনি লাইভ ভিডিও স্ট্রিম করার আগে কাজ করতে হবে। আমার আসল প্রশ্ন এবং এইচটিএমএল 5 ভিডিও বনাম ফ্ল্যাশ পরিষ্কার করতে - আমার ব্যবহারের ক্ষেত্রে এইচটিএমএল 5 এর পক্ষে দৃ strong় অগ্রাধিকার রয়েছে কারণ এটি ক্লায়েন্ট এবং ভবিষ্যতের উপর জেনেরিক, কার্যকর করা সহজ। ফ্ল্যাশ একটি দূরবর্তী দ্বিতীয় সেরা তাই এই প্রশ্নের জন্য এইচটিএমএল 5 দিয়ে আটকে দিন।

আমি এই মহড়ার মাধ্যমে অনেক কিছু শিখেছি এবং সম্মত হয়েছি লাইভ স্ট্রিমিং ভিওডির চেয়ে বেশি শক্ত (যা এইচটিএমএল 5 ভিডিওর সাথে ভাল কাজ করে)। তবে আমি আমার ব্যবহারের ক্ষেত্রে সন্তোষজনকভাবে কাজ করতে পেরেছিলাম এবং নোডে এমএসই, ফ্ল্যাশ, বিস্তৃত বাফারিং স্কিমের মতো আরও জটিল বিকল্পগুলি অনুসরণ করার পরে সমাধানটি খুব সহজ হতে পারে। সমস্যাটি ছিল যে এফএফএমপিইগটি খণ্ডিত এমপি 4কে দূষিত করছে এবং আমাকে এফএফএমপিইগ প্যারামিটারগুলি টিউন করতে হয়েছিল, এবং মূলত আমি যে HTTP- র উপরে স্ট্যান্ডার্ড নোড স্ট্রিম পাইপ পুনর্নির্দেশটি ব্যবহার করেছি সেগুলি যা প্রয়োজন তা ছিল।

এমপি 4-তে একটি 'ফ্র্যাগমেন্টেশন' বিকল্প রয়েছে যা এমপি 4 কে খুব ছোট ছোট টুকরো টুকরো করে তোলে যার নিজস্ব সূচক রয়েছে এবং এমপি 4 লাইভ স্ট্রিমিং বিকল্পটি কার্যকর করে তোলে। তবে প্রবাহে ফিরে যাওয়া (আমার ব্যবহারের ক্ষেত্রে ঠিক আছে), এবং এফএফএমপিইগির পরবর্তী সংস্করণগুলিকে সমর্থন করে টুকরো টুকরো করা সম্ভব নয়।

নোটের সময় নির্ধারণ করা সমস্যা হতে পারে এবং আমার সমাধানের সাথে আমার রিমাক্সিংয়ের সংমিশ্রণে 2 থেকে 6 সেকেন্ডের ব্যবধান রয়েছে (কার্যকরভাবে এফএফএমপিইগকে লাইভ স্ট্রিম গ্রহণ করতে হবে, এটি পুনরায় রিমাক্স করুন এবং এটি HTTP- র মাধ্যমে পরিবেশন করার জন্য নোডে প্রেরণ করবেন) । এটি সম্পর্কে খুব বেশি কিছু করা যায় না, তবে ক্রোমে ভিডিওটি যতটা সম্ভব ক্যাপচার করার চেষ্টা করে যা ভিডিওটিকে কিছুটা ঝাঁকুনির সাথে তুলনামূলক করে তুলনামূলক করে তুলনামূলকভাবে তুলনামূলকভাবে তুলনামূলকভাবে তুলনামূলকভাবে তুলনামূলক তুলনায় আইডি 11 (আমার পছন্দসই ক্লায়েন্ট) এর চেয়ে বেশি বর্তমান করে তোলে।

এই পোস্টে কোডটি কীভাবে কাজ করে তা ব্যাখ্যা করার পরিবর্তে মন্তব্য সহ জিআইএসটি পরীক্ষা করে দেখুন (ক্লায়েন্ট কোডটি অন্তর্ভুক্ত নয়, এটি নোড HTTP সার্ভারের ঠিকানা সহ একটি আদর্শ HTML5 ভিডিও ট্যাগ)। জিআইএসটি এখানে রয়েছে: https://gist.github.com/deandob/9240090

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

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


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

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

6
@ ড্যানডাব: আপনি যে সাফল্যের সাথে সরবরাহ করেছেন এই সমস্যার সমাধানের জন্য আমি একটি অনুগ্রহ পোস্ট করেছি । গৃহীত উত্তরটি দৃser়ভাবে জানিয়েছে যে এখানে কোনও কার্যনির্বাহী সমাধান নেই এবং তাই স্পষ্টতই ভুল।
jwriteclub

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

4
একজন মডারেটরের কাছ থেকে আমার স্পষ্টতা আছে যে আমি নিজেই প্রশ্নের উত্তর দেওয়ার এবং উত্তর হিসাবে এটি নির্বাচন করার সঠিক পদ্ধতিটিই সঠিক পদ্ধতি ছিল। আরও তথ্যের জন্য (বা আপনি যদি এই নিয়ে আরও বিতর্ক করতে চান) মেটা সাইটে থ্রেডটি দেখুন। meta.stackexchange.com/questions/224068/…
deandob

14

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


10
এটি এমপিইজি -১ ভিডিও ডিকোডার। আমি নিশ্চিত না যে আপনি বুঝতে পেরেছেন যে এমপিইজি -১ কত প্রাচীন; এটি ডিভিডি থেকে পুরানো older এটি একটি জিআইএফ ফাইলের চেয়ে কিছুটা বেশি উন্নত।
ক্যামিলো মার্টিন

13

আমি ব্রডওয়ে h264 কোডেক (এমস্ক্রিপ্ট) এর আশেপাশে একটি এইচটিএমএল 5 ভিডিও প্লেয়ার লিখেছি যা সমস্ত ব্রাউজারে (ডেস্কটপ, আইওএস, ...) সরাসরি (দেরি না করে) h264 ভিডিও খেলতে পারে।

ভিডিও স্ট্রিমটি ক্লায়েন্টকে ওয়েবসকেটের মাধ্যমে পাঠানো হয়, ফ্রেম প্রতি ডিকোডড ফ্রেম এবং ক্যানভায় প্রদর্শিত হয় (ত্বরণের জন্য ওয়েবগেল ব্যবহার করে)

গিথুব এ https://github.com/131/h264-live-player দেখুন ।


1
github.com/Streamedian/html5_rtsp_player এই ছেলেরা একই রকম কিছু করেছে যা ওয়েবসকেটের উপরে আরটিপি এইচ 264 ব্যবহার করে
ভিক্টর.ডিএমডিবি

12

এইচটিএমএল 5 ক্লায়েন্টের কাছে আরটিএসপি-ভিত্তিক ওয়েবক্যাম লাইভ-স্ট্রিম করার এক উপায় (পুনরায় এনকোডিং জড়িত, সুতরাং গুণমানের ক্ষতি আশা এবং কিছু সিপিইউ-পাওয়ার প্রয়োজন):

  • একটি আইক্যাস্ট সার্ভার সেট আপ করুন (আপনার ওয়েব সার্ভারটি একই মেশিনে বা ক্যাম থেকে আরটিএসপি-স্ট্রিম গ্রহণকারী মেশিনে থাকতে পারে)
  • ক্যামেরা থেকে স্ট্রিম গ্রহণ করা মেশিনে, এফএফএমপিইগ ব্যবহার করবেন না তবে গ্যাস্ট্রিমার ব্যবহার করুন। এটি আরটিএসপি-স্ট্রিমটি গ্রহণ এবং ডিকোড করতে, এটিকে পুনরায় এনকোড করতে এবং আইসকাস্ট সার্ভারে স্ট্রিম করতে সক্ষম। পাইপলাইন উদাহরণ (কেবলমাত্র ভিডিও, অডিও নেই):

    gst-launch-1.0 rtspsrc location=rtsp://192.168.1.234:554 user-id=admin user-pw=123456 ! rtph264depay ! avdec_h264 ! vp8enc threads=2 deadline=10000 ! webmmux streamable=true ! shout2send password=pass ip=<IP_OF_ICECAST_SERVER> port=12000 mount=cam.webm

=> আপনি তারপরে আইকাস্টাস্ট-স্ট্রিমের URL সহ <বিডিও> ট্যাগটি ব্যবহার করতে পারেন ( http://127.0.0.1:12000/cam.webm ) এবং এটি ওয়েবম সমর্থন করে এমন প্রতিটি ব্রাউজার এবং ডিভাইসে কাজ করবে


3

এই সমাধানটি একবার দেখুন । আমি জানি, ফ্ল্যাশফোনার খাঁটি এইচটিএমএল 5 পৃষ্ঠায় লাইভ অডিও + ভিডিও স্ট্রিম চালানোর অনুমতি দেয়।

তারা ব্যবহার MPEG1 এবং G.711 প্লেব্যাকের জন্য কোডেক। হ্যাকটি ডিকোডযুক্ত ভিডিওটি এইচটিএমএল 5 ক্যানভাস উপাদানকে উপস্থাপন করছে এবং এইচটিএমএল 5 অডিও প্রসঙ্গে ডিকোডড অডিও খেলছে।


3

কীভাবে জেপিগ সমাধানটি ব্যবহার করবেন, কেবল সার্ভারটি একে একে ব্রাউজারে জেপিগ বিতরণ করতে দিন, তবে এই জেপিগগুলি আঁকতে ক্যানভাস উপাদানটি ব্যবহার করুন? http://thejackalofjavascript.com/rpi-live-streaming/


2

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


আছে solutionsতবে supportসরাসরি স্ট্রিমিংয়ের জন্য নেই। এটি উপরে দেখানো আমার মন্তব্যে সরাসরি উল্লেখ করছে। এবং ওয়েবম প্রধান ব্রাউজারগুলিতে সমর্থিত, বেশিরভাগ সর্বশেষতম স্থিতিশীল সংস্করণ।
tsturzl

1
আমি সত্যিই H.264 থেকে ওয়েবমে ট্রান্সকোড না পছন্দ করব এবং এটির প্রয়োজন হবে না। আইআই 11 এবং সাফারি যেমন আমাকে সমর্থন করতে হয় তেমনি মিডিয়াসোর্স এক্সটেনশনগুলিও সহায়তা করবে না। তবে আমি মনে করি যদি আমি সার্ভারের পাশের কোনও ফাইল স্ট্রিমটি অনুকরণ করি (যা কাজ করে!) তবে এটি কাজ করা উচিত, তবে আমাকে নোড.জেএস-তে একটি ফাইল বাফার অনুকরণ করতে হবে।
deandob

1
অন্যান্য প্রস্তাবিত হিসাবে, আমি ওয়েবআরটিটিসি ব্যবহারের সম্ভাবনা চাই যা ভিএলসি বা ফ্ল্যাশ প্লাগইন থেকে ভিন্ন native আমি জানি এই প্রযুক্তি প্রয়োগ করা এখনও কঠিন। শুভকামনা।

1
আমি এফএফএমপিইগের সর্বশেষ সংস্করণে আপডেট করে এটি কাজ করেছিলাম কারণ দেখা যাচ্ছে যে টুকরো টুকরো মোড ব্যবহার করার সময় এমপি 4 তে দুর্নীতি হয়েছিল (এমপি 4 লাইভ স্ট্রিমিংয়ের জন্য ক্লায়েন্ট মুভ সূচক ফাইলের জন্য অপেক্ষা করছে না যা কখনই লাইভ হবে না স্ট্রীমিং)। এবং আমার নোড.জেএস কোডটি সরাসরি ব্রাউজারে এফএফএমপিইগ স্ট্রিমকে পুনর্নির্দেশ করতে এখন কাজ করে।
deandob

1
হ্যাঁ, আইই ১১ (আমার পছন্দসই ব্রাউজার) এ দুর্দান্ত কাজ করে। আমি ক্রোমে খুব সাড়া পেয়েছি।
deandob

2

বাইনারিজ চেষ্টা করুন। এটি ঠিক সকেট.আইওর মতো তবে কেবল এটিই ভাল করে তা হ'ল এটি অডিও ভিডিও প্রবাহিত করে। বাইনারিজগুলি এটি গুগল করে


1
বাইনারি.জেএস সকেট.আইওর মতো কিছু নয়। এবং এটি মিডিয়া স্ট্রিমিংয়ের সাথে নির্দিষ্ট নয়।
ব্র্যাড
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.