Для реалізації функціоналу відео-чату в браузері існує дві найбільш відповідні технології - WebRTC і Flash. Кожна з технологій має ряд своїх особливостей, наприклад, у Flash можна використовувати відео кодеки H.264 або Sorenson, а в WebRTC на даний момент доступний VP8, що робить два ці підходи погано сумісними один з одним (перекодування відео на льоту - це дуже затратна операція), до того ж відео-чат краще робити peer-to-peer по можливості, чи варто говорити, що з'єднати Flash та WebRTC безпосередньо не вийде. У нашому прикладі ми розглянемо варіант відео-дзвінка з WebRTC в WebRTC, за допомогою платформи VoxImplant . У цілому нині, можна зробити вибір конкретного варіанта, до динамічного вибору технології залежно від цього кому телефонуємо. Подробиці, як завжди, під катом.
Створення програми, користувачів, сценарію та налаштування Для початку нам знадобиться обліковий запис розробника VoxImplant (), після входу в панель управління VoxImplant у розділі Applications створюємо новий додаток і називаємо його videochat. Щоб організувати простий відео-чат нам знадобиться хоча б 2 користувача - testuser1 і testuser2, створюємо в розділі Users і прив'язуємо до додатку, використовуючи кнопку Assign applications (аналогічно можна вже створених користувачів прив'язати до додатку під час редагування програми). При дзвінку від користувача до користувача все одно викликається сценарій обробки дзвінка, який пишуться на Javascript і виконується двигуном VoxEngine. Створюємо в розділі Scenarios новий сценарій, назвемо його User2User, при використанні режиму peer-to-peer сценарій буде виглядати так:VoxEngine.forwardCallToUserDirect();
Якщо у майбутньому захочеться ганяти відео через сервер (примусово), можна використовувати VoxEngine.forwardCallToUser(null, true); Але в цьому випадку дзвінки коштуватимуть гроші.
Якщо потрібно керувати сигналізацією, щоб, наприклад, завершити дзвінок у якийсь момент з боку сервера, то можна замість хелпера forwardCallToUserDirect використовувати наступний сценарій:
Var call1, call2; VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) ( call1 = e.call; call2 = VoxEngine.callUserDirect(e.call, e.destination, e.displayName, e.headers); call2.addEventListener(CallEvents.Connect) handleCallConnected); )); function handleCallConnected(e) ( call1.answerDirect(call2); // Тут можна, наприклад, роз'єднати дзвінок через якийсь час setTimeout(VoxEngine.terminate, 5000); )
Після створення сценарію нам потрібно прив'язати його до програми через правило (Rule) - йдемо в розділ Applications і редагуємо наш додаток, у тебе Rules створюємо нове правило (Add rule). Назвати можна як завгодно, наприклад, Intercom, у Pattern вказується регулярний вираз- правило спрацьовує якщо номер відповідає цьому виразу, залишаємо. * і перетягуємо наш сценарій User2User з Available в Assigned і зберігаємо правило. Зберігаємо програму, залишається тільки зробити клієнт за допомогою VoxImplant Web SDK.
Створення веб-клієнта Для клієнта потрібно лише файл voximplant.min.js, який лежить на cdn, а також базове розуміння, як влаштовано Web SDK. Щоб все виглядало все більш-менш пристойно, можна використовувати Bootstrap. Не бачу сенсу вивалювати сюди весь код з HTML-файлу, розберемо лише основні моменти, а глибше розібратися завжди можна, завантаживши файли з нашої сторінки на GitHub.// Підключаємо SDK //функція для виведення лога відразу в HTML function log(str) (document.getElementById("log").innerHTML += str+"
"; ) // Створюємо інстанс VoxImplant var voxAPI = VoxImplant.getInstance(); // Вішаємо обробники подій voxAPI.on(VoxImplant.Events.SDKReady, onSdkReady); voxAPI.on(VoxImplant.Events.Connection. on(VoxImplant.Events.ConnectionFailed, onConnectionFailed); voxAPI.on (VoxImplant.Events. Call); voxAPI.on(VoxImplant.Events.MicAccessResult, onMicAccessResult); // Ініціалізуємо SDK try ( voxAPI.init(( micRequired: true, // запит доступу до мікрофона/камери до підключення до VoxImplant videoSupport) true // ; ) catch(e) ( // якщо відбулася помилка ініціалізації, то виводимо її log(e.message); ) // Тепер можна користуватися SDK - підключаємося function onSdkReady()( voxAPI.connect(); // після виклику з'явиться діалог доступу до камери/мікрофону) // Обробляємо function onMicAccessResult(e) ( if (e.result) ( // дозволили доступ до камери/мікрофону ) else ( // заборонили доступ до камери/мікрофону ) ) // Встановили з'єднання з VoxImplant function onConnectionEstablished() ( // Можна авторизуватись - тут треба показати діалог для введення даних, а потім викликати наступну функцію // Замініть application_user, application_name, account_name та application_user_password на ваші дані для тестування voxAPI.login(application_user+"@ +account_name+".voximplant.com", application_user_password); ) // Не змогли підключитися до VoxImplant function onConnectionFailed() ( // Або веб-сокети не підключилися або UDP закрито ) // Закрилося з'єднання function onConnectionClosed() ( // Можна викликати connect по новій для перепідключення ) function onAuthResult(e) ( if (e.result) ( // авторизувалися - тепер можна дзвонити або приймати дзвінки ) else ( // помилка авторизації, можна подивитися e.code, щоб зрозуміти що не так ) ) var currentCall = null; // поточний дзвінок // Вхідний дзвінок function onIncomingCall(e) ( currentCall = e.call; // Вішаємо обробники currentCall.on(VoxImplant.CallEvents.Connected, onCallConnected); currentCall.on(VoxImplant.CallEvents.Disconnect) currentCall.on(VoxImplant.CallEvents.Failed, onCallFailed); // Відповідаємо на дзвінок автоматично. вхідному дзвінкуі дати можливість прийняти чи відбити. currentCall.answer(null, (), (receiveVideo: true, sendVideo: true )); ) // Функція вихідного дзвінка function createCall() ( // application_username - ім'я користувача, якому дзвонить (по відео) currentCall = voxAPI.call(application_username, ( receiveVideo: true, sendVideo: true ), " TEST "X-DirectCall": "true"));// Вішаємо обробники currentCall.on(VoxImplant.CallEvents.Connected, onCallConnected); Failed, onCallFailed); ) // Дзвінок з'єднався function onCallConnected(e) ( // Включаємо відправку відео та показуємо вхідне відео voxAPI.sendVideo(true); currentCall.showRemoteVideo(true); ) // Дзвінок завершився function onCallDisconnected(e) ( currentCall = null; ) // Помилка при дзвінку function onCallFailed(e) ( // Код помилки e.code, опис помилки e.reason )
Ось власне всі основні функції та евенти, які нам потрібні. Звичайно, це голий JS, до цього потрібно прикрутити стилі та верстку. Варіант, який ми виклали на GitHub виглядає так: 
Якщо потрібна підтримка і Flash і WebRTC доведеться перемикати клієнтський додаток у відповідний режим, тому що відео-дзвінки WebRTCFlash ми продавати не стали. Сподіваємося, що найближчим часом підтримка WebRTC з'явиться в IE12, а за ним і в Safari. Якщо у вас потрібен варіант «дзвінок з сайту оператору», то можна зробити 2 операторські програми, одна з використанням WebRTC, інше з використанням Flash, і спрямовувати дзвінки з сайту в залежності від того, який режим SDK включиться у відвідувача сайту або на одного або на іншого оператора.
Думаю, що кожен із Вас знає, що таке чат. І дуже часто на сайтах можна зустріти або маленькі чати, або досить великі та складні. У цій статті я опишу принцип створення чату. Зверніть увагу, що в цій статті не буде готового коду "скопіював-вставив", а лише алгоритм, за допомогою якого Ви, маючи необхідні знання, зможете зробити чат.
Ключова особливістьчату в тому, що його вміст оновлюється автоматично. Звідси і всі труднощі.
Для початку розберемо з Вами структуру таблиці у базі даних. Ось ті поля, які обов'язково знадобляться:
- id – унікальний ідентифікатор.
- name - ім'я, що залишило повідомлення. Тут також може бути, наприклад, user_id , що означає ID користувача з іншої таблиці.
- message – сам текст повідомлення.
- date – дата відправлення повідомлення.
Безумовно, це лише приклад. Ви можете додавати ще багато інших полів, тим самим, розширюючи можливості Вашого чату.
Тепер необхідно вивести HTML-код:
| Ім'я | Повідомлення | Дата |
| Ім'я | Повідомлення | Дата |
У цьому коді знову ж таки все як приклад. Можна все сміливо змінювати, але принцип має бути тим самим: є місце, де виводяться повідомлення, причому вони виводяться в однаковому вигляді. Разом із полем, де виводяться повідомлення, є текстове поле та кнопка "Надіслати".
Обов'язково для блоку chat поставте фіксовану висоту, щоб при додаванні нових повідомлень у Вас цей блок не виростав, також поставте смугу прокручування у нього, щоб можна було переглянути всі повідомлення. Все це робиться за допомогою CSS.
Тепер займемося JavaScript :
function send() (
var message = document.getElementById("message").value;
var name = "Гість";
/* Тут блок відправки POST-запиту з даними (наприклад, через Ajax) */
}
function update() (
/* Тут надсилання запиту на отримання всіх повідомлень (наприклад, через Ajax) */
/* Тут виведення повідомлень у певному форматі прямо в HTML-код з використанням DOM або JQuery. */
}
setInterval("update()", 1000); // Оновлення вікна чату кожну секунду
І, нарешті, PHP-код (додавання нових повідомлень):
І останній файл, які потрібно - це отримання всіх повідомлень з таблиці:
Все, коло замкнулося, і чат заробив. Як бачите, зробити чат досить складно і потрібно мати великий багаж знань. Але я сподіваюся, що ця стаття дуже полегшить Вам це завдання. Абсолютно будь-який чат, який би він складний був, заснований на принципах, описаних у цій статті, тому сміливо можете його використовувати як каркас.
Чат – це сторінка в інтернеті, що дозволяє спілкуватися одночасно з багатьма користувачами. Їх безліч по всій всесвітній павутині. Є чати в локальних мережах, в організаціях, є користувачі, які створюють чати для себе та своїх друзів, щоб спілкуватися без сторонніх. Це дуже зручно для обговорення будь-якого спільного заходу.
ІнструкціяБажаєте дізнатися, як зробити чат на сайті? Немає нічого простішого! На мій подив виявилося, що встановити чат можна за 2-3 хвилини! Відразу ж ділюся ефективними порадами зі своїми читачами.
Чататися сьогодні стало звичною справою на різних майданчиках Інтернету, включаючи форуми, портали, вузькоспеціалізовані та професійні сайти. Здебільшого, для спілкування відвідувачів із власниками ресурсів призначено великий асортимент форм зворотного зв'язку. А для того, щоб відвідувачі могли спілкуватися не тільки з автором, а й один з одним, чудово підійде форма чату, встановлена на ваших сайтах та блогах.
Навіщо потрібен чат?Онлайн-чат – це унікальний спосіб зміцнення довіри між продавцем та покупцем
Онлай-чат - це унікальний спосіб збільшення продажів
Онлайн-чат - це відмінний спосібспростити спілкування з усім світом
Онлайн-чат - це альтернатива телефонної розмовиу реальному часі
Зауважу, що за всіх очевидних плюсів наявності чату на сайті, не зайвим буде сказати і про мінуси такого спілкування.
Плюси та мінусиНасамперед, рекомендується встановлювати чат на сайті, відвідуваність якого хоча б має 100-150 унікальних відвідувачівна добу. В іншому випадку чат буде порожнім, а значить, що приєднуватись до спілкування відвідувачі не стануть.
У чаті обов'язково має бути адміністратор. Звички багатьох нас дозволяють спілкуватися з частим вживанням нецензурних висловлювань. А значить, якщо ви не хочете, щоб ваш сайт перетворився на місце для збору спаму та смачних виразів, то в онлайні потрібно бути постійно. Що не під силу, звичайно, зробити одній людині. Отже, має бути дві-три особи, які обслуговують чат протягом доби, та підтримують спілкування.
До речі, все, що вебмастер має на своєму сайті для зв'язку з відвідувачами: сторінка контактів, форма зворотного зв'язку, гостьова книга, форум - повинні підтримуватися в актуальному стані постійно, а не час від часу.
Інтерактивний діалог з відвідувачами передбачає наявність у ньому активних користувачів, інакше користувач, який зайшов на сторінку, моментально зробить висновок, що чат мертвий, а сайт покинутий. Такий результат, гадаю, ні один вебмайстер собі не забажає.
Тому потрібно дуже добре подумати, і вирішити, для чого на вашому сайті потрібен сайт, а організувати його буде зовсім не складно.
Як зробити чат?Отже, переходимо на сервіс зі створення чату chatadelic.net, реєструємось, і натискаємо на вкладку із зеленим плюсом «Створити чат». Далі даємо назву своєму чату, вписуємо адресу сайту, де він перебуватиме, і отримуємо HTML-код сайту, який можна поставити на сторінку сайту.
Подивіться та вивчіть уважно всі вкладки, розташовані в цьому вікні. Прочитайте інструкцію, оцініть масштаб роботи у зв'язку з подальшим використанням ефективного інструменту. Налаштуйте чат на свій смак, налаштування ресурсу це дозволяють зробити.
Чат можна встановити в тому місці, де він буде найбільш помітний: це може бути головна сторінка, на сторінці статті, як у моєму випадку, відображатися у віджеті або футері сайту. Не забудьте написати правила поведінки для тих, хто користуватиметься вашим чатом. Це допоможе уникнути багатьох непорозумінь у спілкуванні.
Основні переваги:Це дуже зручно!
Посилює поведінковий фактор, оскільки збільшується час, проведений користувачем на сайті.
Чат приваблює людей, які не люблять залишати, а воліють спілкуватися в аську, використовуючи елемент реального часу. Треба мати на увазі, що не всі користувачі вміють писати коментарі або знають свою електронну пошту))
Іноді, новачкам, для більш повного розуміння, корисно побачити відповіді на запитання інших користувачів, у цьому випадку керівництво до дій стає більш зрозумілим.
Як розкрутити чат?Безумовно, якщо в цьому є необхідність, слід скористатися всіма відомими способами і методами просування в Інтернеті, так як чат ви робите не для себе одного:
Нижче ви можете побачити, як виглядає чат на сайті. Мені його, на жаль, довелося прибрати із сайту, оскільки швидкість завантаження сторінки значно збільшилася.
Тісна взаємодія зі своїми клієнтами завжди була запорукою побудови успішних взаємин та продажів ваших чи товарів. Ставайте ще на один крок ближче до ваших відвідувачів, використовуючи ефективний інструмент онлайн-чат. З того моменту, як ви дізналися, як зробити чат на сайті, до моменту появи на вашому сайті, може пройти всього кілька хвилин. Але результат прямого діалогу зі своїми відвідувачами ви зможете оцінити трохи згодом. Стати реальними консультантами для своїх клієнтів, і продажі ваших товарів і послуг завдяки вибудуваній вами довірі зростуть у кілька разів. Бажаю вам удачі!
