Что значит vk broadcast

Недавно в работе с одним из наших клиентов мы столкнулись с проблемой в пользовательском сценарии: VK API требует конкретный, железный URL для редиректа после авторизации. А у нас были сотни ссылок с динамическими параметрами, с которым могла начаться авторизация.

Меня зовут Фёдор Макареев, я frontend-разработчик в Evrone. В статье расскажу, как я применил Broadcast Channel API, чтобы не терять состояние до авторизации и не бесить пользователей.

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

В нашем случае речь шла об авторизации через VK (с помощью authcode-flow-user), хотя описываемый метод применим, например, к Одноклассникам или другим соцсетям.

Специальные IP-адреса: broadcast, multicast, loopback и неопознанная сеть

Как это должно работать

В процессе авторизации нужно было получить email пользователя от VK и другую полезную информацию и, в случае с регистрацией, передать на клиент в форму регистрации.

Мы заранее формируем ссылку для перехода в VK примерно такого вида:

С нашего сайта клиент переходит по ссылке, предоставляет права на авторизацию с помощью своего VK аккаунта. VK объясняет пользователю, какие данные будут расшарены, получает подтверждение и перенаправляет на адрес, который мы указали в первом шаге redirect_uri=http://example.com/, предоставив нам code.

Этот код отправляется на бэкенд для получения информации о пользователе.

Проблема — форма авторизации может быть где угодно на сайте

Виджет авторизации/регистрации не привязан к конкретному адресу и может быть вызван с множества адресов. VK требует указать в настройках приложения все возможные redirect_uri. При этом, VK проверяет их на строгое сравнение и не даёт использовать динамические адреса.

Можно установить единую страницу для redirect_uri, на которой пользователь продолжит регистрацию. Тогда пользователь потеряет состояние страницы, с которой он ушел для регистрации/авторизации, и ему придется всё делать по новой.

Решение — слушаем процесс авторизации и сохраняем состояние пользователя

Я начал изучать, как вообще можно узнать, что происходит в соседней вкладке или окне. Вот, например, статья, которая даёт 4 возможных варианта: Local Storage Events, Broadcast Channel API, Service Worker Post Message и Window Post Message.

Local storage event использует промежуточное хранение данных в кэше, которым придется управлять вручную, это не так удобно. Service Worker Post Message — тоже не очень подходит для этой задачи, так как не дает явно настроить тип сообщения, которое я отправляю. Пришлось бы вручную добавлять в объект с данными поле type, а в месте, где я подписан на него, добавлять проверку значения этого поля. Window Post Message не подошёл по этой же причине.

VFeed — достойная замена стандартному клиенту VK?

Я использовал Broadcast Channel API для обмена сообщениями и полифил для него broadcast-channel. Вот как это работает:

1. В настройках приложения на стороне VK указываем один единственный redirect_uri.
2. Клиент начинает авторизацию, перенаправляется на сайт VK в новом окне, это окно вызывается с помощью window.open. На странице, которая инициирует создание окна, создается канал обмена сообщениями:
   const bc = new BroadcastChannel(‘vk_auth_channel’);
   И устанавливается прослушка этого канала на получение сообщений:
   bc.onmessage = event =>
3. На странице, куда VK перенаправит пользователя (страница из redirect_uri), будет скрипт. Он создаст такой же канал, но уже для отправки сообщений. Из параметров достаем код или ошибку, отправляем по каналу vk_auth_channel статус, code:
   bc.postMessage();
   Или ошибку:
   bc.postMessage();
4. После чего закрываем окно. Полученный code можно отправлять на бэкенд для обработки.

Посмотреть на полный процесс авторизации через VK вместе с бэкендом можно в этой хорошей статье. Вместе с описанным выше подходом вы получите авторизацию через ВК без привязки к странице. Это полезно, чтобы не прерывать пользовательский сценарий и случайно не устроить взрывной отток юзеров.

• Блог компании Evrone
• Программирование
• ВКонтакте API

Источник: habr.com

Скачать видеокодер для ВК бесплатно. Настройка

Интернет

Чтобы создавать прямые трансляции на сайте ВКонтакте, нужен видеодекодер. Для ВК больше других подойдет Open Broadcast Software. Разработчик предлагает скачать данную программу бесплатно.

Для этого заходим на сайт. Вот ссылка на нужную страницу: obsproject.com/download. Чтобы началась загрузка программы, на этой странице нужно нажать на кнопку Download Installer.

Настройка видеокодера — как создать трансляцию в вк

Перед настройкой видеодекодера получаем данные для проведения трансляции в ВК. Для этого заходим в свой аккаунт. В левом меню нажимаем на «Видео», после этого нас перебрасывает на страницу, где необходимо нажать на «Создать трансляцию».

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

А вот что нужно будет сделать, чтобы создать трансляцию:

