I am using the upload image widget without success.
1) result.info.path returns invalid url.
2) There is no preview of the uploaded images due to no.1
3) No images are were uploaded to my media folder at Cloudinary.
Fiddle:
https://jsfiddle.net/7uqb83t1/
These are my preset settings:
Can someone share a working version of this widget + preset settings?
On successful upload, you need to check result.info.secure_url for a link to the asset. Currently, in your preset, you're using Async which means the incoming transformation is performed in the background (asynchronously), and as such, you will get a pending result. Async assumes you're using a Notification URL as a webhook where you'll receive the Upload API response when the processing is complete. In your case, I'd recommend turning the Async off.
Also, your incoming transformation configured in the preset is not valid and because of that, you will be getting an error on upload. Please console.log this in your JSFiddle to see it. Essentially, it'll be -
Auto gravity can only be used with crop, fill, lfill, fill_pad or
thumb
'auto' gravity (g_auto) implies cropping (automatically selecting the most interesting part of the image to focus on) and therefore you need to use an appropriate crop mode. 'scale' keeps all image data and no cropping is made so that is why g_auto can't work with it. Please see the following section of the documentation for details on the different crop modes - https://cloudinary.com/documentation/image_transformation_reference#crop_parameter - which will help you decide which one you want to use.
Lastly, you should also consider updating your incoming transformation so that it only resizes once, since currently, resizing it three times with the same crop mode is redundant. For example, you can use c_scale,q_auto,w_687 only, or if you want with 'auto' gravity you can try c_fill,g_auto,q_auto,w_687.
Related
There is any possibility to upload a file with different sizes in DropzoneJs?
I'm using vue-dropzone which is made with dropzonejs and i have to upload the same file with different sizing for srcset.
Example:
I want to upload the file test.png which is 1000x500 px. There is any possibility to upload it at the same time in original resolution and also in 500x250px?
Image resizing in the browser has been a seat-of-the pants experience for a long time. Web assemblies are the way of the future for processing-intensive tasks in web apps. I came across this project the other day. It looks fantastic and I really can't wait to strip out our home-baked image resizing with canvas and replace it with this.
The usual reason for doing this is to avoid large uploads. It's a little bit weird to want to resize in the browser then upload the original. You might be better resizing on the server. You'll save bandwidth and the server libraries will be more mature than what's available on the client.
Along with the original image object you can add one more your custom resized image to the array of images by using resize config of dropzone. You can do the above on drop event or adddedFile event of dropzone.
Our aim is to show portait video (vertical orientation in terms of TokBox) without black areas right and leftside after archiving. Now it looks like landscape with black areas on right and left side.
We are using php server and android client for streaming.
Our steps to convert live stream in video on demand through archieving are:
start session
update stream with the parameter layoutClassList = verticalPresentation (php library)
start archieving
live stream is on -> create subsriber and watch the stream. IMPORTANT! The stream has no black areas and has CORRECT presentation on subsriber side!
stop archieving
waiting TokBox upload archieving file to Amazon s3 bucket -> the file ALREADY contains black areas right-leftside. WRONG! (please watch the video on link for better understanding https://s3-us-west-1.amazonaws.com/edtv-dev1-input/46176492/9f26ef23-aee6-42f2-8c51-d8e2685abcc9/archive.mp4 )
processing the file
Are thereabove the correct steps to achieve the goal - get video file without black areas (in portrait orientation)? Are we missing anything?
Is archieving process on TokBox sensitive to horizontal/vertical presentation? is it possible to archive the video in vertical orientation?
UPDATE: What we wanted was not composed, but INDIVIDUAL stream! TokBox creates zip file, but Amazon AWS was able to transcode it and get the correct result both in portrait and landscape orientations.
NOTE: As a default result file on Amazon AWS after Individual stream archiving is *.zip (json + video file in it). The trascoder we used gave us video without sound. So we added lambda that unzipped the file. Now everything is ok, but took a lot of time and headache.
Tokbox developer here
For composed archiving, the only two options currently available for output resolution are 640x480 and 1280x720. Trying to fit a portrait video into a canvas of the available resolutions will result in the video you are seeing.
Possible solutions:
Use the custom layout control [1]: you can override the "object-fit" property to "cover". This may not result in exactly what you want, since the output resolution will still be 640x480 or 1280x720, but the video will occupy the whole canvas, at the expense of cropping the top and bottom part. See [2]
The best solution in my opinion is to use "individual stream archiving", where the resolution will be kept as the original, and you get a file per stream. Please check [3]
https://tokbox.com/developer/guides/archiving/layout-control.html
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://tokbox.com/developer/rest/#start_archive
How can we get URL within the zip created by opentok which was uploaded in s3
I'm evaluating Fine Uploader compared to various other options, specifically JQuery File Upload.
I generally prefer the Fine Uploader approach as it's more lightweight, compared to JQuery File Uploader which has dependencies on Bootstrap and JQuery UI.
However it's important to be able to resize images: e.g., a user may select a large file from their camera and this may be very large - uploading the full resolution photo may take a very long time. JQuery File Upload doe this.
Additionally we don't have much use for very high resolution files.
If possible (I'm aware some browsers may not support this), I'd like to be able to resize images client size.
Is this possible?
Fine Uploader does not currently have any native support for image manipulation. This is a feature in our backlog, but we have not had many users tell us they are interested in this. This is one of the reasons why such a feature has yet to be implemented natively. There is a case, #707 that marks the start of native image-editing support for Fine Uploader. It is tentatively scheduled for 4.0.
However, you can certainly make use of FileReader and Canvas to resize the image. You can then submit this resized image as a Blob to Fine Uploader via the addFiles API method. At that point, the file has been submitted and Fine Uploader is ready to upload the item.
Essentially, the steps you would follow to handle this specific scenario, before Fine Uploader natively supports image manipulation:
Provide your own file input element(s) or make use of Fine Uploader's file/folder drag and drop support to get a handle on some files selected by the user.
Use FileReader to read the contents of the image.
FileReader will provide you with a URL for the image, assign that to the src attribute of an img element.
Draw the img onto a canvas element. This is where the resizing occurs.
Grab the URL of the resized image from the canvas element (canvas.toDataURL(...)).
Convert the URL to a Blob.
Pass the Blob to the addFiles API method of Fine Uploader.
The intent is to take care of most if not all of this for integrators such as yourself in the future by adding native image manipulation support to Fine Uploader.
Hope this helps.
Is it possible to capture a snapshot of a video that's loaded using the HTML5 video element and use that as a preview image until the video loads or the play event is triggered? I know about the poster attribute but I want the thumbnail to be self generated, like a random frame from the video. Sort of what YouTube/Vimeo does.
Thanks,
I don't think that this is possible in pure HTML5. Principally because the stream is not loaded when you see the 'object' in the webpage so the client can't get the desired frame.
However, the best option for you is to save / cache the 'random frame' before loading the page and then use it as the poster of the video. This will allow you to reduce the client work and save the bandwith.
check THIS, which is the first thing that I've found (if you're using PHP and you want a 'quick and dirty' way to get the frame)
Update
Apparently HERE there is a solution with popcorn.js BUT it seems that you can't do it in the way that (I suppose) you need.
This because it would be possible to do this only inside the same domain due to browser security issues.
I’m using the BuddyPress Activity Plus plugin and wanted to know if there was a way to call the full size image that was uploaded when viewing the single page of the activity?
I’ve looked at placing a line of code in “activity/entry.php” of the child theme but can’t find anything that will call its full size image, only the thumbnail shows with the link to the full size image to open in a lightbox.
This isn’t what I’m looking for, the full size image needs to be in place of the thumbnail when viewing the single activity page.
Any idea anyone? Sorry if this is the right place for this, just having trouble getting an answer
Many thanks
I'm looking to do a similar thing, not too much luck yet. Also - have you noticed that if you upload multiple images, they stack, rather then laying out side by side?
EDIT:
Found out how to make the images in the stream bigger:
You can set your preferred thumbnail size separately from your default thumbnail size settings, if you wish to do so. You can do that by adding this line to your wp-config.php:
define('BPFB_THUMBNAIL_IMAGE_SIZE', '200x200');
Where "200x200" are width and height (in that order), in pixels.
Finally, be sure to verify your default sizes for embedded media. It's in Settings -> Media -> Embeds -> Maximum embed size