پخش زنده در HTML5

[mohammadhosin]

سلام دوباره خدمت همه دوستان و اساتید
پیرو آموزشی که تقریبا 3 سال پیش بنده در مورد پخش زنده یا live stream ارائه دادم و علاقه ای که چند وقت اخیر دوستان نشان دادن
سعی کردم ادامه آموزش رو در ان پست ارائه دهم

شما میتونید آموزش قبلی رو از این پست ببینید
http://barnamenevis.org/showthread.php?372494-%D8%B3%D8%B1%D9%88%D8%B1-%D9%87%D8%A7%DB%8C-RTMP-%D9%88-Live-Stream

اما همین طور که در آموزش قبلی دیدید از فلش پلیر در سمت کلاینت استفاده میشه که به نوبه خود از محدودیت های خاص خودش رو داره
مثلا اینکه تو آندروید و یا آیفون ممکنه نتونید از فلش پلیر استفاده کنید
پس تصمیم گرفتیم که آموزش روی بستر HTML5 ببریم که یه استاندارد هست بین هر سه سیستم عامل Android , IOS , windows

خب دیگه مقدمه کافیه بریم سروقت آموزش:


تشریح فایل M3U8. (http://barnamenevis.org/showthread.php?509381-%D9%BE%D8%AE%D8%B4-%D8%B2%D9%86%D8%AF%D9%87-%D8%AF%D8%B1-HTML5&p=2273455&viewfull=1#post2273455)






اگه سوالی داشتید میتونید تو تلگرام با اکانت زیر با من در ارتباط باشید
Stranger_mh@
(https://telegram.me/Stranger_mh)یا از طریق لینک زیر در گروهی که در همین رابطه ساختم عضو شوید
https://telegram.me/joinchat/BWTMbT5LiRQG4pbTCiLldA

[mohammadhosin]

دوستان در آموزش جدید احتیاج به هیچ نرم افزار جدیدی نیست
با ffmpeg , یه نرم افزار ویرایش متن کار رو شروع میکنیم

ابتدا شما باید این فایل رو دانلود کنید
135727
و در سمت سرور سایتتون آپلود کنید و از حالت فشرده خارج کنید
تو پوشه یه فلدر داریم به اسم video , و یه فایل داریم به اسم player.html
ابتدا فایل player.html رو با یه برنامه ویرایشگر متن باز کنید و تقریبا سه خط مونده به آخر ، آدرس یه فایل با پسوند .m3u8 هست که میتونید به دلخواه اسم مورد نظرتون رو بزارید
که من در این جا stream1.m3u8 گذاشتم

حالا نرم افزار ffmpeg رو باز میکنیم
تو قسمت خط فرمان برنامه این کد رو مینویسیم



ffmpeg -re -i stranger.mp4 -f hls -hls_time 3 -hls_list_size 3 -hls_wrap 5 -start_number 1 -hls_allow_cache 0 E:\video\stream1.m3u8


تو کد بالا همین طور که میبینید من یه کلیپ به اسم stranger.mp4 رو با فرمت hls با سگمنت های 3 ثانیه ای و به تعداد 5 تیکه ای و بدون کش تو پوشه video ذخیره کردم
از re- هم برای اجرای زنده استفاده کردم

حالا شما با اجرای این کد این فایل ها تو پوشه video بوجود میاد
135725
که یه فایل stream1.m3u8 و 5 تا فایل با پسوند .ts داریم که این همون محدودیتی هست که خودمون کذاشتیم
اینجوری اگه مثلا یه پخش زنده 24 ساعته داشته باشیم حجم کل فایل ها از یه مقدار مثلا 5 مگ بیشتر نمیشه ! (این تیکشو خودم خیلی دنبالش گشتم تا پیداش کردم)

حالا با مرورگرتون میتونید به مکانی که player.html هست بروید و از پخش زنده کلیپتون لذت ببرید
و همچنین برای اجرای هم تو آندروید و هم تو آیفون و هم ویندوز مشکلی ندارید

اینم یه نمونه که تو آندروید اجرا شده

135726

اگه سوالی داشتید میتونید تو تلگرام با اکانت زیر با من در ارتباط باشید
@Stranger_mh (https://telegram.me/Stranger_mh)

یا علی

[ten_soldier]

با تشکر از آموزشتون ..
به این روشی دیگه نیازی به نصب RED5 نیست؟

[mohammadhosin]

خیر
دیگه احتیاج به نصب هیچ سروری نیست بجز سرور هاست که برای سایتتون لازم دارید

دوستان یه نکته دیگه:
طبق آخرین برسی انجام شده و باگی که تو نسخه دسکتاپ گوگل کروم تو ویندوز وجود داره کد html5تو ویندوز کدینگts. روساپورت نمیکنه
بخاطر همین ما به صورت اتوماتیک برای کلاینت هایی که از ویندوز استفاده میکنند بصورت خودکار فلش پلیر اجرا میشه و موقعی که کلاینت از android , IOS استفاده میکنه خودکار کدhtml5 اجرا میشه
یعنی عملا کاربر هیچ تغییر نمیبینه

موفق باشید
یا علی

[pbm_soy]

خوب میشد در مورد فایلهای hls و ts توضیحات کوتاهی میدادید
وهمینطور چطوری میتوان پخش زنده راه انداخت؟ منظورم تصویر وب کم و یا دوربین فیلم برداری و یا حتی دوربین یک گوشی آندرویدی را بصورت زنده بفرستیم سمت سرور و کاربران سایت آن استریم زنده را تماشا کنند

[mohammadhosin]

خوب میشد در مورد فایلهای hls و ts توضیحات کوتاهی میدادید
وهمینطور چطوری میتوان پخش زنده راه انداخت؟ منظورم تصویر وب کم و یا دوربین فیلم برداری و یا حتی دوربین یک گوشی آندرویدی را بصورت زنده بفرستیم سمت سرور و کاربران سایت آن استریم زنده را تماشا کنند


HLS (http live stream)
که یه استاندارد برای پخش زنده (live stream ) هست که ار یه فایل با فرمت m3u8. استفاده میکنه
در واقع شما با باز کردن صفحه مربوط به پخش زنده سایتتون
تگ
</video> رو اجرا میکنید که این تگ فایل m3u8. مورد نظروتون رو لود میکنه

حالا این فایل m3u8. خودش شامل یه سری کد هست :


#EXTM3U
#EXT-X-TARGETDURATION:5
#EXT-X-MEDIA-SEQUENCE:29
#EXTINF:5,
stream-29.ts
#EXTINF:5,
stream-30.ts
#EXTINF:5,
stream-31.ts
#EXTINF:5,
stream-32.ts
#EXTINF:5,
stream-33.ts


که در واقع یه سری فایل های ts. رو برای پلیر مرورگرتون میفرسته که همون فایل های مدیا برای پخش هستن که این فایل ها سمت سرور بروز میشن

و اما در مورد این فایل های ts. که از یه کدینگ video و یه کدینگ audio استفاده میکنه
که برای ts. :


Video = H264
Audio = ACC

استفاده میشه.

[mohammadhosin]

در مورد تصویر وب کم هم فعلا کد استانداردی برای ارسال تصویر وب کم برای سرور از طریق پروتکل HTML5 که تو همه سیستم عامل ها جواب بده پیدا نکردم
البته میتونید از اسکریپت های Flash استفاده کنید اما میدونید که این کدا برای android , IOS کارایی نداره

انشالله دارم روش کار میکنم اگه به نتیجه رسیدم حتما آموزش رو میزارم همینجا

[hennnn]

سلام دوست عزیز
خیلی ممنون بابت آموزش، لطف کردی.
فقط چند تا سوال دارم.
1- اینکه ما بخواهیم چند تا فایل رو بزاریم برای پخش چطوری باید این کار را انجام بدیم؟ یعنی فایل اول تموم شد بره دومی بعد بره ... بعد از اول بیاد یا اینکه کلا تموم بشه.
2- بخواهیم از یک میکروفون از کامپیوتر خودم پخش آنلاین زنده داشتم باشم چی کنم؟
تشکر

[mohammadhosin]

سلام دوست عزیز
خیلی ممنون بابت آموزش، لطف کردی.
فقط چند تا سوال دارم.
1- اینکه ما بخواهیم چند تا فایل رو بزاریم برای پخش چطوری باید این کار را انجام بدیم؟ یعنی فایل اول تموم شد بره دومی بعد بره ... بعد از اول بیاد یا اینکه کلا تموم بشه.
2- بخواهیم از یک میکروفون از کامپیوتر خودم پخش آنلاین زنده داشتم باشم چی کنم؟
تشکر

سوال اول
باید یه playlist بسازید به اسم مثلا test.txt
فرمت کلی یه playlistاینجوریه :



file '1.mp3'
file '2.mp3'




که شما میتونید بجای آدرس های بالا ادرس فایل های خودتون رو بدید

[neyshabour]

خیلی عالیه