⛈️ 🍂 👸🏿 مكالمة فيديو في المتصفح على PeerJS. بداية سريعة 🤱🏽 👈🏿 🔱

أحيي جميع قراء هبر. أتيحت لي هذا العام الفرصة لكتابة وحدة اتصالات فيديو لبوابة تدريب واحدة للاتصال عبر الفيديو مباشرة على موقع المعلم والطالب. لم يكن من الضروري حل هذه المهمة المبكرة. بعد بحث قصير ، اكتشفت أن هناك طريقتين: Flash و WebRTC . اتضح أن WebRTC في شكله النقي أمر معقد ، وهو أمر طبيعي بشكل عام ، لأن مهمة اتصال الفيديو ليست بسيطة. ولكن بعد ذلك صادفت PeerJS ، وهو غلاف لـ WebRTC. في هذه المقالة سأخبرك بكيفية تنظيم طالب المتصفح بسرعة.

لتكرار المثال ، ستكون هناك حاجة إلى الوصول إلى صفحة الاختبار الخاصة بك عبر بروتوكول https (نظرًا لأن الصفحة ستطلب الوصول إلى الكاميرا والميكروفون ، وبدون بروتوكول آمن ، سيقوم المتصفح ببساطة بإرسال خطأ)

سيبدأ تخطيط البدء بالشكل التالي:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Peer</title> <script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script> </head> <body> <p><h3> ID: </h3><span id=myid ></span></p> <input id=otherPeerId type=text placeholder="otherPeerId" > <button onclick="callToNode(document.getElementById('otherPeerId').value)"></button> <br> <video id=myVideo muted="muted" width="400px" height="auto" ></video> <div id=callinfo ></div> <video id=remVideo width="400px" height="auto" ></video> </body>

في قسم الرأس ، نقوم بتوصيل PeerJS عن بعد. من الممكن أيضًا تنزيل البرنامج النصي وتوصيله محليًا.

معرف الإدخال = otherPeerId - تم تصميمه لإدخال عيد العيد الذي سنتصل به (يمكنك اعتباره فهرسًا أو كرقم هاتف).

تم تصميم علامتي فيديو لعرض الفيديو الخاص بك ولفيديو المحاور ، على التوالي.

الآن قليلاً عن تقنية WebRTC وكيفية إجراء المكالمة. يقوم WebRTC بإجراء مكالمة من عميل إلى عميل مباشرةً ، دون مشاركة الخادم ، لذلك في الخطوة الأولى ، يجب أن تجد المتصفحات بعضها البعض. لهذا ، يتطلب WebRTC الكلاسيكي خادم إشارة ، أي خادم يخبر أحد المستعرضات بمعلمات مستعرض آخر ، وفي WebRTC عليك تنظيم مثل هذا الخادم بنفسك. ومع ذلك ، يوفر مطورو PeerJS خادم إشارة خاص بهم. كل ما عليك فعله هو تمرير معرف النظير إلى المحاور المحتمل ، أي الفهرس الفريد الذي تم استلامه في نظام PeerJS. في مسودة العمل ، قمت بتنظيمها مثل هذا:

بعد تحميل الصفحة ، يتم إنشاء كائن نظير
تمت كتابة نظيرها إلى قاعدة بيانات mysql
عند الضغط على زر الاتصال ، يتم سحب نظير المحاور من قاعدة البيانات واستخدامه لإنشاء اتصال

في حالة الاختبار الحالية ، سوف ندخل نظير المحاور في حقل النص otherPeerId

لذلك ، دعونا نبدأ كتابة التعليمات البرمجية.

1. إنشاء كائن النظير الرئيسي

 var peer = new Peer();

2. عند افتتاح العيد ، سوف نتلقى نظير peerID ، الذي يجب نقله إلى الشريك حتى يتمكن من الاتصال بنا

 peer.on('open', function(peerID) { document.getElementById('myid').innerHTML=peerID; });

