how to add zoom to HTML 5 Video renderring?

Question

i want to know how to add zoom to HTML5 video rendering, from this i mean to say is that i am able to render video already and i can capture images from the video streaming too, but what i wanna know is there an option to zoom the current rendered video?

currently this is how i manage to capture images

jQuery('#enable_camera').on('click', function() {
    var video = document.querySelector("#vid");
    var onCameraFail = function(e) {
        console.log('Camera did not work.', e);
    };
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
        jQuery('#enable_camera').hide();
        jQuery('#search_image').show();
        jQuery('#take_picture').show();
    }, onCameraFail);

    jQuery('#take_picture').on('click', function() {
        if (localMediaStream != null) {
            ctx.fillRect(0, 0, w, h);
            document.getElementById('canvas_img').src = video.src;
            ctx.drawImage(video, 0, 0, w, h);
            jQuery('#show_canvas').show();
            jQuery('#show_vid').hide();
        }
    });

});

For zooming into the video, check: http://stackoverflow.com/questions/25096194/how-can-i-zoom-into-video-and-switch-streaming-of-videos-in-the-same-html5-playe/25220446#25220446 — khateeb, Aug 11 '14 at 12:22
@khateeb: thanks for reply, i checked that link, isnt that link for recorded video? if it is then i am asking for live rendered video. — noobie-php, Aug 11 '14 at 12:24
I think it's the same, the main idea is that you change the css style of the video, so it's independent from if the video is live streamed or not. — khateeb, Aug 11 '14 at 12:33

score 2 · Answer 1 · edited Nov 29 '17 at 13:28

You can apply CSS styling to a video to zoom it. <video style="width:800px">, for example, will resize it to 800px, or <video style="width:100%"> will make it as large as it fits (into the current layout of the website). Aspect ratio is preserved, so the height is changed accordingly.

However, this also makes the video take up more space in the page layout. Maybe what you actually want is keep the size of the video on the screen the same, but instead zoom into a section of the video. In that case you can put the video into a <div> with a fixed with and height and the overflow:hidden property. You can then use CSS positioning to move the video around in that div to control which part of it is shown. This example will put the video in a 512*384 box, zoom it to 2x magnification and only display the center section of it:

<div style="width:512px; height:384px; overflow:hidden">
    <video controls style="width:200%; left:-50%; top:-25%; position:relative">
        <source src="video.mp4">
    </video>
</div>

So far the vanilla HTML+CSS solution. How to set the CSS style properties with jQuery is left as an exercise to the reader.

how to add zoom to HTML 5 Video renderring?

1 Answers1