Создайте видеочат в реальном времени с WebRTC и Twilio

PHP

Чтобы получить доступ к платформе Twilio, вы должны сначала пройти аутентификацию в системе. В этом примере мы используем PHP на стороне сервера, чтобы быстро начать работу. Twilio имеет широкий спектр библиотек на стороне сервера, чтобы удовлетворить ваши предпочтения. После проверки подлинности мы передаем учетные данные, полученные вами из учетной записи Twilio, указанной выше.

// ADD TWILIO REQURIED LIBRARIES require_once('twilio/Services/Twilio.php'); // TWILIO CREDENTIALS $TWILIO_ACCOUNT_SID = 'your account sid here'; $TWILIO_CONFIGURATION_SID = 'your configuration sid here'; $TWILIO_API_KEY = 'your API key here'; $TWILIO_API_SECRET = 'your API secret here'; // CREATE TWILIO TOKEN // $id will be the user name used to join the chat $id = $_GET['id']; $token = new Services_Twilio_AccessToken( $TWILIO_ACCOUNT_SID, $TWILIO_API_KEY, $TWILIO_API_SECRET, 3600, $id ); // GRANT ACCESS TO CONVERSTATION $grant = new Services_Twilio_Auth_ConversationsGrant(); $grant->setConfigurationProfileSid($TWILIO_CONFIGURATION_SID); $token->addGrant($grant); // JSON ENCODE RESPONSE echo json_encode(array( 'id' => $id, 'token' => $token->toJWT(), )); 

HTML

HTML-код для этой демонстрации довольно прост и включает в себя возможность подключения к чату под вашим именем и просмотра полного списка пользователей, которые доступны для чата, а также журнал событий.

 <div class="m-content"> <h1>Quick Start Your WebRTC Project with Twilio</h1> <div class="start"> <input type="text" id="id" name="id" value="" placeholder="Enter your name to join the chat" /> <button id="start">Join Chat Room</button> <button id="disconnect" class="b-disconnect hide">Disconnect from Chat</button> <div class="status"> <strong>MY STATUS:</strong> <span id="status">DISCONNECTED</span> </div> </div> <div class="local"> <div id="lstream"></div> </div> <div class="remote"> <div id="rstream"></div> </div> <div class="users-list"></div> <div class="logs"></div> </div> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js"></script> <script src="https://media.twiliocdn.com/sdk/js/conversations/v0.13/twilio-conversations.min.js"></script> <script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script> <script src="app.js"></script> 

JavaScript

Обо всем по порядку. Важно убедиться, что пользователь подключается с помощью совместимого браузера WebRTC.

 if (!navigator.webkitGetUserMedia && !navigator.mozGetUserMedia) { tlog('You are using a browser that is not WebRTC compatible, please use Google Chrome or Mozilla Firefox', true); } 

Мы используем функцию tlog() для отправки сообщений о статусе пользователю. Мы отправляем строку HTML в параметр msg вместе с установкой e в значение true если возникает ошибка.

 function tlog(msg, e) { if (e) { $('.logs').append('<div class="log error">' + msg + '</div>'); } else { $('.logs').append('<div class="log">' + msg + '</div>'); } } 

Теперь, когда мы знаем, что пользователь подключается с помощью совместимого браузера, мы будем использовать jQuery, чтобы добавить событие щелчка, когда пользователь готов присоединиться к чату. Затем мы отправим Ajax-запрос в файл генерации token.php стороне token.php с id пользователя, подключающегося к чату.

В этой демонстрации мы используем имя, которое пользователь вводит в текстовое поле. После того как мы получили наш токен, мы передаем его Twilio.AccessManager для создания new Twilio.Conversations.Client , который предоставит нам набор слушателей событий, использующих Promise .

 $('#start').on('click', function() { if ($('#id').val() == '') { tlog('Please enter a name to join the chat', true); } else { id = $('#id').val().replace(/\s+/g, ''); $.ajax({ type: 'POST', url: 'token.php', data: { id: $('#id').val() }, dataType: "json", success: function(data) { /* We pass the provided access token to the accessManager */ var accessManager = new Twilio.AccessManager(data.token); conversationsClient = new Twilio.Conversations.Client(accessManager); conversationsClient.listen().then(clientConnected, function(e) { tlog('Could not connect to Twilio: ' + e.message, true); }); } }); } }); 

После того, как мы получили успешно подключенный ответ от new Twilio.Conversations.Client , мы вызываем clientConnected() вместе с firebaseConnect() . Вам нужно будет добавить URL-адрес Firebase из вашей учетной записи, чтобы сохранить всех доступных пользователей. Мы также добавим некоторые прослушиватели событий для Firebase, чтобы отслеживать, когда пользователи подключаются и выходят из чата.

 function clientConnected() { firebaseConnect(); $('#id, #start').hide(); $('#disconnect').fadeIn(); $('#status').css({ 'color': '#5E9F21' }).text('CONNECTED'); tlog('You have succussfully connected to this Twilio chat room as <strong>' + id + '</strong>.'); if (!lmedia) { startConversation(); }; conversationInvite(); } function firebaseConnect(){ var fburl = '...add your firebase url here...'; firebase = new Firebase(fburl + '/users'); var uid = firebase.push(id); fid = uid.toString(); new Firebase(fid) .onDisconnect() .remove(); firebase.on('child_added', function(child) { addParticipant(child); }); firebase.on('child_removed', function(child) { $('.' + child.val()).remove(); }); } function addParticipant(child) { if (child.val() != id) { var markup = '<div class="user ' + child.val() + '"><span>' + child.val() + '</span><button class="b-connect" id="' + child.val() + '">Call Now</button></div>'; $('.users-list').append(markup); } } 

