JavaScript

RSS for tag

Discuss the JavaScript programing language.

Posts under JavaScript tag

200 Posts

Post

Replies

Boosts

Views

Activity

Call Swift functions from JS
I have a VIewController with WKWebView to display HTML content to my users. What I need is to get some information from my project side(swift codes) such as app version, data reports to javascrtript side. On the side of js, I'll be able to generate html codes or display elements based on swift function calls. Here are some codes in my ViewController: class AboutViewController: UIViewController { @IBOutlet weak var webView: WKWebView! { didSet { setJS() } } private let jsCtx = JSContext() private func setJS() { let obj = MyVersionClass() jsCtx.ctx.setObject(             obj,             forKeyedSubscript: "versionObj") } override func viewDidLoad() {         super.viewDidLoad() // build url webView.loadFileURL(             url,             allowingReadAccessTo: url) let request = URLRequest(url: url)         webView.load(request) } MyVersionClass is defined as: import JavaScriptCore @objc protocol JSAppVersionProtocol: JSExport {     func getAppVersion() -> String     static func createObj() -> MyVersionClass } class MyVersionClass: NSObject, JSAppVersionProtocol {     static func createObj() -> MyVersionClass {         let obj = MyVersionClass()         return obj     }     func getAppVersion() -> String {        ...     } } The class AboutViewController will load an html file with js defined in script section <head> <script type="text/javascript" src="../version.js"></script> </head> <body onload="updateVersion()"> ... <span id="appVersion">To be updated with my app version      </span> .... JS code: function updateVersion() {     let e = document.getElementById("appVersion");     var ver =versionObj.getAppVersion(); // another try, see following codes // var ver =versionObj.createObj().getAppVersion();     e.innerHTML = ver; } I tested the js function call in my AbountViewController class right after I setObject like this: let result = jsCtx.evaluateScript("versionObj") print("\(result)" I got the result in console like this: <MyApp.JSAppVersion: 0x282aa0af0> I also tried to setObject like this: jsCtx.ctx.setObject(             MyVersionClass.self,             forKeyedSubscript: "versionType") // My test of script function let result = jsCtx.evaluateScript("versionType") print("\(result)" // result is <MyApp.MyVersionClass> However, it seems that my js does not know what my swift function code is. It fails to get the app version. Not sure what is missing or wrong? How can I set up mu swift function available in js side?
2
0
4.7k
Aug ’22
On the ios i see this player video when i scan the qr-code
var addDrawsight = $parameters.DrawSight; ZXing.TemplateBuilder.buildInterface(addDrawsight, document.getElementById($parameters.Canvas_WidgetId)); codeReader = new ZXing.BrowserMultiFormatReader(); /* document.getElementById('close-button').addEventListener('click', function() {     codeReader.reset();     document.getElementById('plugin-overlay').style.display = 'none';     document.getElementById('video').pause();     $parameters.ErrorMessage = "Failure during scan. Scan was cancelled";     $parameters.Success = false; }, true); */ var menuBackHandler = function() {     codeReader.reset();     document.getElementById('plugin-overlay').style.display = 'none';     document.getElementById('video').pause();    // $parameters.ErrorMessage = "Failure during scan. Scan was cancelled";    // $parameters.Success = true;     $parameters.IsBack = true;     history.back(); }; $public.Navigation.registerBackNavigationHandler(menuBackHandler); var selectedDeviceId = null; if(codeReader !== null){     if(!codeReader.canEnumerateDevices){                 var divOverlay = document.getElementById('plugin-overlay');         var video = document.getElementById('video');         if (divOverlay !== null && video !== null) {             video.parentNode.removeChild(video);             divOverlay.parentNode.removeChild(divOverlay);         }                 var input = document.createElement("input");         input.id = 'image-input'         input.type = "file";         input.accept = "image/* capture='camera'";         input.style.display = 'none';         document.body.appendChild(input);         var outImg = document.createElement("img");         outImg.id = 'outImage';         //outImg.style.display = 'none';         outImg.style.width = '320';         outImg.style.height = '320';         var cont = document.getElementById('reactContainer');         cont.appendChild(outImg);         input.click();         input.addEventListener("change", function (evt) {             var tgt = evt.target || window.event.srcElement,                 files = tgt.files;             // FileReader support             if (FileReader && files && files.length) {                 var fr = new FileReader();                 fr.onload = function () {                     var outImg = document.getElementById('outImage');                     outImg.src = fr.result;                     codeReader.decodeFromImageElement('outImage')                     .then(function (result) {                         $parameters.Value = result.text;                         $parameters.Success = true;                         $resolve();                     })                     .catch(function (err) {                         $parameters.ErrorMessage = "Could not find a barcode. Please try with a different image";                         $parameters.Success = false;                         $resolve();                     })                     .finally( function (){                         var input = document.getElementById('image-input');                         var outImg = document.getElementById('outImage');                         if (input !== null && outImage !== null) {                             outImg.parentNode.removeChild(outImage);                             input.parentNode.removeChild(input);                         }                                             });                 }             fr.readAsDataURL(files[0]);             }         });         return;     }     codeReader.getVideoInputDevices()     .then(function(videoInputDevices) {         var availableDevices = videoInputDevices.length;         if (availableDevices === 0) {             $parameters.ErrorMessage = "There are no available cameras. Verify your devices or permissions";             $parameters.Success = false;             return;         }         else if (availableDevices > 1){             for(var i=0; i<availableDevices; i++){                 console.log("videoInput" + videoInputDevices[i].label);                 $parameters.VideoInput +=  "-" + videoInputDevices[i].label;                 if((videoInputDevices[i].label.toLowerCase()).includes(camera)) {                     selectedDeviceId = videoInputDevices[i].deviceId;                     break;                 }             }             if(selectedDeviceId === null) {                 console.log("videoInput2" + videoInputDevices[availableDevices-1].label);                 selectedDeviceId = videoInputDevices[availableDevices-1].deviceId;             }         }         else {             console.log("videoInput3" + videoInputDevices[0].label);             selectedDeviceId = videoInputDevices[0].deviceId;         }         codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video')             .then(function (result) {                 codeReader.reset();                 $parameters.Value = result.text;                 $parameters.Success = true;                                 $resolve();             })             .catch(function (err) {                 $parameters.ErrorMessage = "Scan was cancelled";                 $parameters.Success = false;                 $resolve();             })             .finally( function (){                 var divOverlay = document.getElementById('plugin-overlay');                 var video = document.getElementById('video');                 if (divOverlay !== null && video !== null) {                     video.parentNode.removeChild(video);                     divOverlay.parentNode.removeChild(divOverlay);                 }             });     })     .catch(function(err) {         $parameters.ErrorMessage = "Failure during scan.";         $parameters.Success = false;         $resolve();     }); }
0
0
895
Aug ’22
When touchend and touchstart occur at the same time, only touchstart not fired
There seems to be a bug that when touchstart and touchend events are set and they occur at the same time, only touchstart does not fire. For example, when touchstart occurs on the right hand and touchend occurs on the left hand at the same time. Does anyone know the details of this or a workaround? This occurs with Safari and Chrome on iOS 15.6 and not on Android devices. The following codepen demo will help you understand. https://codepen.io/arisaito/pen/WNzymjv In this demo, when touchstart is detected a box of each color appears at the top, and when touchend is detected the box disappears. However when touchstart and touchend are repeated with both hands on an iOS device, there are frequent cases where the box does not appear even if touchstart is occured.
2
1
874
Aug ’22
javascript Audio visualisation in Safari not working
Can anybody help me to check why this code is not working in Safari (osx)? The audio is is playing, but no visualisation. I tried all the hints I found, but still no luck. Need to mention it's working fine in Chrome (osx) Thanks a lot for help function getDataFromAudio() { var freqByteData = new Uint8Array(analyser.fftSize / 2); var timeByteData = new Uint8Array(analyser.fftSize / 2); analyser.getByteFrequencyData(freqByteData); analyser.getByteTimeDomainData(timeByteData); return { f: freqByteData, t: timeByteData }; // array of all 1024 levels } I see CodePen links are not enabled here. I posted on stackoverflow
0
0
1.2k
Aug ’22
Unable to get image data from canvas
DrawImage video source data to canvas and then getImageData from canvas. The safari throws the error "Unable to get image data from canvas. Requested size was 1080 x 1920 ". // videoElement.readyState = 4 ctx.drawImage(videoElement,0,0,1080,1920,0,0,1080,1920); const imageData = ctx.getImageData(0,0,1080,1920);" iphone 11, ios 15.5 The step to reproduce this issue is not clear to me. When the issue has been triggered before, it is more easily reproduced until the safari is restart
0
1
947
Aug ’22
HTML video showing black screen but sound is playing on iOS 15
My website shows a video using video tag which worked perfectly until not long ago. The video is working but when pressing on full screen, the video is playing but the screen is black while the sound is still playing. The issue occurs only on iPhones with iOS 15 (using Safari and Chrome also). Things I've tried: I've tried playing the video directly with a URL to the actual file(to check its not codec issue) and it worked properly. My video tag has 'position: absolute;' on it and I tried removing it(even though it breaks my layout) and that didn't work either. Tried pausing the video immediately and playing it after the video loads. Tried applying a background: white; or any non-transparent color to the video tag. Tried removing auto play. Tried to disable 'GPU process: Media' on safari settings just to check if that affects anything and it didnt. This is the html: <video data-test-id="long-video" #longVideo muted controls playsinline [class.d-none]="!isShortVideoHidden" *ngIf="isPageLoaded" src="https://cdn1.someurl.com/videos/commercial_1.mp4" type="video/mp4"> </video> and the css(with the parent): @media only screen and(min-width:992px) { .fixed-video { position: fixed; z-index: 10000; margin: auto; width: 100vw; height: 100vh; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); transition: 0.4s; video { width: 80%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } } } Please tell me if you have struggled with this and know how to solve it. Thank you :)
3
1
5.1k
Aug ’22
Google Translator Javascript not working in iOS
I have one web viewer in React Native for my app, and the function of translate with Google works perfectly in the Safari browser, in my Android App, and on the desktop, but not in the iOS app This is my Google Translate code: function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'pt', includedLanguages: 'pt,en,es', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element'); comboTranslate = document.querySelector("#google_translate_element .goog-te-combo"); } function changeEvent(el) { if (el.fireEvent) { el.fireEvent('onchange'); } else { // var evObj = document.createEvent("HTMLEvents"); var event = new Event('change'); comboTranslate.dispatchEvent(event); // evObj.initEvent("change", false, true); // el.dispatchEvent(evObj); } } function changeLang(lang) { if (comboTranslate) { comboTranslate.value = lang; changeEvent(comboTranslate); } } function clickChange(){ btn_translate = document.querySelectorAll('.language'); // o que faz os menus acender; btn_translate.forEach(btn =&gt; { btn.addEventListener('click', function (e) { var lang = e.srcElement.getAttribute('data-language'); changeLang(lang) }) }) } clickChange(); setTimeout(() =&gt; { googleTranslateElementInit() // comboTranslate.addEventListener('change', function (e) {alert('a');}) }, 500); and on the app.json I have: { "expo": { "name": "MyApp ", "slug": "MyApp", "version": "1.2.0", "orientation": "portrait", "icon": "./assets/icon.png", "locales": { "en": "./locales/ios/en.json", "pt": "./locales/ios/pt.json", "es": "./locales/ios/es.json" }, "platforms": [ "ios", "android" ], "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "plugins": [ [ "expo-notifications", { "icon": "./assets/icon.png", "color": "#ffffff" } ] ], "updates": { "fallbackToCacheTimeout": 0 }, "assetBundlePatterns": [ "**/*" ], "ios": { "buildNumber": "8", "supportsTablet": true, "bundleIdentifier": "com.myapp", "infoPlist": { "CFBundleAllowMixedLocalizations": true } }, "android": { "package": "com.myapp", "versionCode": 9, "googleServicesFile": "./google-services.json", "config": { "googleMaps": { "apiKey": "AIzaSyDQjE4F3chI8Jy4FA8h45LqA7bMfngoH7Y" } }, "permissions": ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION", "CAMERA", "RECORD_AUDIO"], "blockedPermissions": ["ACCESS_BACKGROUND_LOCATION"], "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#FFFFFF" } }, "notification": { "icon": "./assets/icon.png" } } } I put console.log and alerts to see if the change in the select element of languages is being triggered by the JS, and it's all ok, I really don't know why it is not translating.
3
0
3k
Aug ’22
Unable to get Sign In with Apple to work on Firebase
Hey all. So I'll keep it short. I registered by App Service ID and Key and everything. I even enabled Apple Sign in from Firebase and got sign in with Apple to work on my Swift iOS app. Now I want it to work on my web app via Vanilla Javascript. When I run the following code on my frontend after initiating firebase, I don't get anything. Like absolutely no error in console or any kind of pop up. I'd appreciate if someone could tell me what I'm doing wrong. Thanks in advance! const provider = new firebase.auth.OAuthProvider('apple.com'); firebase.auth().signInWithPopup(provider).then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // You can also get the Apple OAuth Access and ID Tokens. var accessToken = credential.accessToken; var idToken = credential.idToken; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); // Result from Redirect auth flow. firebase.auth().getRedirectResult().then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // You can get the Apple OAuth Access and ID Tokens. var accessToken = credential.accessToken; var idToken = credential.idToken; // ... } // The signed-in user info. var user = result.user; }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); }
0
0
1.4k
Jul ’22
Total canvas memory use exceeds the maximum limit - iOS 15 beta with Safari
With the latest iOS 15 beta releases we have started seeing issues with memory and canvases. This error is not reproduced in any of the earlier iOS versions (with any devices), it is only present in the new iOS 15 beta versions. The warning about total canvas memory is always followed with a javascript exception trying to do rendering on the canvas: This is an history of it working in a iPhone 12 pro max with iOS 14.7.1. This is history of it not working with an iPhone 11 with iOS 15 beta 5 (confirmed with beta 4 as well) There are a couple of observations we've made: It seems it is more easily reproduced by repeatedly triggering the new url bar and rotating the device a lot. Clearing History and Website Data can fix the issue temporarily When it is reproduced it can easily be reproduced again, even when reloading the page.
3
0
7k
Jul ’22
Java Virtual machine for Monterey
I want to install a GitHub repository and nvm command therefore I need the java virtual machine. When I check the "java -version in zsh I always get this Error Error: Could not create the Java Virtual Machine. What would you suggest since it is installed JavaVirtualMachines/jdk-18.0.1.jdk?
2
0
4.2k
Jun ’22
IOS 15: WebAuthn catches error but still prompts user
Hi. The registration process with WebAuthn works fine and expected. As we use the same code on both android and ios, we dont use discoverable credentials, but instead saves the credential-id in a cookie. If an user deletes his cookie, we can not see if the user has registered previously without prompting the user for registration again. This is okay, and if we get an InvalidStateError (because the user is already registered) we let the user think he has registered again, and just creates a new cookie. The problem is: When the navigator.credentials.create is called, the InvalidStateError is catched immideately, before the user have time to do anything about the faceID prompt which shows. When the InvalidStateError is caught, the Registration Completed page shows. This means the completed page is shown behind the face-id prompt, which is very confusing for the user. How can the registration be completed if the face-id prompt is not finished? On Windows, the error is not thrown before the user has completed the faceid prompt, which means the registration-process is experienced exactly as a first-time registration. Is it a bug that the prompt is shown after the error is thrown? Any tips to how i can work around this? If this is not the right forum to ask - where is a better place? Best regards, Nina
1
0
904
Jun ’22
[bug] iPad Safari fullscreen error when triggered following a pointerdown event
When triggering a webkitRequestFullscreen event in response to a pointerdown event, the result is a fullscreen error. Using a pointerup event instead of pointerdown works fine. I'm using a <button> element to receive the event and in the event listener callback I'm attempting to call webkitRequestFullscreen() on a div. Is this expected behavior? note: this was observed using MacOS Simulator: iPad 9th Generation - iOS 15.4
0
0
991
Jun ’22
How to make the button "Share to Instagram Story in Tik Tok?"
Hello, i would like to know if anyone knows how the Tik Tok button to works to share a video from this plataform in Instagram stories, that is, the button opens editing mode with the video already included. I would be needing to make a similar button for an application. i tried entering URLs from my phone like: "//instagram.com/create/story" but it doesn´t even open the story editing mode. Thank you very much.
0
0
738
Jun ’22
JavaScriptCore Date Constructor Works Differently than V8
Date objects should be able to be constructed with strings formatted as YYYY-MM-DD . On Chrome-based browsers, both of the following are valid: new Date("2022-06-01") new Date("2022-6-01") although the second one does not strictly follow the format. However, it is extremely convenient to work with since you do not have to check for the string length and determine whether to add a 0 in the beginning. Yet, on my Safari browser, the code: new Date("2022-6-01") returns a date object of an invalid date. This is simple to fix, yet it poses an inconvenience during development. Is there any way to let Apple improve its JavaScript engine?
1
0
1.4k
May ’22
Call Swift functions from JS
I have a VIewController with WKWebView to display HTML content to my users. What I need is to get some information from my project side(swift codes) such as app version, data reports to javascrtript side. On the side of js, I'll be able to generate html codes or display elements based on swift function calls. Here are some codes in my ViewController: class AboutViewController: UIViewController { @IBOutlet weak var webView: WKWebView! { didSet { setJS() } } private let jsCtx = JSContext() private func setJS() { let obj = MyVersionClass() jsCtx.ctx.setObject(             obj,             forKeyedSubscript: "versionObj") } override func viewDidLoad() {         super.viewDidLoad() // build url webView.loadFileURL(             url,             allowingReadAccessTo: url) let request = URLRequest(url: url)         webView.load(request) } MyVersionClass is defined as: import JavaScriptCore @objc protocol JSAppVersionProtocol: JSExport {     func getAppVersion() -> String     static func createObj() -> MyVersionClass } class MyVersionClass: NSObject, JSAppVersionProtocol {     static func createObj() -> MyVersionClass {         let obj = MyVersionClass()         return obj     }     func getAppVersion() -> String {        ...     } } The class AboutViewController will load an html file with js defined in script section <head> <script type="text/javascript" src="../version.js"></script> </head> <body onload="updateVersion()"> ... <span id="appVersion">To be updated with my app version      </span> .... JS code: function updateVersion() {     let e = document.getElementById("appVersion");     var ver =versionObj.getAppVersion(); // another try, see following codes // var ver =versionObj.createObj().getAppVersion();     e.innerHTML = ver; } I tested the js function call in my AbountViewController class right after I setObject like this: let result = jsCtx.evaluateScript("versionObj") print("\(result)" I got the result in console like this: <MyApp.JSAppVersion: 0x282aa0af0> I also tried to setObject like this: jsCtx.ctx.setObject(             MyVersionClass.self,             forKeyedSubscript: "versionType") // My test of script function let result = jsCtx.evaluateScript("versionType") print("\(result)" // result is <MyApp.MyVersionClass> However, it seems that my js does not know what my swift function code is. It fails to get the app version. Not sure what is missing or wrong? How can I set up mu swift function available in js side?
Replies
2
Boosts
0
Views
4.7k
Activity
Aug ’22
On the ios i see this player video when i scan the qr-code
var addDrawsight = $parameters.DrawSight; ZXing.TemplateBuilder.buildInterface(addDrawsight, document.getElementById($parameters.Canvas_WidgetId)); codeReader = new ZXing.BrowserMultiFormatReader(); /* document.getElementById('close-button').addEventListener('click', function() {     codeReader.reset();     document.getElementById('plugin-overlay').style.display = 'none';     document.getElementById('video').pause();     $parameters.ErrorMessage = "Failure during scan. Scan was cancelled";     $parameters.Success = false; }, true); */ var menuBackHandler = function() {     codeReader.reset();     document.getElementById('plugin-overlay').style.display = 'none';     document.getElementById('video').pause();    // $parameters.ErrorMessage = "Failure during scan. Scan was cancelled";    // $parameters.Success = true;     $parameters.IsBack = true;     history.back(); }; $public.Navigation.registerBackNavigationHandler(menuBackHandler); var selectedDeviceId = null; if(codeReader !== null){     if(!codeReader.canEnumerateDevices){                 var divOverlay = document.getElementById('plugin-overlay');         var video = document.getElementById('video');         if (divOverlay !== null && video !== null) {             video.parentNode.removeChild(video);             divOverlay.parentNode.removeChild(divOverlay);         }                 var input = document.createElement("input");         input.id = 'image-input'         input.type = "file";         input.accept = "image/* capture='camera'";         input.style.display = 'none';         document.body.appendChild(input);         var outImg = document.createElement("img");         outImg.id = 'outImage';         //outImg.style.display = 'none';         outImg.style.width = '320';         outImg.style.height = '320';         var cont = document.getElementById('reactContainer');         cont.appendChild(outImg);         input.click();         input.addEventListener("change", function (evt) {             var tgt = evt.target || window.event.srcElement,                 files = tgt.files;             // FileReader support             if (FileReader && files && files.length) {                 var fr = new FileReader();                 fr.onload = function () {                     var outImg = document.getElementById('outImage');                     outImg.src = fr.result;                     codeReader.decodeFromImageElement('outImage')                     .then(function (result) {                         $parameters.Value = result.text;                         $parameters.Success = true;                         $resolve();                     })                     .catch(function (err) {                         $parameters.ErrorMessage = "Could not find a barcode. Please try with a different image";                         $parameters.Success = false;                         $resolve();                     })                     .finally( function (){                         var input = document.getElementById('image-input');                         var outImg = document.getElementById('outImage');                         if (input !== null && outImage !== null) {                             outImg.parentNode.removeChild(outImage);                             input.parentNode.removeChild(input);                         }                                             });                 }             fr.readAsDataURL(files[0]);             }         });         return;     }     codeReader.getVideoInputDevices()     .then(function(videoInputDevices) {         var availableDevices = videoInputDevices.length;         if (availableDevices === 0) {             $parameters.ErrorMessage = "There are no available cameras. Verify your devices or permissions";             $parameters.Success = false;             return;         }         else if (availableDevices > 1){             for(var i=0; i<availableDevices; i++){                 console.log("videoInput" + videoInputDevices[i].label);                 $parameters.VideoInput +=  "-" + videoInputDevices[i].label;                 if((videoInputDevices[i].label.toLowerCase()).includes(camera)) {                     selectedDeviceId = videoInputDevices[i].deviceId;                     break;                 }             }             if(selectedDeviceId === null) {                 console.log("videoInput2" + videoInputDevices[availableDevices-1].label);                 selectedDeviceId = videoInputDevices[availableDevices-1].deviceId;             }         }         else {             console.log("videoInput3" + videoInputDevices[0].label);             selectedDeviceId = videoInputDevices[0].deviceId;         }         codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video')             .then(function (result) {                 codeReader.reset();                 $parameters.Value = result.text;                 $parameters.Success = true;                                 $resolve();             })             .catch(function (err) {                 $parameters.ErrorMessage = "Scan was cancelled";                 $parameters.Success = false;                 $resolve();             })             .finally( function (){                 var divOverlay = document.getElementById('plugin-overlay');                 var video = document.getElementById('video');                 if (divOverlay !== null && video !== null) {                     video.parentNode.removeChild(video);                     divOverlay.parentNode.removeChild(divOverlay);                 }             });     })     .catch(function(err) {         $parameters.ErrorMessage = "Failure during scan.";         $parameters.Success = false;         $resolve();     }); }
Replies
0
Boosts
0
Views
895
Activity
Aug ’22
When touchend and touchstart occur at the same time, only touchstart not fired
There seems to be a bug that when touchstart and touchend events are set and they occur at the same time, only touchstart does not fire. For example, when touchstart occurs on the right hand and touchend occurs on the left hand at the same time. Does anyone know the details of this or a workaround? This occurs with Safari and Chrome on iOS 15.6 and not on Android devices. The following codepen demo will help you understand. https://codepen.io/arisaito/pen/WNzymjv In this demo, when touchstart is detected a box of each color appears at the top, and when touchend is detected the box disappears. However when touchstart and touchend are repeated with both hands on an iOS device, there are frequent cases where the box does not appear even if touchstart is occured.
Replies
2
Boosts
1
Views
874
Activity
Aug ’22
javascript Audio visualisation in Safari not working
Can anybody help me to check why this code is not working in Safari (osx)? The audio is is playing, but no visualisation. I tried all the hints I found, but still no luck. Need to mention it's working fine in Chrome (osx) Thanks a lot for help function getDataFromAudio() { var freqByteData = new Uint8Array(analyser.fftSize / 2); var timeByteData = new Uint8Array(analyser.fftSize / 2); analyser.getByteFrequencyData(freqByteData); analyser.getByteTimeDomainData(timeByteData); return { f: freqByteData, t: timeByteData }; // array of all 1024 levels } I see CodePen links are not enabled here. I posted on stackoverflow
Replies
0
Boosts
0
Views
1.2k
Activity
Aug ’22
Unable to get image data from canvas
DrawImage video source data to canvas and then getImageData from canvas. The safari throws the error "Unable to get image data from canvas. Requested size was 1080 x 1920 ". // videoElement.readyState = 4 ctx.drawImage(videoElement,0,0,1080,1920,0,0,1080,1920); const imageData = ctx.getImageData(0,0,1080,1920);" iphone 11, ios 15.5 The step to reproduce this issue is not clear to me. When the issue has been triggered before, it is more easily reproduced until the safari is restart
Replies
0
Boosts
1
Views
947
Activity
Aug ’22
HTML video showing black screen but sound is playing on iOS 15
My website shows a video using video tag which worked perfectly until not long ago. The video is working but when pressing on full screen, the video is playing but the screen is black while the sound is still playing. The issue occurs only on iPhones with iOS 15 (using Safari and Chrome also). Things I've tried: I've tried playing the video directly with a URL to the actual file(to check its not codec issue) and it worked properly. My video tag has 'position: absolute;' on it and I tried removing it(even though it breaks my layout) and that didn't work either. Tried pausing the video immediately and playing it after the video loads. Tried applying a background: white; or any non-transparent color to the video tag. Tried removing auto play. Tried to disable 'GPU process: Media' on safari settings just to check if that affects anything and it didnt. This is the html: <video data-test-id="long-video" #longVideo muted controls playsinline [class.d-none]="!isShortVideoHidden" *ngIf="isPageLoaded" src="https://cdn1.someurl.com/videos/commercial_1.mp4" type="video/mp4"> </video> and the css(with the parent): @media only screen and(min-width:992px) { .fixed-video { position: fixed; z-index: 10000; margin: auto; width: 100vw; height: 100vh; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); transition: 0.4s; video { width: 80%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } } } Please tell me if you have struggled with this and know how to solve it. Thank you :)
Replies
3
Boosts
1
Views
5.1k
Activity
Aug ’22
Cookie is not inserted for XMLHttpRequest
Hi, I have the below scenario, 1.While accessing Index.html, server inserts a cookie and a JS file (request.js) 2 . request.js file collects some safari properties and posting it to the same web server like below, but during this call my cookie is missing. Can you please help? I want to retain my cookie value for the JS initiated request.
Replies
0
Boosts
0
Views
456
Activity
Aug ’22
Google Translator Javascript not working in iOS
I have one web viewer in React Native for my app, and the function of translate with Google works perfectly in the Safari browser, in my Android App, and on the desktop, but not in the iOS app This is my Google Translate code: function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'pt', includedLanguages: 'pt,en,es', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element'); comboTranslate = document.querySelector("#google_translate_element .goog-te-combo"); } function changeEvent(el) { if (el.fireEvent) { el.fireEvent('onchange'); } else { // var evObj = document.createEvent("HTMLEvents"); var event = new Event('change'); comboTranslate.dispatchEvent(event); // evObj.initEvent("change", false, true); // el.dispatchEvent(evObj); } } function changeLang(lang) { if (comboTranslate) { comboTranslate.value = lang; changeEvent(comboTranslate); } } function clickChange(){ btn_translate = document.querySelectorAll('.language'); // o que faz os menus acender; btn_translate.forEach(btn =&gt; { btn.addEventListener('click', function (e) { var lang = e.srcElement.getAttribute('data-language'); changeLang(lang) }) }) } clickChange(); setTimeout(() =&gt; { googleTranslateElementInit() // comboTranslate.addEventListener('change', function (e) {alert('a');}) }, 500); and on the app.json I have: { "expo": { "name": "MyApp ", "slug": "MyApp", "version": "1.2.0", "orientation": "portrait", "icon": "./assets/icon.png", "locales": { "en": "./locales/ios/en.json", "pt": "./locales/ios/pt.json", "es": "./locales/ios/es.json" }, "platforms": [ "ios", "android" ], "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "plugins": [ [ "expo-notifications", { "icon": "./assets/icon.png", "color": "#ffffff" } ] ], "updates": { "fallbackToCacheTimeout": 0 }, "assetBundlePatterns": [ "**/*" ], "ios": { "buildNumber": "8", "supportsTablet": true, "bundleIdentifier": "com.myapp", "infoPlist": { "CFBundleAllowMixedLocalizations": true } }, "android": { "package": "com.myapp", "versionCode": 9, "googleServicesFile": "./google-services.json", "config": { "googleMaps": { "apiKey": "AIzaSyDQjE4F3chI8Jy4FA8h45LqA7bMfngoH7Y" } }, "permissions": ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION", "CAMERA", "RECORD_AUDIO"], "blockedPermissions": ["ACCESS_BACKGROUND_LOCATION"], "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#FFFFFF" } }, "notification": { "icon": "./assets/icon.png" } } } I put console.log and alerts to see if the change in the select element of languages is being triggered by the JS, and it's all ok, I really don't know why it is not translating.
Replies
3
Boosts
0
Views
3k
Activity
Aug ’22
Unable to get Sign In with Apple to work on Firebase
Hey all. So I'll keep it short. I registered by App Service ID and Key and everything. I even enabled Apple Sign in from Firebase and got sign in with Apple to work on my Swift iOS app. Now I want it to work on my web app via Vanilla Javascript. When I run the following code on my frontend after initiating firebase, I don't get anything. Like absolutely no error in console or any kind of pop up. I'd appreciate if someone could tell me what I'm doing wrong. Thanks in advance! const provider = new firebase.auth.OAuthProvider('apple.com'); firebase.auth().signInWithPopup(provider).then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // You can also get the Apple OAuth Access and ID Tokens. var accessToken = credential.accessToken; var idToken = credential.idToken; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); // Result from Redirect auth flow. firebase.auth().getRedirectResult().then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // You can get the Apple OAuth Access and ID Tokens. var accessToken = credential.accessToken; var idToken = credential.idToken; // ... } // The signed-in user info. var user = result.user; }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); }
Replies
0
Boosts
0
Views
1.4k
Activity
Jul ’22
Multiple redirection / http 302
An http post request that generates a redirect from one domain to another does not work on IOS but works on all other browsers. we have a 302 error. Any workarounds to this issue?
Replies
0
Boosts
0
Views
721
Activity
Jul ’22
Vimeo Javascript cuepoint events not firing on latest iOS 15.6
I have a quiz type one page website which uses Vimeo official embed player. After upgrading to iOS 15.6 it seems on Safari, Cuepoint events are not firing to IPhone 13 Pro Max (other iphones are working fine). It seems there are no JavaScript Errors on console. Has anyone else experienced it?
Replies
0
Boosts
0
Views
605
Activity
Jul ’22
Total canvas memory use exceeds the maximum limit - iOS 15 beta with Safari
With the latest iOS 15 beta releases we have started seeing issues with memory and canvases. This error is not reproduced in any of the earlier iOS versions (with any devices), it is only present in the new iOS 15 beta versions. The warning about total canvas memory is always followed with a javascript exception trying to do rendering on the canvas: This is an history of it working in a iPhone 12 pro max with iOS 14.7.1. This is history of it not working with an iPhone 11 with iOS 15 beta 5 (confirmed with beta 4 as well) There are a couple of observations we've made: It seems it is more easily reproduced by repeatedly triggering the new url bar and rotating the device a lot. Clearing History and Website Data can fix the issue temporarily When it is reproduced it can easily be reproduced again, even when reloading the page.
Replies
3
Boosts
0
Views
7k
Activity
Jul ’22
Strange Safari behaviour
Deleted for privacy and wrong section argument.
Replies
0
Boosts
0
Views
445
Activity
Jun ’22
Java Virtual machine for Monterey
I want to install a GitHub repository and nvm command therefore I need the java virtual machine. When I check the "java -version in zsh I always get this Error Error: Could not create the Java Virtual Machine. What would you suggest since it is installed JavaVirtualMachines/jdk-18.0.1.jdk?
Replies
2
Boosts
0
Views
4.2k
Activity
Jun ’22
IOS 15: WebAuthn catches error but still prompts user
Hi. The registration process with WebAuthn works fine and expected. As we use the same code on both android and ios, we dont use discoverable credentials, but instead saves the credential-id in a cookie. If an user deletes his cookie, we can not see if the user has registered previously without prompting the user for registration again. This is okay, and if we get an InvalidStateError (because the user is already registered) we let the user think he has registered again, and just creates a new cookie. The problem is: When the navigator.credentials.create is called, the InvalidStateError is catched immideately, before the user have time to do anything about the faceID prompt which shows. When the InvalidStateError is caught, the Registration Completed page shows. This means the completed page is shown behind the face-id prompt, which is very confusing for the user. How can the registration be completed if the face-id prompt is not finished? On Windows, the error is not thrown before the user has completed the faceid prompt, which means the registration-process is experienced exactly as a first-time registration. Is it a bug that the prompt is shown after the error is thrown? Any tips to how i can work around this? If this is not the right forum to ask - where is a better place? Best regards, Nina
Replies
1
Boosts
0
Views
904
Activity
Jun ’22
[bug] iPad Safari fullscreen error when triggered following a pointerdown event
When triggering a webkitRequestFullscreen event in response to a pointerdown event, the result is a fullscreen error. Using a pointerup event instead of pointerdown works fine. I'm using a <button> element to receive the event and in the event listener callback I'm attempting to call webkitRequestFullscreen() on a div. Is this expected behavior? note: this was observed using MacOS Simulator: iPad 9th Generation - iOS 15.4
Replies
0
Boosts
0
Views
991
Activity
Jun ’22
WKWebView javascript execution when app is in background
hello. Switch the app to background when loading a webpage in webview, webpage's JavaScript will stop working. Resume the app webpage fails to load and the screen is not drawn. Any solution?
Replies
0
Boosts
0
Views
702
Activity
Jun ’22
How to make the button "Share to Instagram Story in Tik Tok?"
Hello, i would like to know if anyone knows how the Tik Tok button to works to share a video from this plataform in Instagram stories, that is, the button opens editing mode with the video already included. I would be needing to make a similar button for an application. i tried entering URLs from my phone like: "//instagram.com/create/story" but it doesn´t even open the story editing mode. Thank you very much.
Replies
0
Boosts
0
Views
738
Activity
Jun ’22
JavaScriptCore Date Constructor Works Differently than V8
Date objects should be able to be constructed with strings formatted as YYYY-MM-DD . On Chrome-based browsers, both of the following are valid: new Date("2022-06-01") new Date("2022-6-01") although the second one does not strictly follow the format. However, it is extremely convenient to work with since you do not have to check for the string length and determine whether to add a 0 in the beginning. Yet, on my Safari browser, the code: new Date("2022-6-01") returns a date object of an invalid date. This is simple to fix, yet it poses an inconvenience during development. Is there any way to let Apple improve its JavaScript engine?
Replies
1
Boosts
0
Views
1.4k
Activity
May ’22
How can I check if the website is in WebClip mode?
I want that a JavaScript Check if the website was opened from safari or from a webclip. how can I?
Replies
0
Boosts
0
Views
670
Activity
May ’22