I am making a new collage application using google chromes new WebRTC features that let me access the camera in javascript. I have been able to put the camera feed on a video element, take snapshots of the camera and store them in variables and them draw them onto my canvas.
My new problem is that even when the css -webkit-filter is changed on the video element with css (by clicking the video preview), the copied data is raw and not filtered. Is there any way to copy the draw the filtered data from the video element? or to draw a filter onto a region in a canvas?
Related
Currently, when I'm screen sharing I replace the webcam stream with the screen share stream so only one can be displayed at a time. So is there a way to access both I want to screen share as well. I'm using sipjs.
My website lets a user record and upload a file using some basic html
<input type="file" accept="video/*;capture=camcorder">
Everything works fine; however, I have noticed my video is blurry compared to when I'm just normally recording a video on my iPhone. I've tested on multiple devices and all are blurry. The problem is when using this input element the camera is blurry. Why would the input element make the camera blurry, compared to when I just used the iPhone camera app? Can I add some attributes to the html element? Do I need to specify size? etc.
Here is the difference on my phone. Here is a screenshot when using html input (and yes I tried clicking to focus):
And here is screenshot from normal iPhone camera roll (when not opened through web input):
How can I make this input element camera look as good as the normal iPhone camera app?
I have a screen with a thumbnail sized <Video> playing and then transition to another screen where the video takes up the full window via react-navigation.
Is there a way to preserve that video element and transfer it to the new screen? If I render a new <Video>, it adds a delay as the video has to buffer before it can start playing rather than being a seamless transition where I can animate as the resize happens.
This should be supported in a future version of react-navigation once RFC 17 is completed:
https://github.com/react-navigation/rfcs/issues/17
In the meantime, there is a separate project called Fluid Transitions to support it:
https://github.com/fram-x/FluidTransitions
I have not gotten to test whether this will work for videos yet, but it does allow shared transitions for images, etc.
I have a GUI Builder created form in codename one, how can i open the camera in a resizable view at the show() of the form and place container like text area or anything else on it?
I saw the camera demo but i don't understand it very well because on the simulator it open a file picker.
My purpose is to create a form with a camera resizable capture when you have two labels and you can also write or paint on your photo used in background, I do this only for hobby and fun, i do what i can, Any advice is well accepted, thank you for the attenction
You can now place a component on top of a camera view with a new cn1lib: https://github.com/codenameone/CameraKitCodenameOne
Original answer below:
I'm assuming you mean overlay on a live camera view. While this is possible it's not supported at this time in the Java API layer.
If you mean grabbing a photo and setting it as a background for the form for overlay you can create an image with the result of the Capture API and use setBgImage() to set that image to the background of a component or form.
I'd like to show a list with image and video files from cameraroll in React Native app. I (accidentally) have seen that the Image component can display probably the first frame of a mov file on iOS. I checked the documentation but they write nothing about video files.
A React component for displaying different types of images, including
network images, static resources, temporary local images, and images
from local disk, such as the camera roll.
My question is if it's good practice to use the Image component for displaying a "thumbnail" from a video file this way or is it better to store a separate thumbnail (image file) for every video and display those in the list instead?
I also noticed this feature when we store '.mp4'(from local storage) in an image component, it can works as thumbnail without degradation in performance. However, I also noticed when you try to render any network video file it doesn't seem to work that way.
So this feature only works when we are displaying videos from phone's gallery.
Therefore, it is good to maintain thumbnails for video files if you are using videos from any other resource