Remove 'play' symbol from video thumbnail generated by Google Photos API - google-api-js-client

Using the Google Photos API I would like to display the thumbnails associated with videos without the play icon overlaying the image.
This is what it looks like. How can I remove the white play arrow?
I know from the documentation that "to access the thumbnail of the video use any of the image base url parameters.":
https://developers.google.com/photos/library/guides/access-media-items
To get a list of files, I use the Google Javascript API gapi
gapi.client.request({
'path': 'https://photoslibrary.googleapis.com/v1/mediaItems:search',
'method': 'POST',
'body': { "filters": { "mediaTypeFilter": { "mediaTypes": ["VIDEO"] } } }
}).then(displayTheResults);
This gives me results like this:
{
"result": {
"mediaItems": [
{
"id": "iiiiiiiiiiiiii",
"productUrl": "https://photos.google.com/lr/photo/iiiiiiiiiiii",
"baseUrl": "https://lh3.googleusercontent.com/lr/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"mimeType": "video/mp4",
"mediaMetadata": {
"creationTime": "2021-02-24T11:23:26Z",
"width": "1920",
"height": "1080",
"video": {
"fps": 29.609994326070606,
"status": "READY"
}
},
"filename": "VID_1111111111.mp4"
}
....
]
},
"body": { .... },
"headers": { ... },
"status": 200,
"statusText": null
}
To generate the thumbnail my base-url becomes:
var videoThumbnail = baseUrl + "=w300-h200-c";
Is it possible to remove the big 'play' icon from the thumbnail?

Related

Adaptive Card rendered as image on FB shows "Title" text/element

