enippeas enippeas - 2 months ago 26
jQuery Question

draggable works resizable not

First of all, i am newbie in programming. I have read almost all similar topics but i can't figure out what is wrong in my case. I run following code using localhost server (XAMPP) and draggable option works fine but resizable not.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning WebRTC - Chapter 2: Get User Media</title>

<link rel="stylesheet" href="jquery-ui-1.12.0.custom/jquery-ui.min.css">
<script src="jquery-ui-1.12.0.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.12.0.custom/jquery-ui.min.js"></script>

<style type="text/css">
.student {
width: 180px;
height: 180px;
}
</style>
</head>
<body>

<video class="student" autoplay></video>

<script src="main.js"></script>

<script>
$(document).ready(function() {
$(".student").resizable().draggable();
});
</script>

</body>
</html>


main.js

function hasUserMedia() {
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasUserMedia()) {
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getUserMedia({ video: true, audio: true }, function
(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
}, function (err) {});
} else {
alert("Sorry, your browser does not support getUserMedia.");
}

Answer

I would advise wrapping the video element in a div and applying the Draggable and Resizable to this.

I found this similar question: Making HTML5 video draggable without losing the controls

Here is what I would advise: https://jsfiddle.net/Twisty/f0resov1/

HTML

<div class="vid-wrap">
  <div class="handle">
    <span class="ui-icon ui-icon-grip-dotted-horizontal"></span>
  </div>
  <video class="student" autoplay></video>
</div>

CSS

.vid-wrap {
  width: 240px;
  height: 200px;
}

.handle {
  height: 20px;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 6px 6px 0 0;
}

.student {
  width: 240px;
  height: 180px;
  margin: 0;
  padding: 0;
}

JS

function hasUserMedia() {
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasUserMedia()) {
  navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
    navigator.msGetUserMedia;
  navigator.getUserMedia({
    video: true,
    audio: true
  }, function(stream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(stream);
  }, function(err) {});
} else {
  alert("Sorry, your browser does not support getUserMedia.");
}

$(document).ready(function() {
  $(".vid-wrap").resizable({
    aspectRatio: 4 / 3,
    minWidth: 240,
    maxWidth: 640,
    alsoResize: ".student"
  }).draggable({
    handle: ".handle"
  });
});

With this, we can resize the wrapper, and it will resize the video inside of it. Another way to do this is set the video CSS to 100% for width & height. When the wrapper changes size, the styling forces the inner box to be 100% of that boxes size.

For draggable, we set a specific handle so we can avoid click or drag events that might happen with the video element. This looks like a no control style image capture, but I try to look ahead.