تنفيذ دردشة الفيديو في الوقت الحقيقي القائم على الويب باستخدام HTML5 Websockets

StackOverflow https://stackoverflow.com/questions/4220672

سؤال

هل يعرف أي شخص كيفية تنفيذ الصوت/الفيديو عبر IP في WebApplication باستخدام HTML5 Websockets؟

سيكون من الرائع أن أتمكن من تنفيذ هذا مع PHP أو Python لأنني (لسوء الحظ) لا أعرف أي لغة برمجة أخرى في الوقت الحالي.

سوف يقوم البرنامج التعليمي الجيد ، بالإضافة إلى حل البناء بالفعل الذي يجب أن أدفعه مقابل.

update1:
تمت إضافة الفيديو لأنه لا يتعلق فقط الصوت/VoIP.

Update2:
تم إنشاء تطبيق مؤتمر الفيديو الأول HTML5 بالفعل. انظر إجابتي الخاصة

هل كانت مفيدة؟

المحلول

إذا كنت ترغب في الذهاب مع HTML5 فقط ، فستحتاج إلى متصفح ينفذ HTML Media Capture مسودة (متاحة هنا) من أجل الوصول إلى البيانات الخام من الميكروفون.

بمجرد الحصول على هذه البيانات في متناول اليد ، تحتاج إلى إرسالها عبر الشبكة. سيكون WebSockets هو خيار HTML5 للحصول على رحلات مستديرة بما يكفي مع الخادم (إرسال بيانات الصوت المحلية واستلام بيانات الصوت عن بُعد في نفس الوقت)

منذ أن ذكرت Python ، أوصي بالبحث حول التنفيذ الملتوي من WebSockets.

يمكنك أن يكون لديك جميع عملائك "التسجيل" على خادم WebSocket باستخدام CallerId ، بحيث يعرف الخادم مكان العثور على callerid معين.

ثم سيحتاج الخادم الخاص بك إلى "دعوة" API حيث يدعو Caller1 "Caller2.

بمجرد إعداد المكالمة ويبدأ كل عميل في إرسال بيانات الصوت الخاصة به ، سيتمكن الخادم من إرسال بيانات الصوت هذه إلى الطرف الآخر.

عند تلقي بيانات الصوت ، سيحتاج المتصفح إلى تشغيل بيانات الصوت هذه على مكبرات الصوت ، وربما باستخدام HTML5 Audiotag.

للقيام بذلك ، قد تضطر إلى استخدام "خدعة": بدلاً من وجود خادم WebSocket توجيه بيانات الصوت الخام إلى العميل ، قد تحتاج إلى محاكاة ملفات "لا حصر لها":

  1. Caller1.wav: تم التقاط صوت على MIC Caller1
  2. Caller2.wav: تم التقاط صوت على MIC Caller2

سيقوم متصفح Caller1 بإضافة Caller2.wav في سمة Audio.src بمجرد إعداد المكالمة (سيتم إبلاغ Caller1 بهذا الحدث عبر WebSocket) ونأمل أن يقوم Python Server بإلحاق بيانات الصوت الخام إلى Caller2.wav عند استلامه ، ، سيبدأ اللعب.

هذا يبدو وكأنه نموذج أولي رائع سوف تخترق!

حظا سعيدا في رحلتك،

جيروم فاجنر

نصائح أخرى

يبدو أن Ericsson أنشأ أول تطبيق مؤتمر HTML5 فيديو.

التقنية التي استخدموها:

  • نفذت عنصر الجهاز و API دفق (عنصر الجهاز واجهة المستخدم الرسومية حاليًا في JavaScript/CSS)
  • تمت إضافة MediaStreamManager إلى تعيين عناوين URL لدفق إلى خط الأنابيب المقابل في الواجهة الخلفية للوسائط
  • تمت إضافة MediaStreamTransceiver للتحكم في معالجة وسائل الإعلام ذات الصلة ونقلها
  • دعم إضافي للبيانات الثنائية في بروتوكول WebSocket

يرى: labs.ericsson.com:


فيديو على يوتيوب: ما وراء HTML5: صوت المحادثة والفيديو العرضي | مختبرات إريكسون

لسوء الحظ ، لا يريد إريكسون المشاركة device_dialog.js (بعد).

قد يكون Webrtc إجابة: http://www.webrtc.org/running-the-demos (حاليًا فقط الكناري الكروم مع تمكين علامة MediaStream)

انظر العرض التوضيحي: https://apprtc.apppot.com (تأكد من مشاهدتك في متصفح مناسب) والرمز http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/


السبب في أنني أكتب هو ... لقد حصلت على جهاز لوحي Android رخيصًا ولا أستطيع أن تتوفر Skype أو VTOK أو Google Voice خارج الولايات المتحدة. أحتاج إلى العثور على حل قائم على HTML5 لأنني قادر على تشغيل Opera Mobile 12 وحصلت http://html5demos.com/ تعمل بشكل صحيح

@العمل/يجب أن تكون سريعًا

تحقق من JavaScript getusermedia(هل بإمكاني استخدم) - API (W3)

WEBRTC هو الجواب الآن.

لـ Node.js Stack - يمكنك النظر إلى http://www.easyrtc.com/ . لاحظ أن IE لم تنشأ بعد دعم واجهات برمجة التطبيقات التي تجعل WebRTC تعمل.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top