I am building a bot service to communicate to various endpoints. I have Skype basic communication running through Microsoft Botbuilder in Nodejs. I can send text to the Skype client fine, however when I want to send rich messages with images (animated gifs) or videos, things start going haywire.
1) Sending a animated gif:
function createAnimationCard(session) {
return new builder.AnimationCard(session)
.title('Microsoft Bot Framework')
.subtitle('Animation Card')
.image(builder.CardImage.create(session, 'https://docs.botframework.com/en-us/images/faq-overview/botframework_overview_july.png'))
.media([
{ url: 'http://i.giphy.com/Ki55RUbOV5njy.gif' }
]);
}
I call this code from another function:
exports.sendGif = function sendGif(chatBotUserSession, picUrl, contentType) {
var card = createAnimationCard(chatBotUserSession);
var reply = new builder.Message(chatBotUserSession).addAttachment(card);
_bot.send(reply);
};
When I do this I get to see an image with a play button (in the desktop Skype, mobile client does not show image at all), however pressing the button shows an error "opening not possible". I have tried different gif sources in the url field, but none seem to work. Also tried https for source.
2) I then moved to trying to display a video:
function createVideoCard(session) {
return new builder.VideoCard(session)
.title('Big Buck Bunny')
.subtitle('by the Blender Institute')
.text('Big Buck Bunny (code-named Peach) is a short computer-animated comedy film by the Blender Institute, part of the Blender Foundation. Like the foundation\'s previous film Elephants Dream, the film was made using Blender, a free software application for animation made by the same foundation. It was released as an open-source film under Creative Commons License Attribution 3.0.')
.image(builder.CardImage.create(session, 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg'))
.media([
{ url: 'http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4' }
])
.buttons([
builder.CardAction.openUrl(session, 'https://peach.blender.org/', 'Learn More')
]);
}
When I call this using:
exports.sendMovie = function sendMovie(chatBotUserSession, picUrl, contentType) {
var card = createVideoCard(chatBotUserSession);
var reply = new builder.Message(chatBotUserSession).addAttachment(card);
_bot.send(reply);
};
It all works... at least on my desktop Skype. My mobile skype (iOS) now crashes each time when I open the chat with my bot...
So two questions:
1) Does anyone know why I can't seem to send animated gifs that actually play?
2) Anyone have experience with bots on mobile Skype sending rich content and consequently crashing the app?
Thanks.
Related
How can I play a specific Youtube Video on my Google Hub via Google Actions? I know I can use a Basic Card to display images and text and even a link (although that link does not show up on the HUB)
I specifically want to be able to trigger or to play a youtube video on my Google Hub.
Actions are not able to start playing video content. Media responses are only for audio.
I have a similar need. After a chat with an action on google, I want to play user requested youtube videos (chains-of) on a local "big screen" (TV-like / PC).
A workaround solution could be:
you realize an action that select one or more videos.
The action act also as a server for a client described here below
The action communicate (SSE, websocket, HTTP...) with a client browser page containing a javascript small program that dynamically visualize the video (id sent via SSE client-server communication)
Here below the rough js script (I'm not a web developer); that just gives you the idea:
<script language="javascript">
function loadVideoWithId(id) {
const tvEmbedMode = "embed/" //"tv#/watch?v="
const url = `https://www.youtube.com/embed/${id}?fs=1&autoplay=1&loop=1` //
const iframe = `<iframe src="${url}" width="1600" height="900" allowFullScreen="allowFullScreen" frameBorder="0" />`
document.write(iframe)
}
loadVideoWithId('hHW1oY26kxQ')
</script>
I've created Bot using Microsoft's bot services ( Bot framework) using nodeJs.
Its working fine when for plain text, but when i tried to return HTML table using below method
eg.
var tableHTML = '<table style="padding:20px;border:1px solid black; border-collapse: collapse;" border=1 border-collapse=collapse><tr style="background-color:#c6c6c6"><th>Countries</th><th>Capitals</th><th>Population</th><th>Language</th></tr><tr><td>USA</td><td> Washington D.C.</td><td>309 million</td><td>English</td></tr><tr><td>Sweden</td><td>Stockholm</td><td>9 million</td><td>Swedish</td></tr></table>';
var message = {
type: 'message',
textFormat: 'xml',
text: tableHTML
};
session.send(message);
It worked for me on skype for business desktop APP , but not working on skype for business mobile APP ( it returns nothing )
Currently i'm facing issue while rending HTML table for mobile devices on skype for business
Skype for business mobile app supports HTML in bot ??
Please provide if anyone have solution for this
Thanks
Skype for business mobile clients do not support HTML or markdown formats. This is a pain point for many customers I encourage you to reach out to them via their uservoice and request this feature.
Format rendering will be channel-specific and you need to determine what formats a channel supports ahead of time.
I'm developing a chatbot on azure using node.js. It's a data visualization bot which generates chart in html format using d3 library and display to user.
It seems that Microsoft bot builder doesn't support html format. But I have looked through this link:
https://blog.botframework.com/2017/09/07/html-not-supported-web-chat/
It says that there is a way to enable html content:
"If HTML rendering in Web Chat is a critical feature for your applications, you can clone or fork a copy of the Web Chat source code from GitHub, and enable it (on your own custom Web Chat client)."
I tried to clone the file and changed ‘html : false’ to ‘html : true’. But it's not working.
Can anyone tell me what I can do? Really appreciate it!!!
Depending on what data you are attempting to visualize, you might be able to use a service like Google Image Charts: https://developers.google.com/chart/image/docs/chart_playground
Using this service, with the following code:
// attach the card to the reply message
var msg = new builder.Message(session).addAttachment(createHeroCard(session));
session.send(msg);
function createHeroCard(session) {
return new builder.HeroCard(session)
.title('Months with Numbers Bar Chart')
.subtitle('Using a Chart as Image service...')
.text('Build and connect intelligent bots that have charts rendered as images.')
.images([
builder.CardImage.create(session, 'http://chart.googleapis.com/chart?cht=bvg&chs=250x150&chd=s:Monkeys&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul')
])
.buttons([
builder.CardAction.openUrl(session, 'https://learn.microsoft.com/bot-framework/', 'Get Started')
]);
}
Produces this hero card:
My goal is to show a youtube video (preferably in card form) in telegram, while keeping my code as 'channel-agnostic' as possible by using the botbuilder module.
Can anyone tell me why Telegram shows the videocard as a plain image using this NodeJS example taken from the official sample repo (createVideoCard() example)? (same behaviour for youtube links).
var builder = require('botbuilder');
function (session, results, next) {
const msg = new builder.Message(session)
.addAttachment(new builder.VideoCard(session)
.title('Big Buck Bunny')
.subtitle('by the Blender Institute')
.text('Big Buck Bunny (code-named Peach) is a short computer-animated comedy film by the Blender Institute, part of the Blender Foundation. Like the foundation\'s previous film Elephants Dream, the film was made using Blender, a free software application for animation made by the same foundation. It was released as an open-source film under Creative Commons License Attribution 3.0.')
.image(builder.CardImage.create(session, 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg'))
.media([{ url: 'http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4' }])
.buttons([builder.CardAction.openUrl(session, 'https://peach.blender.org/', 'Learn More')]);
session.send(msg);
}
While, using:
session.send('youtube link');
is recognised by Telegram and rendered as youtube video.
I have read the following on richcard support:
The Animation card, Video card and Audio card used in this sample are
fully supported in the following channels:
Skype Facebook WebChat
They are also supported, with some limitations,
in the following channel:
Slack (Only Animation card is supported)
GroupMe Telegram (Only
Animation and Audio cards are supported) Email
How can I best achieve my goal?
I am developing a Bot using Microsoft Bot Framework, In that bot will respond with sending some images to the user. I configured it with slack and skype.
In slack Images are displaying but in Skype nothing coming.
To send pictures I used the following syntax
var replyMessage = "![ImgName](" + ImagesUrl + ")";
return message.CreateReplyMessage(replyMessage);
Reference dev.botfrmaework.com, The Text property is Markdown section clearly mention how to link an image to reply message.
If I reply with just link like below, skype able to understand and displaying links. But If I mention like above skype not able to understand.
var replyMessage = "[ImgName](" + ImagesUrl + ")";
return message.CreateReplyMessage(replyMessage);
Each channel has it's own peculiarities. Slack happens to be able to process images sent in-line as you've shown above. However, this will not work generically across all channels. To send images generically, add them as attachments:
replyMessage.Attachments.Add(new Attachment()
{
ContentUrl = "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png",
ContentType = "image/png"
});
Every channel has it's own issues when it comes to images and links.
For instance, the way you send links won't work on FB. it will simply show the links and text.
The same way, the only way to render images in skype as of now is to send it as an attachment and explicitly specify the image format.
Please look this link to see how each platform will react to the markdowns.
And also, for your purpose, I feel adaptive cards will work out more.
Try it out and let me know your comments.