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!
Related
How can one force a canvas to remain still while you draw on it on android phones?
We have a project in Ionic, where the below code is used to allow the end user to draw on a canvas element, but when he starts drawing, the page scrolls with him.
Strange enough though, the code stops the form from scrolling up and down if the user drags left or right, but if they move their finger up or down before going left or right, the page scrolls with their draw movements, and they end up with basically nothing being drawn...
Does anybody see how I can force the scrolling to hold while the user draw's on the canvas?
//employer_signature_canvas setup
var employer_signature_canvas = document.getElementById("employer_my_canvas");
var ctx = employer_signature_canvas.getContext("2d");
ctx.strokeStyle = "#222222";
ctx.lineWith = 2;
// Set up mouse events for drawing
var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
employer_signature_canvas.addEventListener("mousedown", function (e) {
drawing = true;
lastPos = getMousePos(employer_signature_canvas, e);
}, false);
employer_signature_canvas.addEventListener("mouseup", function (e) {
drawing = false;
}, false);
employer_signature_canvas.addEventListener("mousemove", function (e) {
mousePos = getMousePos(employer_signature_canvas, e);
}, false);
// Get the position of the mouse relative to the employer_signature_canvas
function getMousePos(employer_signature_canvasDom, mouseEvent) {
var rect = employer_signature_canvasDom.getBoundingClientRect();
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top
};
}
// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
})();
// Draw to the employer_signature_canvas
function renderemployer_signature_canvas() {
if (drawing) {
ctx.moveTo(lastPos.x, lastPos.y);
ctx.lineTo(mousePos.x, mousePos.y);
ctx.stroke();
lastPos = mousePos;
}
}
// Allow for animation
(function drawLoop () {
requestAnimFrame(drawLoop);
renderemployer_signature_canvas();
})();
// Set up touch events for mobile, etc
employer_signature_canvas.addEventListener("touchstart", function (e) {
mousePos = getTouchPos(employer_signature_canvas, e);
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
employer_signature_canvas.addEventListener("touchend", function (e) {
var mouseEvent = new MouseEvent("mouseup", {});
employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
employer_signature_canvas.addEventListener("touchmove", function (e) {
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
// Get the position of a touch relative to the employer_signature_canvas
function getTouchPos(employer_signature_canvasDom, touchEvent) {
var rect = employer_signature_canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
};
}
// Prevent scrolling when touching the employer_signature_canvas
document.body.addEventListener("touchstart", function (e) {
if (e.target == employer_signature_canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchend", function (e) {
if (e.target == employer_signature_canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchmove", function (e) {
if (e.target == employer_signature_canvas) {
e.preventDefault();
}
}, false);
In your template (ionic page) you can use css to remove bounce and rubberband effects:
<ion-content no-bounce class="no-scroll"><ion-content>
in your scss:
.no-scroll .scroll-content {
overflow: hidden;
float: none;
}
I'm making a site, where you can draw on a HTML5 canvas, with the mouse or on mobile with touch.
But on mobile you scroll the site while you are drawing. Thats make the drawing very uncomfortable.I've tried that, but it doesn't work:
canvas.addEventListener("touchstart", function (e) {
var mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
if (e.target.tag == canvas) {
e.preventDefault();
}
}, false);
canvas.addEventListener("touchend", function (e) {
var mouseEvent = new MouseEvent("mouseup", {});
canvas.dispatchEvent(mouseEvent);
if (e.target.tag == canvas) {
e.preventDefault();
}
}, false);
canvas.addEventListener("touchmove", function (e) {
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
if (e.target.tag == canvas) {
e.preventDefault();
}
}, false);
Do you have any idea, how I can avoid scrolling on mobile, when you draw on canvas?
Thank you!
The problem is that when i have 2 or more players on html page i can only play music in the first player and the rest wont work.
my customized HTML5 audio player:
<audio id="music" preload="true">
<source src="music/interlude.mp3">
</audio>
<div id="wrapper">
<div id="audioplayer">
<button id="pButton" class="play"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
</div>
and js for this:
document.addEventListener("DOMContentLoaded", function(event) {
var music = document.getElementById('music'); // id for audio element
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
// play button event listenter
pButton.addEventListener("click", play);
// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);
// makes timeline clickable
timeline.addEventListener("click", function(event) {
moveplayhead(event);
music.currentTime = duration * clickPercent(event);
}, false);
// returns click as decimal (.77) of the total timelineWidth
function clickPercent(event) {
return (event.clientX - getPosition(timeline)) / timelineWidth;
}
// makes playhead draggable
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
// Boolean value so that audio position is updated only when the playhead is released
var onplayhead = false;
// mouseDown EventListener
function mouseDown() {
onplayhead = true;
window.addEventListener('mousemove', moveplayhead, true);
music.removeEventListener('timeupdate', timeUpdate, false);
}
// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(event) {
if (onplayhead == true) {
moveplayhead(event);
window.removeEventListener('mousemove', moveplayhead, true);
// change current time
music.currentTime = duration * clickPercent(event);
music.addEventListener('timeupdate', timeUpdate, false);
}
onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(event) {
var newMargLeft = event.clientX - getPosition(timeline);
if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
playhead.style.marginLeft = newMargLeft + "px";
}
if (newMargLeft < 0) {
playhead.style.marginLeft = "0px";
}
if (newMargLeft > timelineWidth) {
playhead.style.marginLeft = timelineWidth + "px";
}
}
// timeUpdate
// Synchronizes playhead position with current point in audio
function timeUpdate() {
var playPercent = timelineWidth * (music.currentTime / duration);
playhead.style.marginLeft = playPercent + "px";
if (music.currentTime == duration) {
pButton.className = "";
pButton.className = "play";
}
}
//Play and Pause
function play() {
// start music
if (music.paused) {
music.play();
// remove play, add pause
pButton.className = "";
pButton.className = "pause";
} else { // pause music
music.pause();
// remove pause, add play
pButton.className = "";
pButton.className = "play";
}
}
// Gets audio file duration
music.addEventListener("canplaythrough", function() {
duration = music.duration;
}, false);
// getPosition
// Returns elements left position relative to top-left of viewport
function getPosition(el) {
return el.getBoundingClientRect().left;
}
/* DOMContentLoaded*/
});
i belive the problem is somewhere in the js code but i cant figure out where.
i took the code form here
I notice that you're using a lot of IDs. When the "first of something" works on a page, usually it's IDs that are causing the issue.
Change all of your IDs for your <audio> players to class attributes. You will also need to update your JavaScript as well, from something like this:
var music = document.getElementById('music');
music.addEventListener(...
To something more like this:
var music = document.querySelectorAll(".music"); // class="music"
for (var i = 0; i < music.length; i++) {
music[i].addEventListener(...
You should find that this will work for you.
Can anyone spot my error?
I'm getting a "TypeError: movableItems[i] is undefined" at line 37.
I commented out lines 36-38 and I didn't get the error in the console anymore. This is a chapter tutorial I am doing for practice for a test in community college.
"use strict";
// declare global variables for setup page
var zIndexCounter;
var pos = [];
var origin;
// perform setup tasks when page first loads
function setUpPage() {
document.querySelector("nav ul li:first-of-type").addEventListener("click", loadSetup, false);
document.querySelector("nav ul li:last-of-type").addEventListener("click", loadDirections, false);
var movableItems = document.querySelectorAll("#room div");
zIndexCounter = movableItems.length + 1;
for (var i = 0; i < movableItems.length; i++) {
movableItems[i].addEventListener("mspointerdown", startDrag, false);
movableItems[i].addEventListener("pointerdown", startDrag, false);
if (movableItems[i].addEventListener) {
movableItems[i].addEventListener("mousedown", startDrag, false);
movableItems[i].addEventListener("touchstart", startDrag, false);
} else if (movableItems[i].attachEvent) {
movableItems[i].attachEvent("onmousedown", startDrag);
}
}
// disable IE10+ interface gestures
movableItems[i].style.msTouchAction = "none";
movableItems[i].style.touchAction = "none";
}
// configure page to display Setup content
function loadSetup() {
document.querySelector("nav ul li:first-of-type").className = "current";
document.querySelector("nav ul li:last-of-type").className = "";
document.getElementById("setup").style.display = "block";
document.getElementById("location").style.display = "none";
location.search = "";
}
// configure page to display Directions content
function loadDirections(string) {
document.querySelector("nav ul li:first-of-type").className = "";
document.querySelector("nav ul li:last-of-type").className = "current";
document.getElementById("setup").style.display = "none";
document.getElementById("location").style.display = "block";
}
// run setUpPage() function when page finishes loading
window.addEventListener("load", setUpPage, false);
// add event listeners and move object
// when user starts dragging
function startDrag(evt) {
// set z-index to move selected element on top of others
this.style.zIndex = zIndexCounter;
// increment z-index counter so next selected element is
// on top of others
zIndexCounter++;
if (evt.type !== "mousedown") {
evt.preventDefault();
this.addEventListener("touchmove", moveDrag, false);
this.addEventListener("mspointermove", moveDrag, false);
this.addEventListener("pointermove", moveDrag, false);
this.addEventListener("touchend", removeTouchListener, false);
this.addEventListener("mspointerup", removeTouchListener, false);
this.addEventListener("pointerup", removeTouchListener, false);
} else {
this.addEventListener("mousemove", moveDrag, false);
this.addEventListener("mouseup", removeDragListener, false);
}
pos = [this.offsetLeft, this.offsetTop];
origin = getCoords(evt);
}
function moveDrag(evt) {
var currentPos = getCoords(evt);
var deltaX = currentPos[0] - origin[0];
var deltaY = currentPos[1] - origin[1];
this.style.left = (pos[0] + deltaX) + "px";
this.style.top = (pos[1] + deltaY) + "px";
}
// identify location of object
function getCoords(evt) {
var coords = [];
if (evt.targetTouches && evt.targetTouches.length) {
var thisTouch = evt.targetTouches[0];
coords[0] = thisTouch.clientX;
coords[1] = thisTouch.clientY;
} else {
coords[0] = evt.clientX;
coords[1] = evt.clientY;
return coords;
}
}
// remove mouse event listeners when dragging ends
function removeDragListener() {
this.removeEventListener("mousemove", moveDrag, false);
this.removeEventListener("mouseup", removeDragListener, false);
}
// remove touch event listeners when dragging ends
function removeTouchListener() {
this.removeEventListener("touchmove", moveDrag, false);
this.removeEventListener("mspointermove", moveDrag, false);
this.removeEventListener("pointermove", moveDrag, false);
this.removeEventListener("touchend", removeTouchListener, false);
this.removeEventListener("mspointerup", removeTouchListener, false);
this.removeEventListener("pointerup", removeTouchListener, false);
}
You're accessing movableItems[i] after the loop has ended, when i == movableItems.length -- off the end of the list.
Move those last two accesses inside the loop:
for (var i = 0; i < movableItems.length; i++) {
movableItems[i].addEventListener("mspointerdown", startDrag, false);
movableItems[i].addEventListener("pointerdown", startDrag, false);
if (movableItems[i].addEventListener) {
movableItems[i].addEventListener("mousedown", startDrag, false);
movableItems[i].addEventListener("touchstart", startDrag, false);
}
else if (movableItems[i].attachEvent) {
movableItems[i].attachEvent("onmousedown", startDrag);
}
// moved the following two lines into the loop
movableItems[i].style.msTouchAction = "none";
movableItems[i].style.touchAction = "none";
}
On line 37 you're outside of the previous for loop, trying to access the i variable that is only accessible inside of the for loop.
i am trying to make something like paint , in my code user chooses color for drawing , now if the user selects Fill button , the code should fill the whole screen with color user chose in the first case i-e if color was black for stroke style than canvas should be completely black,
in my code , i am getting the correct color , but cant seem to fill the canvas , with it . canvas seems to get to refresh or (stroke style='#fffff' i think)
where is my code
(my complete code now)
my html file
<li>Clear the canvas: <button id="clearCanvasSimple" type="button">Clear</button></li>
<li><span class="highlight">Choose a color: </span>
<button id="choosePurpleSimpleColors" type="button">Purple</button>
<button id="chooseGreenSimpleColors" type="button">Green</button>
<button id="chooseYellowSimpleColors" type="button">Yellow</button>
<button id="chooseBrownSimpleColors" type="button">Brown</button>
</li>
<li>Erase : <button id="chooseEraseSimpleColors" type="button">Erase</button></li>
<li>Fill with colour:<button id="chooseFillSimpleColors" type="button">Fill</button></li>
</ul>
<script type="text/javascript" src="test2.js"></script>
<script>
initGame(null, document.getElementById('movecount'));
</script>
</body>
now test.js
if(window.addEventListener) {
window.addEventListener('load', function ()
{
var canvas;
var context;
var canvasHeight = 500;
var canvasWidth = 1250;
var canvas_simple;
var context_simple;
var tool;
var paint_simpleColors;
// Initialization sequence.
function init ()
{
// Find the canvas element.
var canvasDiv = document.getElementById('canvas');
canvas_simple = document.createElement('canvas');
canvas_simple.setAttribute('height', canvasHeight);
canvas_simple.setAttribute('width', canvasWidth);
canvas_simple.setAttribute('id', 'canvasSimple');
canvasDiv.appendChild(canvas_simple);
if(typeof G_vmlCanvasManager != 'undefined')
{
canvas_simple = G_vmlCanvasManager.initElement(canvas_simple);
}
context_simple = canvas_simple.getContext("2d");
tool = new tool_pencil();
//canvas_simple.addEventListener('mousemove', ev_canvas, false);
canvas_simple.addEventListener('mousedown', ev_canvas, false);
canvas_simple.addEventListener('mousemove', ev_canvas, false);
canvas_simple.addEventListener('mouseup', ev_canvas, false);
clearCanvasSimple.addEventListener('mousedown', function () {OnButtonDown (clearCanvasSimple)}, false);
choosePurpleSimpleColors.addEventListener('mousedown', function () {ButtonDown1 (choosePurpleSimpleColors)}, false);
chooseGreenSimpleColors.addEventListener('mousedown', function () {ButtonDown2 (chooseGreenSimpleColors)}, false);
chooseYellowSimpleColors.addEventListener('mousedown', function () {ButtonDown3 (chooseYellowSimpleColors)}, false);
chooseBrownSimpleColors.addEventListener('mousedown', function () {ButtonDown4 (chooseBrownSimpleColors)}, false);
chooseEraseSimpleColors.addEventListener('mousedown', function () {ButtonDown5 (chooseEraseSimpleColors)}, false);
chooseFillSimpleColors.addEventListener('mousedown', function () {ButtonDown6 (chooseFillSimpleColors)}, false);
// canvas_simple.addEventListener('mousemove', ev_mousemove, false);
}
function tool_pencil () {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context_simple.beginPath();
paint_simpleColors = true;
var radius = 5;
context_simple.lineJoin = "round";
context_simple.lineWidth = radius;
context_simple.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function (ev) {
if (tool.started&&paint_simpleColors) {
context_simple.lineTo(ev._x, ev._y);
context_simple.stroke();
}
};
this.mouseup = function (ev) {
if (tool.started) {
paint_simpleColors = false;
tool.mousemove(ev);
tool.started = false;
}
};
}
function ev_canvas (ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
function ButtonDown1 (choosePurpleSimpleColors)
{
context_simple.strokeStyle = "#2E0854";
}
function ButtonDown2 (chooseGreenSimpleColors)
{
context_simple.strokeStyle = "#1DA237";
}
function ButtonDown3 (chooseYellowSimpleColors)
{
context_simple.strokeStyle = "#FFFF00";
}
function ButtonDown4 (chooseBrownSimpleColors)
{
context_simple.strokeStyle = "#A52A2A";
}
function ButtonDown5 (chooseEraseSimpleColors)
{
context_simple.strokeStyle = "#FFFFFF";
}
function ButtonDown6 (chooseFillSimpleColors)
{
context_simple.fillStyle = context_simple.strokeStyle;
context_simple.fillRect(0, 0, canvas.width, canvas.height);
canvas_simple.width = canvas_simple.width;
}
function OnButtonDown (clearCanvasSimple) {
context_simple.fillStyle = '#ffffff'; // Work around for Chrome
context_simple.fillRect(0, 0, canvasWidth, canvasHeight);
canvas_simple.width = canvas_simple.width; // clears the canvas
}
init();
}, false); }
i hope does helps