аудиоплеер | Community Creatio

Вопрос

26 октября 2017 13:44

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

Нравится

2 комментария

Чурсин Александр Сергеевич

31 октября 2017 10:58

Пока нашел следующее решение, но если кто то знает более лучший способ, буду рад, если вы поделитесь!

Создаем замещающую схему CallPageV2 и добавляем туда в diff:

{
    "operation": "insert",
    "parentName": "GeneralInfoTabGroup74451b35",
    "name": "AudioPlayer",
    "propertyName": "items",
    "values": {
        "itemType": Terrasoft.ViewItemType.CONTAINER,
        "generator": function() {
            return {
                "selectors": {
                    "wrapEl": "#AudioPlayer",
                    "iframeEl": "id_AudioPlayer"
                },
                "className": "Terrasoft.HtmlControl",
                "html": "&lt;audio style=\"display:none;\" controls=\"controls\"&gt;&lt;source " +
                "src=\"\" type=\"audio/ogg\" /&gt;&lt;/audio&gt;"
            };
        },
        "layout": {
            "colSpan": 12,
            "rowSpan": 1,
            "column": 0,
            "row": 0
        }
    }
}

(parentName замените на свой)

И в методы:

"generateAudioPlayer": function(audioUrl) {
    if (audioUrl.length &gt;= 12) {
        var audioSource = document.querySelector("Source");
        if (audioSource) {
            audioSource.src = audioUrl;
            var audioBlock = document.querySelector("audio");
            audioBlock.style = "style=\"display:hidden;\"";
        }
    }
}

Далее вызываем новый метод из инициализации карточки, передавая ему ссылку на наше аудио:

"onEntityInitialized": function() {
    this.callParent(arguments);
 
    var callAudioUrl = this.get("UsrAudio");
    this.generateAudioPlayer(callAudioUrl);
}

Ответить

Терещук Сергей

10 ноября 2017 16:50

Добрый день, в вашем случае вы напрямую используете тэг audio из HTML. Также рекомендую вам посмотреть в сторону использования компонента Terrasoft.AudioPlayer. Пример использования можно увидеть в схеме CallSectionV2:

{
   "operation": "insert",
   "name": "AudioPlayer",
   "parentName": "DataGrid",
   "propertyName": "activeRowActions",
   "index": 1,
   "values": {
      "className": "Terrasoft.AudioPlayer",
      "selectors": {"wrapEl": "#AudioPlayer"},
      "sourceId": {"bindTo": "getSourceId"},
      "sourceUrl": {"bindTo": "SourceUrl"},
      "playbackended": {"bindTo": "onPlaybackEnded"},
      "error": {"bindTo": "onPlayError"}
   }
},

Также часть логики расположена в схеме CallSectionGridRowViewModel.

Ответить

Показать все комментарии

Вопрос

Головачев Дмитрий Александрович

19 января 2017 13:57

Добрый день, как добавить аудиоплеер на страницу для прослушивания записей звонков из bpm . bpm 7.7

Нравится

4 комментария

Александр Зубков

19 января 2017 14:17

Здравствуйте.
Возможность прослушивать записи звонков зависит от используемой интеграции. Поддерживается в Oktell и Webitel. Плеер там уже присутствует. Подробнее описано здесь: https://academy.terrasoft.ru/documents/sales-team/7-9/zapis-i-proslushi…

Ответить

Варфоломеев Данила

19 января 2017 15:45

Попробуйте:

var element = document.createElement("audio");
element.addEventListener("click", function(e) { e.stopPropagation(); }, false);
element.autoplay = true;
element.controls = true;
element.src = /**сюда url ссылку на сурс(пр.: запись звонка в wav формате)**/;
element.style.marginLeft = "5px";
element.type = "audio/mpeg";
var actionsDiv = Ext.get("AudioContainer").dom;
var lastChild = actionsDiv.children[actionsDiv.childElementCount - 1];
if (lastChild) {
	actionsDiv.removeChild(lastChild);
}
actionsDiv.appendChild(element);

контейнер для элемента

{
	"name": "AudioContainer",
	"operation": "insert",
	"parentName": "Detail",
	"propertyName": "tools",
	"index": 2,
	"values": {
		"id": "AudioContainer",
		"items": [],
		"itemType": Terrasoft.ViewItemType.CONTAINER
	}
}

Ответить

Головачев Дмитрий Александрович

20 января 2017 10:25

"Варфоломеев Данила" написал:

Попробуйте:

var element = document.createElement("audio");

element.addEventListener("click", function(e) { e.stopPropagation(); }, false);

element.autoplay = true;

element.controls = true;

element.src = /**сюда url ссылку на сурс(пр.: запись звонка в wav формате)**/;

element.style.marginLeft = "5px";

element.type = "audio/mpeg";

var actionsDiv = Ext.get("AudioContainer").dom;

var lastChild = actionsDiv.children[actionsDiv.childElementCount - 1];

if (lastChild) {

actionsDiv.removeChild(lastChild);

}

actionsDiv.appendChild(element);

контейнер для элемента

{

"name": "AudioContainer",

"operation": "insert",

"parentName": "Detail",

"propertyName": "tools",

"index": 2,

"values": {

"id": "AudioContainer",

"items": [],

"itemType": Terrasoft.ViewItemType.CONTAINER

}

}

Данил не могли бы Вы выслать полный код

