My goal is to create a simple snapshot with webrtc with adding some simple image overlay on <video> element
Then save this to jpeg
I tried with
<canvas id="canvas">
<video id="video"></video>
</canvas>
But video is not diplayed then.
I would like to have all that in a simple canvas, so I would just need to use
window.location=canvas.toDataURL('image/jpg');
To save to jpeg
Any clue ?
I am not sure about using a <video> element inside a canvas, but you can use .drawImage to put the video contents on the canvas.
function raf(){
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
requestAnimationFrame();
}
Wheareas video refers to the video element. After this you can draw your overlay on the canvas (remember to put this in te animationframe, else it gets overwritten by the video), and then call .toDataURL('image/jpg') to get your image.
Related
I am trying to build a webpage where users can zoom in to a photo and look at the image in greater detail. The idea is that I will have a "zoom in" button, that, when clicked, will show a higher resolution version of the image. Use case: historical/archival image gallery
I recently came upon this article written by Cloudinary on how to create JavaScript functions for zooming in and out of photos. However, the article did not actually provide an example of using the Cloudinary service.
Article: Cool Tricks for Resizing Images in JavaScript (cloudinary.com)
https://cloudinary.com/blog/cool_tricks_for_resizing_images_in_javascript
Does anyone have advice/tips on how to make this work with Cloudinary stored images? I want to ensure I'm serving the highest quality/resolution version of the original image when zoomed in.
I have a codesandbox demo: https://codesandbox.io/s/cloudinary-zoom-image-542b1?file=/src/App.vue
The best practice is to upload the images to Cloudinary in the best quality/resolution. Assuming that the images would be scaled down when displayed on your site, once the zoom button is clicked, you can use Cloudinary transformations to request the images in larger dimensions, and possibly even their original dimensions.
For instance, in the following example, the image is originally scaled down to a width of 400px (c_scale,w_400). Once the "Zoom In" button is clicked, I'm changing the transformation URL in a way that crops a size of 400px width of the original image (height is implicitly set to retain the image aspect ratio) - c_crop,w_400. This way the zoomed-in image is in it's original resolution/quality:
function zoomin() {
var myImg = document.getElementById("my-image");
var src = myImg.src;
var splitted = src.split("c_scale,w_400/");
splitted[0] += "c_crop,w_400";
myImg.src = splitted.join("/");
// results in https://res.cloudinary.com/demo/image/upload/q_auto/c_crop,w_400/sample.jpg
}
function zoomout() {
var myImg = document.getElementById("my-image");
myImg.src = "https://res.cloudinary.com/demo/image/upload/q_auto/c_scale,w_400/sample.jpg";
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
<button type="button" onclick="zoomin()">Zoom In</button>
<button type="button" onclick="zoomout()">Zoom Out</button>
<img src="https://res.cloudinary.com/demo/image/upload/q_auto/c_scale,w_400/sample.jpg" id="my-image" width="400px" alt="Flowers and Bee">
That's just a simple example. There are many ways you could implement a zoom-in effect in general, and by using Cloudinary transformations in particular.
I see from https://vega.github.io/vega-lite/docs/config.html that it is possible to change the background color. But i don't see any docs for adding an underlay background image.
vega-lite creates a canvas element.
So adding a background image is explained in a question about how to add a background to a canvas element.
HTML5 Canvas background image
But you can just do it with css:
canvas {
background: url("my_background.png");
}
This is just like any other background image css.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
I am showing a div width Text over the poster image while the video is loading and when the video is paused.
How can I detect the moment the video is fully loaded and autoplay starts? Because then, the div should be hidden.
It you have defined autoplay then detect using the play event:
video.onplay = function() { /* remove overlay here */ };
alternatively use canplay or canplaythrough when you want to manually trigger play.
i want to show the thumbnail of the previous image taken by camera instead of the cancel button while camera is running ...
Is that possible ?? Need help ..
Yep. Just capture the last image, keep it in memory (or save it to disk), then use it as one of the controls. We can do this using the overlay property of the Titanium.Media.showCamera function. Here is a quick example:
First we need an overlay view to show the image.
var overlayView = Ti.UI.createView();
var imageView = Ti.UI.createImageView({
width:44,
height:44,
left : 5
});
overlayView.add(imageView);
Now this is the function we use to open the camera with the overlay view. Note that we don't have controls so you need to add those (for closing etc). All we do right now is set the overlays image.
Titanium.Media.showCamera({
success:function(event) {
// called when media returned from the camera
imageView.image = event.media;
},
cancel:function() {},
error:function(error) {},
saveToPhotoGallery:true,
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO],
overlay : overlayView,
showControls: false // This is important!
});
To really make this work, you may need to save the event.media in a global variable, or use a similiar technique make sure overlayView will not be nulled out / garbage collected.
Also this is a barebones solution, not very robust, but this is the basic method I would use!
I am trying to make a flash banner in CS4 with AS3.
In this banner I have to embed youtube videos.
My problem is.. after the video loaded I cant have/see usual controls (fullscreen, pause, stop, etc) on the video.. and the video has the autoplay by default.
I am using this code:
Security.allowDomain("*");
Security.allowDomain("www.youtube.com");
Security.allowDomain("youtube.com");
Security.allowDomain("s.ytimg.com");
Security.allowDomain("i.ytimg.com");
var my_player1:Object;
var my_loader1:Loader = new Loader();
my_loader1.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
my_loader1.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
function onLoaderInit(e:Event):void{
addChild(my_loader1);
my_player1 = my_loader1.content;
my_player1.addEventListener("onReady", onPlayerReady);
}
function onPlayerReady(e:Event):void{
my_player1.setSize(200,100);
/////////////////////////////////
//this example is with parameter//
//my_player1.loadVideoByUrl("http://www.youtube.com/v/ID-YOUTUBE?autohide=1&autoplay=0&fs=1&rel=0",0);
//////////////////////////////////
// this one is only the video id//
my_player1.loadVideoByUrl("http://www.youtube.com/v/ID-YOUTUBE",0);
}
I was trying to pass the parameter in the url to try but seems to be is not working.
I was checking too the google API for AS3 (http://code.google.com/apis/youtube/flash_api_reference.html) but honestly I dont find the way to implement that I need.
Whats is the way to see this controls in the video??
Thank you :)
I was trying different thing and I found a partial solution that i want to share with:
Security.allowDomain("www.youtube.com");
Security.allowDomain("youtube.com");
Security.allowDomain("s.ytimg.com");
Security.allowDomain("i.ytimg.com");
Security.allowDomain("s.youtube.com");
var my_player1:Object;
var my_loader1:Loader = new Loader();
//before I used that:
//my_loader1.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
//Now is use this:
my_loader1.load(new URLRequest("http://www.youtube.com/v/ID_VIDEO?version=3));
my_loader1.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
function onLoaderInit(e:Event):void{
addChild(my_loader1);
my_player1 = my_loader1.content;
my_player1.addEventListener("onReady", onPlayerReady);
}
function onPlayerReady(e:Event):void{
my_player1.setSize(200,100);
my_player1.loadVideoByUrl("http://www.youtube.com/v/ID_VIDEO",0);
}
Basically Instead of use the "Loading the chromeless player" I use the "Loading the embedded player"
My problem now is How I can modify for example the size of the controls bar.. because is taking 35px height and I want to reduce it
Thank