Jquery 如何将缩放添加到HTML5视频渲染？

我想知道如何将缩放添加到HTML5视频渲染中，我的意思是说，我已经能够渲染视频了，我也可以从视频流中捕获图像，但我想知道的是，是否有一个选项可以缩放当前渲染的视频

目前，这就是我如何拍摄图像的方法

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();
        }
    });

});

---

您可以将CSS样式应用于视频以进行缩放<例如，code>将其大小调整为800px，或者

将使其尽可能大（符合网站的当前布局）。宽高比将保持不变，因此高度将相应更改

然而，这也使得视频在页面布局中占据了更多的空间。也许你真正想要的是保持屏幕上视频的大小不变，而是放大视频的一部分。在这种情况下，您可以将视频放入具有固定宽度和高度以及

溢出：隐藏
属性的
。然后，您可以使用CSS定位在该div中移动视频，以控制显示视频的哪个部分。本例将视频放入512*384框中，将其放大2倍，仅显示其中心部分：

<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>



到目前为止，这是一个普通的HTML+CSS解决方案。如何使用jQuery设置CSS样式属性留给读者作为练习。
要放大视频，请选中：@khateeb:谢谢回复，我选中了该链接，该链接不是用于录制视频的吗？如果是的话，我会要求现场渲染视频。我认为这是一样的，主要的想法是你改变视频的css样式，所以它独立于视频是否是现场流媒体。