Эта запись в блоге изначально опубликована на antmedia.io
Ant Media Server — это механизм потокового вещания со сверхнизкой задержкой. Вы можете установить его на свой собственный сервер или масштабировать в популярных провайдерах облачного хостинга, таких как AWS и DigitalOcean.
В этом посте мы покажем вам, как настроить собственную радиостанцию с помощью Ant Media Server, используя аудиопотоки WebRTC с помощью JavaScript SDK.
В этом посте предполагается, что вы уже установили Ant Media Server. Если нет, ознакомьтесь с документацией по установке здесь, чтобы установить медиасервер в Linux.
Как опубликовать аудиопоток WebRTC с помощью JavaScript SDK
Это шаги, чтобы начать.
1. Загрузите необходимые скрипты в шапку веб-страницы.
Ant Media Server поставляется с двумя приложениями по умолчанию. Каждое приложение имеет образцы страниц публикации и воспроизведения, а также содержит все необходимые файлы Javascript.
Если вы планируете размещать страницы публикации и воспроизведения на сервере, отличном от вашего экземпляра AMS, убедитесь, что вы используете правильный включенный путь для файлов Javascript.
Он должен иметь следующую структуру AMS_SERVER:PORT/APPLICATION_NAME/js/JS-FILE.js, например:
https://my-ant-media-server.com:5443/LiveApp/js/webrtc_adaptor.js
Теперь давайте загрузим необходимые файлы Javascript в раздел заголовка HTML-страницы:
<head> ... <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> <script src="https://ANT-MEDIA-SERVER:PORT:5443/APPLICATION/js/webrtc_adaptor.js" ></script> ... </head>
2. Создайте аудиоэлемент HTML
Теперь используйте элемент Audio HTML на своей веб-странице. Здесь будут настроены элементы управления звуком для запуска и остановки радиостанции.
<audio id="localVideo" autoplay controls muted></audio>
3. Инициализируйте объект WebRTCAdaptor Javascript
Адаптер WebRTC — это основной объект Javascript, который обеспечивает связь WebRTC между браузером и вашим Ant Media Server.
Он инициализирует и открывает соединение WebSocket, а также отправляет и получает все входящие/исходящие сообщения и данные.
Это блок кода:
var pc_config = null;
var sdpConstraints = {
OfferToReceiveAudio : false,
OfferToReceiveVideo : false
};
var mediaConstraints = {
video : false,
audio : true
};
var websocketURL = "ws://" + location.hostname + ":5080/WebRTCAppEE/websocket";
if (location.protocol.startsWith("https")) {
websocketURL = "wss://" + location.hostname + ":5443/WebRTCAppEE/websocket";
}
var webRTCAdaptor = new WebRTCAdaptor({
websocket_url : websocketURL,
mediaConstraints : mediaConstraints,
peerconnection_config : pc_config,
sdp_constraints : sdpConstraints,
localVideoId : "localVideo",
debug : true,
callback : function(info) {
if (info == "initialized") {
console.log("initialized");
start_publish_button.disabled = false;
stop_publish_button.disabled = true;
} else if (info == "publish_started") {
//stream is being published
console.log("publish started");
start_publish_button.disabled = true;
stop_publish_button.disabled = false;
startAnimation();
} else if (info == "publish_finished") {
//stream is finished
console.log("publish finished");
start_publish_button.disabled = false;
stop_publish_button.disabled = true;
}
else if(info == "closed"){
//console.log("Connection closed");
if (typeof description != "undefined") {
console.log("Connecton closed: " + JSON.stringify(description));
}
}
},
callbackError : function(error) {
//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
console.log("error callback: " + JSON.stringify(error));
var errorMessage = JSON.stringify(error);
if (typeof message != "undefined") {
errorMessage = message;
}
var errorMessage = JSON.stringify(error);
if (error.indexOf("NotFoundError") != -1) {
errorMessage = "Camera or Mic are not found or not allowed in your device";
}
else if (error.indexOf("NotReadableError") != -1 || error.indexOf("TrackStartError") != -1){
errorMessage = "Camera or Mic is being used by some other process that does not let read the devices";
}
else if(error.indexOf("OverconstrainedError") != -1 || error.indexOf("ConstraintNotSatisfiedError") != -1) {
errorMessage = "There is no device found that fits your video and audio constraints. You may change video and audio constraints"
}
else if (error.indexOf("NotAllowedError") != -1 || error.indexOf("PermissionDeniedError") != -1) {
errorMessage = "You are not allowed to access camera and mic.";
}
else if (error.indexOf("TypeError") != -1) {
errorMessage = "Video/Audio is required";
}
alert(errorMessage);
}
});
Как видите, адаптер WebRTC прослушивает несколько обратных вызовов. Это также ошибки, а также сообщения, сообщающие нам об успешном подключении.
4.Позвоните publish(streamName), чтобы начать публикацию
Чтобы опубликовать поток WebRTC на Ant Media Server, необходимо вызвать функцию publish(streamName) WebRTCAdaptor.
Как правило, вы хотите вызывать эту функцию при нажатии кнопки, но также можно подключить другие события, которые могут начать публикацию потока WebRTC. Например, вы можете захотеть, чтобы он автоматически запускался при загрузке страницы.
Вставьте следующий блок кода под элементом Audio. Это определяет функцию для начала публикации и HTML для создания кнопки.
function startPublishing() {
// Get streamId as parameter from a text box
streamId = streamNameBox.value;
webRTCAdaptor.publish("streamId");
}
<button onclick="startPublishing()" class="btn btn-info"
disabled id="start_publish_button">Start Publishing</button>
5.Позвоните stop(streamName), чтобы остановить публикацию
Если вы хотите остановить потоковую передачу, мы можем просто вызвать метод остановки из объекта адаптера WebRTC.
Добавьте этот блок кода на свою веб-страницу, чтобы создать кнопку остановки публикации.
function stopPublishing() {
webRTCAdaptor.stop(streamId)
}
<button onclick="stopPublishing()" class="btn btn-warning"
disabled id="stop_publish_button">Stop Publishing</button>
Вы можете сослаться на пример страницы публикации аудио, расположенной на Github в репозитории StreamApp с открытым исходным кодом
https://github.com/ant-media/StreamApp/blob/master/src/main/webapp/audio_publish.html
Здесь вы можете увидеть, как можно использовать JavaScript SDK для публикации аудиопотока, если вы чувствуете себя немного потерянным.
Как воспроизвести поток WebRTC только для аудио с помощью JavaScript SDK
Теперь, когда мы настроили публикацию аудиопотока, давайте настроим воспроизведение нашего аудиопотока для прослушивания радиостанции.
Вы можете использовать ту же страницу или создать новую страницу. Большая часть работы уже сделана.
Мы просто будем использовать объект адаптера WebRTC для вызова метода play.
По сути, эта страница может публиковать и воспроизводить аудиопотоки WebRTC, но если вы хотите создать отдельные страницы, вы можете просто скопировать страницу публикации.
4.Позвоните play(streamName), чтобы начать играть
Чтобы воспроизвести поток WebRTC с Ant Media Server, можно вызвать метод WebRTCAdaptor play(streamName).
Здесь мы будем использовать кнопку для запуска воспроизведения, но вы можете привязать вызов этого метода к любому событию, например, когда страница загружается, она автоматически запускает воспроизведение.
function startPlaying() {
// Get streamId as parameter from a text box
streamId = streamNameBox.value;
webRTCAdaptor.play(streamId);
}
<button onclick="startPlaying()" class="btn btn-info"
disabled id="start_play_button">Start Playing</button>
5. Позвоните stop(streamName), чтобы остановить воспроизведение
Вы можете остановить публикацию в любое время, вызвав метод остановки из WebRTCAdaptor.
function stopPlaying() {
webRTCAdaptor.stop(streamId)
}
Вы можете сослаться на пример страницы воспроизведения аудио, расположенной на Github в репозитории StreamApp с открытым исходным кодом.
https://github.com/ant-media/StreamApp/blob/master/src/main/webapp/audio_player.html
Заворачивать
Итак, у вас есть это! Теперь вы можете легко интегрировать свою собственную прямую радиостанцию WebRTC.
С помощью Ant Media Server вы также можете транслировать предварительно записанные треки в прямом эфире. Поэтому, если вы не хотите диджеить в режиме реального времени, просто загрузите несколько предварительно записанных звуковых дорожек и настройте их на прямую трансляцию.
Затем добавьте страницу воспроизведения аудио в свое приложение.
Эта запись в блоге изначально опубликована на antmedia.io