Ответить

Головачев Дмитрий Александрович

20 января 2017 10:25

"Варфоломеев Данила" написал:

Попробуйте:

var element = document.createElement("audio");

element.addEventListener("click", function(e) { e.stopPropagation(); }, false);

element.autoplay = true;

element.controls = true;

element.src = /**сюда url ссылку на сурс(пр.: запись звонка в wav формате)**/;

element.style.marginLeft = "5px";

element.type = "audio/mpeg";

var actionsDiv = Ext.get("AudioContainer").dom;

var lastChild = actionsDiv.children[actionsDiv.childElementCount - 1];

if (lastChild) {

actionsDiv.removeChild(lastChild);

}

actionsDiv.appendChild(element);

контейнер для элемента

{

"name": "AudioContainer",

"operation": "insert",

"parentName": "Detail",

"propertyName": "tools",

"index": 2,

"values": {

"id": "AudioContainer",

"items": [],

"itemType": Terrasoft.ViewItemType.CONTAINER

}

}

Данил не могли бы Вы выслать полный код

Ответить

Показать все комментарии

Вопрос

11 октября 2016 16:55

Всем доброго времени суток!

Возникла необходимость добавить на страницу элемент аудиоплеера (если точнее - запись звонка и возможность её прослушать). В процессе поисков был найден модуль AudioPlayer, который судя по всему, и является нужным плеером.

Существует ли какой-нибудь мануал по работе с ним, или быть может, можно посмотреть где-нибудь рабочий пример?

Версия 7.8 sales.

Нравится

10 комментариев

Мотков Илья

11 октября 2016 17:08

Как вариант

Подобная функциональность уже есть в OktellCtiProvider и WebitelCtiProvider.
Что нужно сделать:
1. Создать свой cti-провайдер - наследний MsgServiceCtiProvider. Например, AsteriskCtiProvider. Прописать этот провайдер в таблице SysMsgLib для Asterisk;
2. В методе getCapabilities провайдера вернуть для agentCapabilities фичу Terrasoft.AgentFeaturesSet.CAN_GET_CALL_RECORDS;
3. Реализовать метод получения записей звонка по идентификатору в методе queryCallRecords провайдера.

Прослушивание в коробке не все АТС могут - https://academy.terrasoft.ru/documents/sales-enterprise/7-8/sravnenie-v…

Ответить

Смородинов Денис

11 октября 2016 22:04

Илья, здравствуйте!

Работа с АТС - в процессе, но ей занимаюсь немного не я.. меня интересует именно клиентская реализация проигрывателя.

Условно - есть аудиофайл (не обязательно звонок, для примера), нужно отобразить его в виде проигрывателя, скорее всего через тег

<audio>

Есть контрол AudioPlayer, судя по всему, входящий в пакет CTI Base. Как его подключить на страницу?

Ответить

Мотков Илья

12 октября 2016 11:58

Здравствуйте, Денис!

Примеры реализации, которые используются например при интеграции с Oktell есть в пакете CTIBase, в частности схемы AudioPlayer и CallRecordUtilities.

Ответить

Смородинов Денис

13 октября 2016 00:38

"Мотков Илья" написал:в пакете CTIBase, в частности схемы AudioPlayer

Спасибо, с выводом на страницу разобрались. В итоге сделали на основе той схемы свой контрол, добавляющий соответствующий аудио-элемент.

В объекте страницы (entitySchemaName) по сути есть колонка со строкой-ссылкой на аудиофайл, которая подставляется в нужное место внутрь тега.

Но есть ещё одна задача, возможно, не совсем в рамках вопроса - нужно тот же элемент отобразить на странице с реестром. Возможно где-то были примеры добавления элементов не на страницу, а в список (см. скриншот)?

Ответить

Мотков Илья

13 октября 2016 15:05

Денис, в базовой функцитональности мы тоже выводим плеер в реестр. Скриншоты прикрепил. Реализация есть в CallSectionV2 также в пакете CTIBase.

Ответить

Смородинов Денис

13 октября 2016 23:14

Илья, спасибо, всё добавили.

Ответить

Сухацький Роман Вікторович

28 апреля 2017 09:18

Добрый день! Можете скинуть пример реализации плеера на странице?

Ответить

Мотков Илья

28 апреля 2017 12:45

Добрый день, Роман!

Примеры реализации Вы можете посмотреть в конфигурации bpm'online в пакете CTIBase в следующих схемах:
CallSectionV2.js - тут Вам необходимы методы getPlayer: function(), getSourceId: function(), requestCallRecords: function(autoStartPlay)
AudioPlayer.js - схема реализации аудиоплеера
allSectionGridRowViewModel - класс модели представления строки реестра звонков

Ответить

Чурсин Александр Сергеевич

25 октября 2017 17:32

Мотков Илья,

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

AudioPlayer но в ответ получаю лишь 'AudioPlayer' is not defined.

Ответить

Чурсин Александр Сергеевич

25 октября 2017 17:44

Мотков Илья,

Здравствуйте, подскажите пожалуйста, возможно ли реализовать прослушивание аудио не в разделе, а в карточке звонков? И если да, то как именно. Пробовал подключить

AudioPlayer, но получаю подобную ошибку "'AudioPlayer' is not defined.", хотя модуль же есть в системе.

Ответить

Показать все комментарии

Подписаться на аудиоплеер