Убедитесь что ваш RTSP источник поддерживает H.264 кодек для видео и AAC или G.711 кодек для аудио, а камера отдает поток по протоколу TCP. Параметры источника можно уточнить в документации к устройству или серверу. RTSP-адрес обычно выглядит так: «rtsp://host:554/live.sdp»
План тестирования
Подключиться к WCS серверу
Запустить в плеере воспроизведение видеопотока с вашей IP камеры
2. Выберите из меню в левой части страницы пункт «Player»
3. Для удобства дальнейшего тестирования откроем пример в новой вкладке. Для этого нажмите на изогнутую стрелку в правом верхнем углу страницы
4. Заполните поля «WCS URL» и «Stream»(1). Обычно поле «WCS URL» заполнено по умолчанию и содержит wss URL текущего WCS сервера. В поле «Stream» вы можете указать RTSP-адрес видеопотока, который отдает ваша RTSP камера. Для воспроизведения потока нажмите кнопку «Start». Вы можете отрегулировать громкость с помощью ползунка «Volume» и развернуть воспроизведение на весь экран с помощью кнопки «Full Screen»(2)
5. На странице выводится текущий статус подключения и воспроизведения потока. Что бы остановить воспроизведение нажмите кнопку «Stop»
Выше мы протестировали работу плеера в Google Chrome. Похожим образом плеер воспроизводит видеопотоки в других браузерах и мобильных приложениях для iOS и Android.
Для того чтобы встроить RTSP-плеер в ваш вебсайт, перейдите на страницу Внедрение
Для быстрой установки и настройки сервера воспользуйтесь этой инструкцией. Кроме этого, для тестирования вы можете подключиться к нашему демо-серверу demo.flashphoner.com по протоколу Websockets.
Пошаговая инструкция по внедрению HTML5-RTSP плеера
Для внедрения RTSP плеера на свою веб-страницу, создадим два пустых файла player-min.html и player-min.js. Эти файлы будут содержать минимальный код для работы нашего плеера.
1. Создаем константы и переменные для статуса работы сервера, WebSocket сессии и потока. Для обеспечения работы с браузером iOS Safari нам потребуется прелоадер, который можно скачать с GitHub
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";
2. Инициализируем API при загрузке HTML страницы и подключаемся к WCS серверу через WebSocket. В этом примере мы используем наш демо-сервер. Для тестирования собственного сервера замените «wss://demo.flashphoner.com» на адрес своего WCS
function init_api() {
Flashphoner.init({});
//Connect to WCS server over websockets
session = Flashphoner.createSession({
urlServer: "wss://demo.flashphoner.com" //specify the address of your WCS
}).on(SESSION_STATUS.ESTABLISHED, function(session) {
console.log("ESTABLISHED");
});
playBtn.onclick = playClick;
}
3. Определяем браузер, и, если браузер это Сафари, запускаем прелоадер. Воспроизведение должно начинаться строго по жесту пользователя (т. е. По нажатию кнопки). Это ограничение мобильных браузеров Safari. (Подробнее здесь):
var Browser = {
isSafari: function() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
},
}
function playClick() {
if (Browser.isSafari()) {
Flashphoner.playFirstVideo(document.getElementById("play"), true, PRELOADER_URL).then(function() {
playStream();
});
} else {
playStream();
}
}
4. Далее создаем поток session.createStream() и передаем RTSP URL «rtsp://myrtspserver/stream1» и элемент myVideo в качестве параметров. Готово, видеопоток проигрывается на Web-странице.
Для корректной работы замените «rtsp://myrtspserver/stream1» на адрес требуемого RTSP потока
function playStream() {
session.createStream({
name: "rtsp://myrtspserver/stream1", //specify the RTSP stream address
display: document.getElementById("play"),
}).play();
}
Полный код JavaScript (файл «player-min.js»)выглядит так:
//Status constants
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";
//Init Flashphoner API on page load
function init_api() {
Flashphoner.init({});
//Connect to WCS server over websockets
session = Flashphoner.createSession({
urlServer: "wss://demo.flashphoner.com" //specify the address of your WCS
}).on(SESSION_STATUS.ESTABLISHED, function(session) {
console.log("ESTABLISHED");
});
playBtn.onclick = playClick;
}
//Detect browser
var Browser = {
isSafari: function() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
},
}
/**
*
If browser is Safari, we launch the preloader before playing the stream.
Playback should start strictly upon a user's gesture (i.e. button click). This is limitation of mobile Safari browsers.
https://docs.flashphoner.com/display/WEBSDK2EN/Video+playback+on+mobile+devices
*
**/
function playClick() {
if (Browser.isSafari()) {
Flashphoner.playFirstVideo(document.getElementById("play"), true, PRELOADER_URL).then(function() {
playStream();
});
} else {
playStream();
}
}
//Playing stream
function playStream() {
session.createStream({
name: "rtsp://myrtspserver/stream1", //specify the RTSP stream address
display: document.getElementById("play"),
}).play();
}
В результате получаем минимальный плеер, который представляет собой div-блок с рамкой и способен запросить RTSP поток и проиграть через сервер.
Для трансляции RTSP потока с IP камеры в браузер и воспроизведения в браузере без дополнительных плагинов, требуется специальная подготовка и конвертация RTSP потока в HTML5-совместимый формат, поддерживаемый браузерами. Плеер обращается к WCS-серверу для конвертации RTSP потока в HTML5, а сервер запрашивает RTSP поток у камеры или другого источника по протоколу RTSP. Для воспроизведения потока в браузере используются форматы WebRTC, MSE (Media Source Extension) и HLS.
Технические характеристики
Видеопоток захватывается с RTSP-источника, отдающего аудио и видео в поддерживаемых кодеках и трансформируется на стороне сервера для дальнейшего воспроизведения в браузерах и мобильных устройствах.
Источники RTSP
RTSP-кодеки
Технологии воспроизведения
Платформы воспроизведения
IP камеры
Медиасерверы
Системы наблюдения
Конференц-серверы
H.264
VP8
AAC
G.711
Speex
WebRTC
Websocket
MSE
HLS
Flash
Chrome
Firefox
Opera
Safari, Mac OS
Safari, iOS
IE
Edge
iOS SDK
Android SDK
Источники RTSP
IP камеры
Медиасерверы
Системы наблюдения
Конференц-серверы
RTSP-кодеки
H.264
VP8
AAC
G.711
Speex
Технологии воспроизведения
WebRTC
Websocket
MSE
HLS
Flash
Платформы воспроизведения
Chrome
Firefox
Opera
Safari, Mac OS
Safari, iOS
IE
Edge
iOS SDK
Android SDK
Схема доставки RTSP-видеопотока на браузеры и мобильные приложения
Web Call Server подключается к IP-камере либо серверу потокового видео по протоколу RTSP, получает аудио и видео трафик, конвертирует этот трафик в совместимый с браузерами формат, и далее раздает потоковое видео на HTML5-страницы пользователей и на мобильные приложения для iOS и Android.
Пошаговая схема RTSP-трансляции на HTML5-браузер или мобильное приложение
Браузер подключается к серверу по протоколу Websocket и запрашивает RTSP-видеопоток. С этого начинается трансляция.
Браузер запрашивает RTSP-поток
Web Call Server подключается к IP-камере и запрашивает требуемый браузером RTSP-поток
IP-камера отправляет аудио и видео трафик внутри RTSP-соединения
Web Call Server конвертирует трафик в WebRTC или Websockets и передает браузеру на воспроизведение
HTML5-RTSP player в WebRTC браузере Google Chrome
На скриншоте ниже показан пример работы плеера в браузере Chrome через WebRTC. Плееру передается Websocket-адрес сервера и RTSP-адрес камеры.
HTML5-RTSP демо-плеер
Посетите наш демо-сервер чтобы проверить работу плеера в действии. Для проверки плеера попробуйте проиграть собственный RTSP поток.
16 апреля 2025 мы начали переход со Skype на Teams.
В этот же день разослали через Skype flashphoner.com (Flashphoner Sales) сообщение о переходе.
К сожалению, это сообщение стало триггером для блокировки аккаунта Microsoft (Skype + Teams), скорее всего за спам. На текущий день, аппеляции ни к чему не привели, и аккаунт остается в блокировке.
Актуальный аккаунт для связи:
Microsoft Teams: sales@flashphoner.com — продажи, пресейл, вопросы лицензий
Мы восстановили платежи по картам с 13 сентября 2024. Пожалуйста пишите на sales@flashphoner.com и в Скайп flashphoner.com по любым возникшим вопросам с платежами и продлением подписок.