I understand that adaptive cards are down-rendered as image on channels that does not support them. I just want to know how to either remove or set the "Title" element as shown on the fb channel:
The AdaptiveCard.Title element is deprecated and I did try setting that, it did not have any effect.
Here is my sample json:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"id": "Title",
"horizontalAlignment": "Center",
"size": "Large",
"weight": "Bolder",
"text": "See results on our website!"
},
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "mylogo.png",
"size": "Stretch"
},
{
"type": "TextBlock",
"id": "Subtitle",
"horizontalAlignment": "Center",
"size": "ExtraLarge",
"text": "This channel does not allow us to display your results. Click the button to view it on our website.",
"wrap": true
}
],
"actions": [
{
"type": "Action.OpenUrl",
"id": "OpenUrl",
"title": "Take me there!"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Unfortunately, when the BotFramewrok renders the card into an image for Facebook Messenger it adds the title above the actions which is strange. The only way to get rid of it is to remove the action from the card, which defeats its purpose in this case. An alternative is to send a Facebook Button Template in the activity's channel data instead of the adaptive card when the user is on Facebook Messenger. For more details checkout the Facebook Documentation on Button Templates and the code snippet below.
Screenshot
Bot Code - Node
async onTurn(turnContext) {
if (turnContext.activity.type === ActivityTypes.Message) {
if (turnContext.activity.channelId === 'facebook') {
await turnContext.sendActivity({
channelData: {
"attachment": {
"type": "template",
"payload": {
"template_type":"button",
"text":"This channel does not allow us to display your results. Click the button to view it on our website.",
"buttons":[{
"type":"web_url",
"url":"https://www.microsoft.com",
"title":"Take me there!"
}]
}
}
}
});
} else {
await turnContext.sendActivity({
attachments: [this.createAdaptiveCard()],
});
}
}
}
Hope this helps!
I had the same problem but I find an alternative using HeroCard.
If you are developing it with C# there it goes the code:
// first of all check if it is Facebook channel
// note that Channels is from Microsoft.Bot.Connector, the old one is deprecated.
if (turnContext.Activity.ChannelId == Channels.Facebook)
{
Activity replyToConversation = _flowService.ConvertMarkdownUrlToFacebookUrl(turnContext.Activity, response.Answer);
await turnContext.SendActivityAsync(replyToConversation, cancellationToken: cancellationToken);
}
public Activity ConvertMarkdownUrlToFacebookUrl(Activity message, string queryResponse)
{
var buttons = getButtons(queryResponse, out string result);
Activity replyToConversation = message.CreateReply();
replyToConversation.Attachments = new List<Attachment>();
List<CardAction> actions = new List<CardAction>();
foreach (var button in buttons)
{
actions.Add(new CardAction()
{
Title = button.Key, // text hyperlink
Type = ActionTypes.OpenUrl,
Value = button.Value // url
});
}
Attachment attachment = new HeroCard
{
Text = result, // your text
Buttons = actions
}.ToAttachment();
replyToConversation.Attachments.Add(attachment);
return replyToConversation;
}
You'll obtain something like this:
(sorry I had to delete the text)
Maybe it's not perfect (my first time with cards and attachments) but I hope that this will help someone 🙂

Missing elements for a Google Cloud Video Annotation request

I am trying to run annotation on a video using the Google Cloud Video Intelligence API. Annotation requests with just one feature request (i.e., one of "LABEL_DETECTION", "SHOT_CHANGE_DETECTION" or "EXPLICIT_CONTENT_DETECTION"), things work fine. However, when I request an annotation with two or more features at the same time, the response does not always return all the request feature fields. For example, here is a request I ran recently using the API explorer:
{
"features": [
"EXPLICIT_CONTENT_DETECTION",
"LABEL_DETECTION",
"SHOT_CHANGE_DETECTION"
],
"inputUri": "gs://gccl_dd_01/Video1"
}
The operation Id I got back is this: "us-east1.11264560501473964275". When I run a GET with this Id, I have the following response:
200
{
"name": "us-east1.11264560501473964275",
"metadata": {
"#type": "type.googleapis.com/google.cloud.videointelligence.v1.AnnotateVideoProgress",
"annotationProgress": [
{
"inputUri": "/gccl_dd_01/Video1",
"progressPercent": 100,
"startTime": "2018-08-06T17:13:58.129978Z",
"updateTime": "2018-08-06T17:18:01.274877Z"
},
{
"inputUri": "/gccl_dd_01/Video1",
"progressPercent": 100,
"startTime": "2018-08-06T17:13:58.129978Z",
"updateTime": "2018-08-06T17:14:39.074505Z"
},
{
"inputUri": "/gccl_dd_01/Video1",
"progressPercent": 100,
"startTime": "2018-08-06T17:13:58.129978Z",
"updateTime": "2018-08-06T17:16:23.230536Z"
}
]
},
"done": true,
"response": {
"#type": "type.googleapis.com/google.cloud.videointelligence.v1.AnnotateVideoResponse",
"annotationResults": [
{
"inputUri": "/gccl_dd_01/Video1",
"segmentLabelAnnotations": [
...
],
"shotLabelAnnotations": [
...
],
"shotAnnotations": [
...
]
}
]
}
}
The done parameter for the response is set to true, but it does not have any field containing the annotations for Explicit Content.
This issue seems to be occurring at random to my novice eyes. The APIs will return a response with all parameters on some occasions and be missing one on others. I am wondering if there is anything I am missing here or something on my end that is causing this?
I did some tests using just LABEL_DETECTION, just EXPLICIT_CONTENT_DETECTION and using the three of them.
As I am not using videos with explicit content, I don't see any specific field when adding just EXPLICIT_CONTENT_DETECTION:
{
"name": "europe-west1.462458490043912485",
"metadata": {
"#type": "type.googleapis.com/google.cloud.videointelligence.v1.AnnotateVideoProgress",
"annotationProgress": [
{
"inputUri": "/cloud-ml-sandbox/video/chicago.mp4",
"startTime": "2018-08-07T14:18:40.086713Z",
"updateTime": "2018-08-07T14:18:40.230351Z"
}
]
}
}
Can you share a specific video sample, the request.json used and two different outputs, please?

Microsoft Botframework encode image bytes into message cards

I am using the Bot framework to create a chat bot. And I want to create message card (Hero or Thumbnail).
If you look at the skype bot api doc, there is a way to encode image bytes directly as the content url. https://docs.botframework.com/en-us/skype/chat/
"type": "message/image",
"attachments": [
{
"contentUrl": "<base64 encoded image>",
"thumbnailUrl": "<base64 encoded thumbnail>", // optional
"filename": "bear.jpg" // optional
}
]
This works fine for showing an image only. But I want the image to be part of a card.
The card is
{
"type":"message/card.carousel",
"attachments":[
{
"contentType":"application/vnd.microsoft.card.hero",
"content":{
"images":[
{
"image":"https://foo.com/path/image.jpg",
}
I have tried to set the image url property to the encoded bytes, but the client can't show it. What's the best way to achieve this?
You've got the basic idea. Use this instead:
"attachments": [
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"title": "Title",
"subtitle": "SubTitle",
"text": "Text",
"images": [
{
"url": "image/jpeg;base64,{YOUR IMAGE}",
"alt": "Alt Image Description"
}
]
}
}
],

Google Chromecast: Unable to cast video/mp4 with captions from iOS getting Load metadata error

I am building an iOS app to cast video content from DLNA/UPnP media server to Chromecast. The problem appears when I add media track data for the captions. The following works:
### Media Manager - LOAD: {
"type":"load",
"I":false,
"defaultPrevented":false,
"kb":true,
"data":
{
"currentTime":0,
"requestId":3,
"autoplay":true,
"media":
{
"metadata":
{
"title":"movie.mp4",
"subtitle":"Unknown",
"images":
[{
"url":"http://192.168.1.15:8895/resource/625/COVER_IMAGE",
"width":200,
"height":100
}],
"metadataType":0
},
"textTrackStyle":
{
"windowRoundedCornerRadius":8,
"windowType":"ROUNDED_CORNERS",
"foregroundColor":"#FFFFFFFF",
"fontFamily":"Helvetica",
"fontGenericFamily":"SANS_SERIF",
"fontStyle":"BOLD",
"fontScale":1,
"windowColor":"#000000FF",
"backgroundColor":"#000000FF"
},
"contentId":"http://192.168.1.15:8895/resource/338/MEDIA_ITEM/AVC_MP4_MP_SD_AAC_MULT5-0/ORIGINAL",
"contentType":"video/mp4",
"streamType":"NONE",
"duration":0
}
},
"senderId":"33:3EA56D16-D18E-4D13-87A0-717DC188F8AF"}
but when I add captions either my own or for instance from CastVideos sample app (so to make sure it is CORS enabled), it won't work with:
### Media Manager - LOAD: {
"type":"load",
"I":false,
"defaultPrevented":false,
"kb":true,
"data":
{
"currentTime":0,
"requestId":4,
"autoplay":true,
"media":
{
"tracks":
[{
"trackId":1,
"trackContentId":"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/GoogleIO-2014-CastingToTheFuture2-en.vtt",
"language":"en-US",
"subtype":"CAPTIONS",
"type":"TEXT",
"trackContentType":"text/vtt",
"name":"English Subtitle"
}],
"contentId":"http://192.168.1.15:8895/resource/338/MEDIA_ITEM/AVC_MP4_MP_SD_AAC_MULT5-0/ORIGINAL",
"streamType":"NONE",
"contentType":"video/mp4",
"duration":0,
"metadata":
{
"title":"movie.mp4",
"subtitle":"Unknown",
"images":
[{
"url":"http://192.168.1.15:8895/resource/625/COVER_IMAGE",
"width":200,
"height":100
}],
"metadataType":0
},
"textTrackStyle":
{
"windowRoundedCornerRadius":8,
"windowType":"ROUNDED_CORNERS",
"foregroundColor":"#FFFFFFFF",
"fontFamily":"Helvetica",
"fontGenericFamily":
"SANS_SERIF",
"fontStyle":"BOLD",
"fontScale":1,
"windowColor":
"#000000FF",
"backgroundColor":"#000000FF"
}
}
},
"senderId":"11:9D7D43C2-CD85-4143-82AA-2D0056AA62FC" }
I get:
[cast.receiver.MediaManager] Load metadata error cast_receiver.js:18
However the Sample app works with captions in my custom receiver without any problems and I don't find much of a difference (except for the video/image http URL, I'm just getting warnings for those):
### Media Manager - LOAD: {
"type":"load",
"I":false,
"defaultPrevented":false,
"kb":true,
"data":
{
"currentTime":0,
"requestId":3,
"autoplay":true,
"media":
{
"tracks":
[{
"trackId":1,
"trackContentId":"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/DesigningForGoogleCast-en.vtt",
"language":"en-US",
"subtype":"CAPTIONS",
"type":"TEXT",
"trackContentType":"text/vtt",
"name":"English Subtitle"
}],
"contentId":"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/DesigningForGoogleCast.mp4",
"streamType":"NONE",
"contentType":"video/mp4",
"duration":0,
"metadata":
{
"title":"Designing For Google Cast",
"subtitle":"Google IO - 2014",
"images":
[{
"url":"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images_480x270/DesigningForGoogleCast2-480x270.jpg",
"width":200,
"height":100
}],
"metadataType":0
},
"textTrackStyle":
{
"windowRoundedCornerRadius":8,
"windowType":"ROUNDED_CORNERS",
"foregroundColor":"#FFFFFFFF",
"fontFamily":"Helvetica",
"fontGenericFamily":"SANS_SERIF",
"fontStyle":"BOLD",
"fontScale":1,
"windowColor":"#000000FF",
"backgroundColor":"#000000FF"
}
}
},
"senderId":"46:F162E34A-1A6D-4C0C-A0A3-DB584C92CDF5" }
any idea?
thanks in advance.
When using captions with Chromecast, CORS is required not only for the captions but for the video stream as well. In my case the video HTTP server (e.g. Serviio) doesn't support it.

inline video Integration issue in openx and flowplayer

I am using following jquery live click to display ad from my openx server.
$('.vbox > li > img').live('click',function(){
var videourl = "http://www.indiantripadviser.com/img/video/"+$(this).data('videourl');
var videodur = parseInt($(this).data('duration'));
$('#vidHolder').show();
flowplayer("player", "dist/swf/flowplayer-3.2.7.swf", {
"playlist":[
{
"url": videourl,
"duration": videodur
}
],
"plugins": {
"ova": {
"url": "dist/swf/ova.swf",
"autoPlay": true,
"ads": {
"controls": {
"skipAd": {
"enabled": true,
"showAfterSeconds": 5,
"image": "global/images/skip.png",
"width": 100,
"height": 15
}
},
"servers": [
{
"type": "OpenX",
"apiAddress": "http://advert.visionimpact.co.in/www/delivery/fc.php"
}
],
"schedule": [
{
"zone": "8",
"position": "pre-roll"
}
],
"notice": { "type": "countdown" }
}
}
},
"canvas": {
"backgroundColor": '#F9F9F9'
}
});
});
Now my issue is, if I use the "apiAddress": "http://advert.indiantripadviser.com/www/delivery/fc.php" it works fine but when i change it to "apiAddress": "http://advert.**visionimpact.co.in**/www/delivery/fc.php" it stops delivering ads. I can't figure out where is the mistake, as I created, linked the zone and banner several times.
I am totally out!
Looks like a crossdomain issue. Have you allowed
http://advert.**visionimpact.co.in**
in your crossdomain xml file?
If you are serving your ads from a different domain name than the flash player, you need to install a crossdomain.xml file in the docroot on your openX ad server to allow flash to communicate to it.
Example crossdomain xml :
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>
Ref : http://code.google.com/p/openx-iab-vast/wiki/ExampleCrossdomainXML

Resources