html5 tutorial




HTML5 ভিডিও ক্লায়েন্টে রিয়েল টাইম http স্ট্রিমিংয়ের সেরা পদ্ধতি (6)

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

এই লাইন নীচের সবকিছু পুরানো হয়। বংশধরতার জন্য এখানে রাখা।

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

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

প্রথমটি আমি পুনঃস্থাপন করব: HTML5 এর উপরে লাইভ স্ট্রিমিংয়ের জন্য কোনও আনুষ্ঠানিক সহায়তা নেই । হ্যাক আছে, কিন্তু আপনার মাইলেজ পরিবর্তিত হতে পারে।

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

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

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

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

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

কোডেক:

  • VP8 / 9
  • H.264
  • থোরা (vp3)

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

  • DASH (HTTP)
  • এইচএলএস (HTTP)
  • ফ্ল্যাশ (RTMP)
  • ফ্ল্যাশ (এইচডিএস)

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

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

HTML5 ভিডিও ট্যাগ:

  • আছে MP4
  • WebM
  • OGG

যাক ব্রাউজার কি ফরম্যাট সমর্থন করে তাকান

সাফারি:

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

ফায়ারফক্স

  • DASH (এমএসই এর মাধ্যমে কিন্তু কোন H.264)
  • H.264 শুধুমাত্র ফ্ল্যাশ মাধ্যমে!
  • VP9
  • আছে MP4
  • OGG
  • WebM

আই ই

  • ফ্ল্যাশ
  • DASH (এমএসই এর মাধ্যমে IE 11+ শুধুমাত্র)
  • H.264
  • আছে MP4

ক্রৌমিয়াম

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

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

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

  • আইওএস শুধুমাত্র H.264 ভিডিও সমর্থন করে। এবং এটি শুধুমাত্র লাইভ জন্য এইচএলএস সমর্থন করে।
  • ফায়ারফক্স এইচ ২64 সমর্থন করে না, যতক্ষণ না আপনি ফ্ল্যাশ ব্যবহার করেন
  • ফ্ল্যাশ iOS তে কাজ করে না

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

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

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

আমার ব্যবহার ক্ষেত্রে হয়:

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

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

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

liveFFMPEG.stdout.pipe(resp);

আমি HTTP প্রতিক্রিয়াতে FFMPEG তথ্য লেখার জন্য স্ট্রিম ইভেন্টটি ব্যবহার করেছি কিন্তু কোন পার্থক্য দেয় না

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) ক্লায়েন্ট HTML5 ভিডিও ট্যাগ ব্যবহার করতে হবে।

HTML5 ক্লায়েন্টে স্ট্রিমিং প্লেব্যাক (Fs.createReadStream ব্যবহার করে ২06 HTTP আংশিক সামগ্রীর সাথে) কোন সমস্যা নেই, এটি উপরের FFMPEG কমান্ড লাইনের সাথে রেকর্ড করা একটি ভিডিও ফাইল (তবে STDOUT এর পরিবর্তে একটি ফাইলে সংরক্ষিত), তাই আমি FFMPEG প্রবাহটি জানি সঠিক, এবং HTTP নোড সার্ভারের সাথে সংযোগ করার সময় আমি ভিএলসি তে ভিডিও লাইভ স্ট্রিমিং সঠিকভাবে দেখতে পারি।

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

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

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

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

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

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

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

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

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

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


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

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

Github https://github.com/131/h264-live-player দেখুন।


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


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


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

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

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

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

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

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

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


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

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