Is it possible to change the video capture size?
One thing I realized is that the video size is always the same 640x360 and the ratio is 16:9.
Is that something that can be configured? (both the image size and the ratio)
Thanks!
Not at the moment. OpenTok's webrtc archiving implementation is very new and currently in beta . It is still very basic in functionality and does not allow for adjustment for recorded video resolution.
Related
I'm looking for the best way to embed a video file on my website.
What do i have to consider to make it fast?
Do i have to load up different video files (size and format) and let e.g. JS pick the right one depending on screen-size? Or is the browser doing this automatically?
Do you have some example code lines for me?
Thanks
If you leave the video tag without a source, you can then inject the source based on the screen size (e.g. 720p for smaller screens 1080p for bigger screens). Of course, this means you have to create 'x' versions of the video (one for each screen size).
Another approach is to do video streaming. You'll need a JavaScript player - but just like Netflix, you can have multiple sizes and bitrates, and the player will adjust the video playback on each device based on screen size and network speed. One huge advantage here is that it can adjust during playback to a different version to ensure that the video continues to pay.
There are services that will do this for you - just upload the video, and you'll get a link for the player that you can embed on your page - api.video is one.
Problem
I have been trying for awhile without success to crop an base64 image taken from the camera using the camera preview plugin to a 4:3 resolution without any cropping input being done by the user.
Most plugins I have tried so far force a UI but for my purpose it needs to crop to 4:3 to then be sent to a server all as the same resolution.
What i've tried
I have tried tweaking the ionic native plugin without success.
Also i've tried numerous different Cordova plugins that have been suggested from other forum posts such as:
Cropper.js
Croppr.js
Cordova Plugin Crop - without the ionic native side
iCrop
All of those as far as I know force a UI as well as don't allow you to specify an aspect ratio.
In our app we needed cropped pictures as well. However it turned out (especially on Android devices) that the way you can crop after taking a picture depends on brand, model and even the camera app.
In Ionic 3 the camera plugin has an option allowEdit. There are some side effects when you set this to true. For example some users cropped there pictures in a very weird aspect ration like: 1:15, so a very small width, and a very large height. Keep this in mind when you allow your users to edit their pictures.
To get consistent crops we have implemented the cropping server side. In order to speed things up we only resize the picture on the client and upload the resized picture to the server.
I see a number of ways to deal with layouts, and interchange, etc to deal with image sizes, but I haven't come across any info about video player size. For instance, using viewbix, voo, jw, or any other js served video player, the size of the player is built into the embed. It also has an associated image file for the poster frame.
Just wondering how other folks approach this. Do you make multiple versions of the embed and image for various breakpoint sizes? Does it matter if the embed is too big? Not sure if that actually affects streaming speed or not, or if the video itself is technically doing anything until play is pressed. Image would still be an issue though as serving a full width desktop size image on a 320px screen seems a waste.
What's the smart way to handle this globally?
thx
With the JW Player, we have responsive support built into the player - http://www.jwplayer.com/blog/new-in-jw-player-responsive-design/, so you don't need to worry about breakpoints, media queries, or anything like that. Those would all still be handled in your CSS.
jwplayer("myResponsiveVideo").setup({
file: "/assets/tearsofsteel.mp4",
image: "/assets/tearsofsteel.jpg",
width: "100%",
aspectratio: "12:5"
});
Basically a set up like this will make the player responsive, regardless of what container it is in.
I set custom image on drag'n'drop start:
var dt = e.dataTransfer;
///...
dt.setDragImage(img, -20, -20);
But image quality for Retina is not good.
Usually, workaround of images quality for Retina is to make the image twice bigger and then either to "stratch" background (with css) for 100% or just to set canvas size twice smaller than its real content drawn.
But that does not work for the drag'n'drop image because the size of the image is the one which is shown on dragging as is, so I can do nothing with pixel rate.
Could anyone help on that? At least, definitely confirm, that that's not possible to solve with current browsers technologies level?
Thank you!
P.S. There is also some related topic with this drag'n'drop approach:
https://stackoverflow.com/questions/14834181/dynamic-image-created-from-canvas-by-todataurl-on-dragstart-event-does-not-s
I've read that 2nd generation iPod Touches are unable to play some types of video (particularly HD) even if its OS is up-to-date. I'm still trying to track down the video settings of a third-party stream I will be using, but I've already seen this with two 2nd gen Touches with 4.2.1 unable to play video.
Is there a way to detect from Objective C or JavaScript whether the host device is able to play a given type of video? HD video?
EDIT: I've revised my question. I am pretty certain at this point that the problem is HD (or maybe aspect ratio). The problem is that I don't know how to detect what the hardware version is (1st, 2nd or 3rd gen). I can detect the OS version, but it's not the problem.
Modernizr( http://www.modernizr.com/ ) might be able to help you with that