— совершить загрузку обложки;
— назвать трансляцию и сделать ее описание;
— из выпадающего списка выбрать категорию;
— копируем ссылку и ключ KEY потока.

Внимание! Этот ключ нельзя давать никому. Имейте в виду, что знающий его человек будет иметь возможность производить трансляцию с вашего канала. Если введенные вами настройки перестанут вас устраивать, вы всегда сможете ввести новые.

В следующих настройках вы сможете указать, кто сможет оставлять комментарии к вашим трансляциям. Если вы поставите галочки в определенных чекбоксах, то созданная трансляция будет опубликована на вашей странице или сообщение о ее публикации будет отправлено подписчикам. Теперь нажимаем «Сохранить».

После того, как настройки будут сохранены, видео можно будет видеть на вашей странице.

Настраиваем видеодекодер для ВК

После скачивания программы ее нужно запустить. Важно! Если в чекбоксе возле Browser Source стоит галочка, ее обязательно нужно убрать. Это дает запрет загрузки на ваш компьютер ненужного программного обеспечения. А вот возле OBS Studio галочку надо оставить.

После загрузки программы на вашем рабочем столе был создан ее ярлык. Нажимаем на него для запуска.

После нажатия на ярлык программа открывается. Теперь нажимаем на «Файл». Появится окно, в котором выбираем «Настройки».

Дальше жмем на «Вещание». Тип вещания выбираем такой, какой обозначен на скриншоте ниже. Потом указываем ссылку и ключ потока, полученные вами, когда вы только создавали трансляцию.

Теперь жмем на «Вывод». Обратите внимание на поле «Видео битрейт». Битрейт следует устанавливать, исходя из качественных параметров ролика. Смотрите скриншот ниже:

Все остальные настройки производим так, как показано на фото:

Теперь переходим во вкладку «Аудио», и делаем все, как на нижнем снимке. «Desktop Аудиоустройство» — здесь выбираем устройство, которое будет воспроизводить звук . Если оно только одно, оставляем настройки по умолчанию.

«Mic/Auxiliary Аудиоустройство» — здесь нам предлагается выбрать микрофон. Здесь также оставляем настройки по умолчанию, если он всего один.

Теперь жмем на «Видео». Здесь делаем следующие настройки:

— Базовое решение выбираем в соответствии с тем, какое разрешение имеет экран.

— Устанавливаем разрешение потока, отправляющегося на сервера ВК. Учтите, что если разрешение будет ниже базового, это будет способствовать уменьшению расхода трафика и сократит нагрузку на процессор.

— «Фильтр масштабирования» устанавливаем, как на фото ниже.

— «Общие значения FPS» — здесь задаем значение от 30 до 60. Если кто не в курсе, это частота кадров.

— Теперь нажимаем на «Сохранить».

Сейчас переходим к выбору типа нашей трансляции. Делается это в окне трансляции, рядом с параметром «Источники». Смотрим фото ниже:

Здесь надо будет сделать кое-какие пояснения. Если вы остановите выбор на параметре «Захват экрана», то во время трансляции будет воспроизводиться то, что происходит на экране вашего компьютера. Ну и так далее. Создавая Сцены, вы получаете возможность быстрого переключения источников вещания.

После всех настроек запускаем трансляцию, нажав на соответствующую кнопку.

Вот и все. Теперь посетители вашей страницы могут видеть проводимую вами трансляцию.

Ещё вам будет интересно прочитать статью как выложить ролик на youtube.

Источник: nuzhnaya-infa.ru

VK запустила аналог Twitch – там все то же самое, только новое и с боевым пропуском для стримеров

С августа 2022 года VK тестировала собственную стриминговую платформу VK Play Live для тех, кто любит игры. Не для веб-моделей и сомнительных игр с руками, а для геймеров. Скорее всего, это связано с запуском магазина видеоигр VK Play.

VK тестирует собственный стриминговый сервис VK Play Live
Стримеры получат 90% выручки с трансляций и смогут продавать платные подписки.

И вот выпустила. Ради чего? В качестве одного из преимуществ платформы создатели указывают монетизацию. Начинающие стримеры смогут не только настраивать пожертвования, но также принять участие в своеобразном соревновании с денежными вознаграждениями. Практически аналог батлпасса с наградами за ачивки.

На многое сервис не рассчитывает. Малыми и средними называются трансляции с аудиторией до 300 человек, а совсем маленьким достаточно 10 человек, но активных. Такие стримеры и заняли основной экран площадки: танкисты, политики, музыканты и прочие верные последователи ламповых стримов для узкой аудитории.

По всей видимости, VK ориентируется на модель китайских коллег из Huya Live.

На момент написания статьи, на сайте всего одна трансляция с 300+ зрителей. У ближайшего конкурента в 10 раз меньше зрителей.

Источник: coop-land.ru