'Camera Video Stream is being inactive/disable on implementing Drag and Drop

We have setup a video call with webrtc and we have implemented drag and drop to swap/change the user's position with HTML and JavaScript.

    var dragSrcEl = null;

function handleDragStart(e) {
  this.style.opacity = '0.4';
  
  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }

  e.dataTransfer.dropEffect = 'move';
  
  return false;
}

function handleDragEnter(e) {
  this.classList.add('over');
}

function handleDragLeave(e) {
  this.classList.remove('over');
}

function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
  }

  if (dragSrcEl != this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }

  return false;
}

function handleDragEnd(e) {
  this.style.opacity = '1';

  items.forEach(function (item) {
    item.classList.remove('over');
  });
}
let items = document.querySelectorAll('#video .streamDiv');//your specific html element ID and CLASS.
console.log("items: in test "+items)

for (var i = 0, element; (element = items[i]); i++) {
console.log("element: ",element);
element.addEventListener('dragstart', handleDragStart, false);
element.addEventListener('dragenter', handleDragEnter, false);
element.addEventListener('dragover', handleDragOver, false);
element.addEventListener('dragleave', handleDragLeave, false);
element.addEventListener('drop', handleDrop, false);
element.addEventListener('dragend', handleDragEnd, false);
}

The drag and drop is working fine whatever content like image or static video is in it, issue is (not working with webrtc) that while swapping/changing is happening with camera video feed whenever a new user is joining in with their camera feed ,then camera video feed got inactive or closed. Take reference of our concerned issue from following video link: https://drive.google.com/file/d/1Uw7viN_ELOOAUyeQcuGV3iS_rKe1QUL_/view?usp=sharing

Any advice? Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source