Skip to content

Commit

Permalink
fix for Safari (previous fix had two problems) #252
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffhuang
jeffhuang committed Mar 21, 2022
1 parent dc49660 commit 15e1448
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 58 deletions.
58 changes: 29 additions & 29 deletions src/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,6 @@ async function loop() {
// Count time
var elapsedTime = performance.now() - clockStart;


// Draw face overlay
if( webgazer.params.showFaceOverlay )
{
Expand Down Expand Up @@ -483,33 +482,24 @@ async function init(stream) {
// create a video element container to enable customizable placement on the page
videoContainerElement = document.createElement('div');
videoContainerElement.id = webgazer.params.videoContainerId;
if (navigator.userAgent.indexOf("Safari") > -1) {
videoContainerElement.style.opacity = webgazer.params.showVideo ? '1': '0';
videoContainerElement.style.display = 'block';
} else {
videoContainerElement.style.display = webgazer.params.showVideo ? 'block' : 'none';
}

videoContainerElement.style.position = 'fixed';
videoContainerElement.style.top = topDist;
videoContainerElement.style.left = leftDist;
videoContainerElement.style.width = webgazer.params.videoViewerWidth + 'px';
videoContainerElement.style.height = webgazer.params.videoViewerHeight + 'px';

hideVideoElement(videoContainerElement);

videoElement = document.createElement('video');
videoElement.setAttribute('playsinline', '');
videoElement.id = webgazer.params.videoElementId;
videoElement.srcObject = stream;
videoElement.autoplay = true;
if (navigator.userAgent.indexOf("Safari") > -1) {
videoElement.style.opacity = webgazer.params.showVideo ? '1': '0';
videoElement.style.display = 'block';
} else {
videoElement.style.display = webgazer.params.showVideo ? 'block' : 'none';
}
videoElement.style.position = 'absolute';
// We set these to stop the video appearing too large when it is added for the very first time
videoElement.style.width = webgazer.params.videoViewerWidth + 'px';
videoElement.style.height = webgazer.params.videoViewerHeight + 'px';
hideVideoElement(videoElement);
// videoElement.style.zIndex="-1";

// Canvas for drawing video to pass to clm tracker
Expand Down Expand Up @@ -592,8 +582,8 @@ async function init(stream) {
/**
* Initializes navigator.mediaDevices.getUserMedia
* depending on the browser capabilities
*
* @return Promise
*
* @return Promise
*/
function setUserMediaVariable(){

Expand Down Expand Up @@ -767,24 +757,34 @@ webgazer.showVideoPreview = function(val) {
return webgazer;
}

/**
* hides a video element (videoElement or videoContainerElement)
* uses display = 'none' for all browsers except Safari, which uses opacity = '1'
* because Safari optimizes out video element if display = 'none'
* @param {Object} element
* @return {null}
*/
function hideVideoElement(val) {
if (navigator.vendor && navigator.vendor.indexOf('Apple') > -1) {
val.style.opacity = webgazer.params.showVideo ? '1': '0';
val.style.display = 'block';
} else {
val.style.display = webgazer.params.showVideo ? 'block' : 'none';
}
}

/**
* Set whether the camera video preview is visible or not (default true).
* @param {*} bool
* @return {webgazer} this
*/
webgazer.showVideo = function(val) {
webgazer.params.showVideo = val;
if (navigator.userAgent.indexOf("Safari") > -1) {
videoElement.style.opacity = webgazer.params.showVideo ? '1': '0';
videoElement.style.display = 'block';
} else {
videoElement.style.display = webgazer.params.showVideo ? 'block' : 'none';
if (videoElement) {
hideVideoElement(videoElement);
}
if (navigator.userAgent.indexOf("Safari") > -1) {
videoContainerElement.style.opacity = webgazer.params.showVideo ? '1': '0';
videoContainerElement.style.display = 'block';
} else {
videoContainerElement.style.display = webgazer.params.showVideo ? 'block' : 'none';
if (videoContainerElement) {
hideVideoElement(videoContainerElement);
}
return webgazer;
};
Expand Down Expand Up @@ -832,10 +832,10 @@ webgazer.showPredictionPoints = function(val) {
/**
* Set whether previous calibration data (from localforage) should be loaded.
* Default true.
*
*
* NOTE: Should be called before webgazer.begin() -- see www/js/main.js for example
*
* @param val
*
* @param val
* @returns {webgazer} this
*/
webgazer.saveDataAcrossSessions = function(val) {
Expand Down
58 changes: 29 additions & 29 deletions www/webgazer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138770,7 +138770,6 @@ async function loop() {
// Count time
var elapsedTime = performance.now() - clockStart;


// Draw face overlay
if( src_webgazer.params.showFaceOverlay )
{
Expand Down Expand Up @@ -138972,33 +138971,24 @@ async function init(stream) {
// create a video element container to enable customizable placement on the page
videoContainerElement = document.createElement('div');
videoContainerElement.id = src_webgazer.params.videoContainerId;
if (navigator.userAgent.indexOf("Safari") > -1) {
videoContainerElement.style.opacity = src_webgazer.params.showVideo ? '1': '0';
videoContainerElement.style.display = 'block';
} else {
videoContainerElement.style.display = src_webgazer.params.showVideo ? 'block' : 'none';
}

videoContainerElement.style.position = 'fixed';
videoContainerElement.style.top = topDist;
videoContainerElement.style.left = leftDist;
videoContainerElement.style.width = src_webgazer.params.videoViewerWidth + 'px';
videoContainerElement.style.height = src_webgazer.params.videoViewerHeight + 'px';

hideVideoElement(videoContainerElement);

videoElement = document.createElement('video');
videoElement.setAttribute('playsinline', '');
videoElement.id = src_webgazer.params.videoElementId;
videoElement.srcObject = stream;
videoElement.autoplay = true;
if (navigator.userAgent.indexOf("Safari") > -1) {
videoElement.style.opacity = src_webgazer.params.showVideo ? '1': '0';
videoElement.style.display = 'block';
} else {
videoElement.style.display = src_webgazer.params.showVideo ? 'block' : 'none';
}
videoElement.style.position = 'absolute';
// We set these to stop the video appearing too large when it is added for the very first time
videoElement.style.width = src_webgazer.params.videoViewerWidth + 'px';
videoElement.style.height = src_webgazer.params.videoViewerHeight + 'px';
hideVideoElement(videoElement);
// videoElement.style.zIndex="-1";

// Canvas for drawing video to pass to clm tracker
Expand Down Expand Up @@ -139081,8 +139071,8 @@ async function init(stream) {
/**
* Initializes navigator.mediaDevices.getUserMedia
* depending on the browser capabilities
*
* @return Promise
*
* @return Promise
*/
function setUserMediaVariable(){

Expand Down Expand Up @@ -139256,24 +139246,34 @@ src_webgazer.showVideoPreview = function(val) {
return src_webgazer;
}

/**
* hides a video element (videoElement or videoContainerElement)
* uses display = 'none' for all browsers except Safari, which uses opacity = '1'
* because Safari optimizes out video element if display = 'none'
* @param {Object} element
* @return {null}
*/
function hideVideoElement(val) {
if (navigator.vendor && navigator.vendor.indexOf('Apple') > -1) {
val.style.opacity = src_webgazer.params.showVideo ? '1': '0';
val.style.display = 'block';
} else {
val.style.display = src_webgazer.params.showVideo ? 'block' : 'none';
}
}

/**
* Set whether the camera video preview is visible or not (default true).
* @param {*} bool
* @return {webgazer} this
*/
src_webgazer.showVideo = function(val) {
src_webgazer.params.showVideo = val;
if (navigator.userAgent.indexOf("Safari") > -1) {
videoElement.style.opacity = src_webgazer.params.showVideo ? '1': '0';
videoElement.style.display = 'block';
} else {
videoElement.style.display = src_webgazer.params.showVideo ? 'block' : 'none';
if (videoElement) {
hideVideoElement(videoElement);
}
if (navigator.userAgent.indexOf("Safari") > -1) {
videoContainerElement.style.opacity = src_webgazer.params.showVideo ? '1': '0';
videoContainerElement.style.display = 'block';
} else {
videoContainerElement.style.display = src_webgazer.params.showVideo ? 'block' : 'none';
if (videoContainerElement) {
hideVideoElement(videoContainerElement);
}
return src_webgazer;
};
Expand Down Expand Up @@ -139321,10 +139321,10 @@ src_webgazer.showPredictionPoints = function(val) {
/**
* Set whether previous calibration data (from localforage) should be loaded.
* Default true.
*
*
* NOTE: Should be called before webgazer.begin() -- see www/js/main.js for example
*
* @param val
*
* @param val
* @returns {webgazer} this
*/
src_webgazer.saveDataAcrossSessions = function(val) {
Expand Down

0 comments on commit 15e1448

Please sign in to comment.