Теперь о волшебстве WebRTC! Мы получаем доступ к микрофону и камере пользователя, вызывая new Twilio.Conversations.LocalMedia() и присоединяя поток к элементу HTML. Обратите внимание: вам нужно будет предоставить доступ к вашему микрофону и камере.

 function startConversation() { lmedia = new Twilio.Conversations.LocalMedia(); Twilio.Conversations.getUserMedia().then(function(mediaStream) { lmedia.addStream(mediaStream); lmedia.attach('#lstream'); }, function(e) { tlog('We were unable to access your Camera and Microphone.'); }); } 

Далее мы добавляем прослушиватель событий для входящих приглашений других пользователей в чате. Мы добавили invite.accept().then(conversationStarted) чтобы разрешить автоматическое соединение. В вашем приложении вы можете запросить другого пользователя перед подключением. Обратите внимание: вам нужно будет разрешить доступ к вашей камере и микрофону для каждого дополнительного пользователя.

 function conversationInvite() { conversationsClient.on('invite', function(invite) { invite.accept().then(conversationStarted); tlog('You have a incoming invite from: <strong>' + invite.from + '</strong>'); }); } , а function conversationInvite() { conversationsClient.on('invite', function(invite) { invite.accept().then(conversationStarted); tlog('You have a incoming invite from: <strong>' + invite.from + '</strong>'); }); } 

После того, как вы присоединились к чату, вы увидите кнопку « Call Now рядом с каждым пользователем, который доступен для чата в чате. Нажмите на кнопку, чтобы подключиться к пользователю.

Мы передадим наш текущий локальный медиа-поток как options.localMedia человеку, которого мы приглашаем в чат.

 $(document).on('click', '.b-connect', function() { var user = $(this).attr('id'); var options = {}; options.localMedia = lmedia; conversationsClient .inviteToConversation(user, options) .then(conversationStarted, function(error) { tlog('We were unable to create the chat conversation with that user, try another online user.', true); }); }); 

После принятия входящего приглашения, мы будем подключены, чтобы начать разговор.

 function conversationStarted(convo) { conversation = convo; tlog('We are waiting on your friend to connect...'); participantConnected(); participantDisconnected(); } 

Затем мы добавляем функцию participantConnected() с прослушивателем событий для всех участников, подключающихся к беседе. Когда присоединяется другой пользователь, мы присоединяем его медиа с помощью participant.media.attach('#rstream') .

 function participantConnected() { conversation.on('participantConnected', function(participant) { new Firebase(fid).remove(); participant.media.attach('#rstream'); tlog('You are connected with: <strong>' + participant.identity + '</strong>'); }); } 

Наконец, мы добавляем прослушиватель событий для всех участников, отключающихся от разговора, в функции participantDisconnected() . Это позволяет нам отслеживать любые отключения и успешно удалять пользователей из чата.

 function participantDisconnected() { conversation.on('participantDisconnected', function(participant) { if (!disconnected) { var uid = firebase.push(id); fid = uid.toString(); new Firebase(fid).onDisconnect().remove(); } $('.' + participant.identity).remove(); tlog('<strong>' + participant.identity + '</strong> has disconnected from this chat.'); $('.users-list').empty(); if (firebase) { firebase.once('child_added', function(child) { addParticipant(child); }); } }); } 

Мы предлагаем пользователям способ вручную отключиться от чата и сбросить его до состояния по умолчанию. Мы очищаем доступность пользователя от Firebase, чтобы другие пользователи не могли подключиться, пока пользователь не вернется в онлайн. Затем мы прекращаем потоковую передачу мультимедиа на разговор и прекращаем совместный доступ к нашему микрофону и камере.

 $('#disconnect').on('click', function() { new Firebase(fid).remove(); firebase.off(); firebase = null; disconnected = true; $('#disconnect').hide(); $('#start, #id').fadeIn(); $('#status').css({ 'color': '' }).text('DISCONNETED'); $('.users-list').empty(); stopConversation(); }); function stopConversation() { if (conversation) { conversation.disconnect(); conversationsClient = null; conversation = null; lmedia.stop(); lmedia = null; tlog('You have successfully disconnected from this chat conversation, start another one now.'); } else { lmedia.stop(); lmedia = null; tlog('Please rejoin the chatroom to start a conversation.'); } } 

webrtc.tutorials.

Если вас интересуют другие учебные пособия для других поставщиков PaaS, Blacc Spot Media запустит новый веб-сайт webrtc.tutorials . Сайт также предоставит советы и рекомендации для улучшения связи в ваших приложениях с помощью WebRTC.

Вывод

По мере развития преимуществ и возможностей WebRTC мы увидим, как он изменит наш взгляд на коммуникации. Так же, как приложения обмена сообщениями заняли традиционные социальные сети с точки зрения количества пользователей, WebRTC расширит базовые функции обмена сообщениями, доступные для компаний и организаций по всему миру. Twilio и Firebase делают создание приложений связи в реальном времени, таких как это, простым и легким для развертывания разработчиками. Каков твой следующий шаг? Чтобы построить что-то великое, конечно!