3. من أجل تلقي مكالمة ، نقوم بتعليق معالج حدث المكالمة

 var peercall; peer.on('call', function(call) { // Answer the call, providing our mediaStream peercall=call; document.getElementById('callinfo').innerHTML="  <button onclick='callanswer()' ></button><button onclick='callcancel()' ></button>"; });

من خلال مكالمة واردة ، نحصل على كائن مكالمة ، والذي نقوم بحفظه في المتغير العام peercall . أيضًا في كتلة المعلومات ، سيتم عرض إشعار حول مكالمة واردة وأزرار 2: قبول ورفض

4. نكتب وظيفة لزر قبول

 function callanswer() { navigator.mediaDevices.getUserMedia ({ audio: true, video: true }).then(function(mediaStream) { var video = document.getElementById('myVideo'); peercall.answer(mediaStream); //         //peercall.on ('close', onCallClose); //  -  video.srcObject = mediaStream; //      (  ) document.getElementById('callinfo').innerHTML=" ... <button onclick='callclose()' > </button>"; //,   ,     video.onloadedmetadata = function(e) {// ,    video.play(); }; setTimeout(function() { //        document.getElementById('remVideo').srcObject = peercall.remoteStream; document.getElementById('remVideo').onloadedmetadata= function(e) { //       document.getElementById('remVideo').play(); }; },1500); }).catch(function(err) { console.log(err.name + ": " + err.message); }); }

navigator.mediaDevices.getUserMedia - تطلب الوصول إلى الكاميرا والميكروفون. في بيانات الكائن الذي تم تمريره إلى هذه الطريقة {audio: true ، video: true} ، يمكنك بالتالي طلب الوصول فقط إلى الكاميرا أو فقط إلى الميكروفون. مزيد من التعليقات المضافة مباشرة إلى الرمز.

تمت إضافة setTimeout بشكل تجريبي: لم يبدأ الفيديو الخاص بالشريك في التشغيل ، ولكنه كان يعمل مع مهلة.

5. وظيفة الاتصال عن طريق زر الاتصال

 function callToNode(peerId) { // navigator.mediaDevices.getUserMedia ({ audio: true, video: true }).then(function(mediaStream) { var video = document.getElementById('myVideo'); peercall = peer.call(peerId,mediaStream); //,  peerId-    mediaStream peercall.on('stream', function (stream) { // ,   setTimeout(function() { document.getElementById('remVideo').srcObject = peercall.remoteStream; document.getElementById('remVideo').onloadedmetadata= function(e) { document.getElementById('remVideo').play(); }; },1500); }); // peercall.on('close', onCallClose); video.srcObject = mediaStream; video.onloadedmetadata = function(e) { video.play(); }; }).catch(function(err) { console.log(err.name + ": " + err.message); }); }

كما في الفقرة السابقة ، نطلب دفق الوسائط الخاص بك. بعد أن نطلق على وظيفة الاستدعاء الخاصة بالكائن النظير ، والتي سوف تعيد كائن الاستدعاء إلينا ، احفظها في شكل peercall. نقوم بمعالجة حدث الدفق لمعرفة ما أجاب عليه ووضع الدفق الوارد في كائن الفيديو المقابل

هذا كل شيء ، لكن ...

إذا كان كلا المتصلين وراء تطبيق NATth ، فلن يتم ذلك. (لماذا؟ اقرأ هنا habr.com/ar/company/yandex/blog/419951 )
للتغلب على هذه العقبة ، من الضروري تحديد خادم TURN عند إنشاء كائن نظير (لم يكن السؤال عن أين يمكن الحصول عليه أسهل. اضطررنا إلى رفع الخاصة بنا: VPS on Ubuntu 16.04. التثبيت باستخدام الأمر

 apt install coturn

)

عندئذٍ سيبدو إنشاء العيد مثل هذا:

 var callOptions={'iceServers': [ {url: 'stun:95.xxx.xx.x9:3479', username: "user", credential: "xxxxxxxxxx"}, { url: "turn:95.xxx.xx.x9:3478", username: "user", credential: "xxxxxxxx"}] }; peer= new Peer({config: callOptions});

أخيرًا ، الكود بالكامل:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Peer</title> <script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script> </head> <body> <p><h3> ID: </h3><span id=myid ></span></p> <input id=otherPeerId type=text placeholder="otherPeerId" > <button onclick="callToNode(document.getElementById('otherPeerId').value)"></button> <br> <video id=myVideo muted="muted" width="400px" height="auto" ></video> <div id=callinfo ></div> <video id=remVideo width="400px" height="auto" ></video> <script> var callOptions={'iceServers': [ {url: 'stun:95.xxx.xx.x9:3479', username: "user", credential: "xxxxxxxxxx"}, { url: "turn:95.xxx.xx.x9:3478", username: "user", credential: "xxxxxxxx"}] }; peer= new Peer({config: callOptions}); peer.on('open', function(peerID) { document.getElementById('myid').innerHTML=peerID; }); var peercall; peer.on('call', function(call) { // Answer the call, providing our mediaStream peercall=call; document.getElementById('callinfo').innerHTML="  <button onclick='callanswer()' ></button><button onclick='callcancel()' ></button>"; }); function callanswer() { navigator.mediaDevices.getUserMedia ({ audio: true, video: true }).then(function(mediaStream) { var video = document.getElementById('myVideo'); peercall.answer(mediaStream); //         //peercall.on ('close', onCallClose); //  -  video.srcObject = mediaStream; //      (  ) document.getElementById('callinfo').innerHTML=" ... <button onclick='callclose()' > </button>"; //,   ,     video.onloadedmetadata = function(e) {// ,    video.play(); }; setTimeout(function() { //        document.getElementById('remVideo').srcObject = peercall.remoteStream; document.getElementById('remVideo').onloadedmetadata= function(e) { //       document.getElementById('remVideo').play(); }; },1500); }).catch(function(err) { console.log(err.name + ": " + err.message); }); } function callToNode(peerId) { // navigator.mediaDevices.getUserMedia ({ audio: true, video: true }).then(function(mediaStream) { var video = document.getElementById('myVideo'); peercall = peer.call(peerId,mediaStream); peercall.on('stream', function (stream) { // ,   setTimeout(function() { document.getElementById('remVideo').srcObject = peercall.remoteStream; document.getElementById('remVideo').onloadedmetadata= function(e) { document.getElementById('remVideo').play(); }; },1500); }); // peercall.on('close', onCallClose); video.srcObject = mediaStream; video.onloadedmetadata = function(e) { video.play(); }; }).catch(function(err) { console.log(err.name + ": " + err.message); }); } </script> </body>

تم اختبار هذا الحل بنجاح تحت Windows7 و Ubuntu 18.04 في Chrome و Opera و Firefox. يعمل Chrome أيضًا على Android و MacOS ، لكنه لا يعمل على iPhone و iPad.

مكالمة فيديو في المتصفح على PeerJS. بداية سريعة

More articles: