Now that iOS 11.3 is out with the updated version of Safari.
Has anybody been able to successfully use the getUserMedia APIs to display the camera output onto a canvas?
e.g We've opened both
https://simpl.info/getusermedia/
and
https://webrtc.github.io/samples/src/content/getusermedia/canvas/
in Safari, they both ask for access to the camera - however, neither of them render anything but a black square
e.g
Adding a playsinline attribute to the relevant <video> tag should do the trick:
var video = document.getElementById("video-element");
video.setAttribute("playsinline", true);
I've also found this bug difficult to replicate. And judging from the comments above, I'm not sure it's due to iOS version changes alone. Moreover, I'm unable to find any official documentation on the topic.
Nonetheless, here is some related reading material:
See this issue on GitHub
And this StackOverflow question: iOS 11 getUserMedia not working?
Edit: The WebKit BugZilla thread was mentioned in the GitHub issue I referenced above, which seems to be the closest thing to "official documentation" available.
Related
I'm creating a 1-1 calling application and seem to be encountering a problem with Safari ios15 to another safari mobile browser where the MediaStream is available but when attaching this to a <video> tag remains a black screen / nothing playing on the <video> element.
I am using PeerJS to establish a connection between the two and using peer.call() and peer.answer()
I am using navigator.mediaDevices.getUserMedia to start streams from both peers, this is working fine on all other devices with the exception of Safari on iOS 15.
I am also using setting the attributes for the <video> element to playsinline and autoplay with the addition of muted on the local stream, as other fixes have suggested but they have been no good.
Any ideas?
I had a similar issue with iOS 14.6 so i rebuilt my app in Flutter over a weekend with a few IPAs. Wasn't too difficult and had it live in both the app stores by the Tues afternoon. Helps if you port over keys too and copy any keyfiles across.
Docs are here.
Remember, expression closures have been deprecated.
I believe the issue is fixed in iOS 16.1, and was related to navigator.mediaDevices.getUserMedia always throwing an unassigned in Safari. This happens to Chrome on iOS too as Apple force google to 'reskin' Safari in order to force the user into the ecosystem, and won't allow devs to use another engine. Worth a read up if you can, loads of articles across the web.
First of all, I wouldn't be using safari. But if you're that way inclined, I'd use Brosix. What do you mean it doesn't work for iOS 15? Just use facetime. Alternatively, have you heard of Zoom app?
The video element is deprecated. Just use embed instead.
<embed></embed>
Just like above.
Have you not just forgot to run composer?? Sometimes the problem can be overcomplicated, double check the simple stuff.
I've been scratching my head for the past week and still cannot find a clear answer regarding this issue...
Basically, I'm building a desktop app for screen/desktop/window capturing using Web API's.
Seems that on Mac, mouse cursor does not appear in the stream. Please see https://bugs.chromium.org/p/chromium/issues/detail?id=238434 and
https://github.com/electron/electron/issues/8278
But somehow, a Chrome extension exists and works perfectly fine.
Can someone please explain how to successfully record screen using Web technologies to avoid ffmpeg and native scripts? How did those guys manage to overcome this issue on Mac? Does this issue actually exist?
Thanks.
It seems to be a bug where the cursor is not recorded when external displays are hooked to your device.
In my instance, I've got two monitors hooked to a Macbook Pro.
A workaround is unhooking your displays or setting your displays to mirror.
I haven't been able to test a set up with a Mac Pro or Mini hooked to just one or multiple displays.
I created an issue in the Chromium bug report.
This has been fixed since Chrome 56!
I'm breaking my head for few days trying to solve this and can't seems to find answer.
I'm trying to build a proof of concept for video player using HTML5 that works on Android and IOS, the trick is that at certain times i need to display objects on the video itself.
Now i would normally use the Video on Canvas or Video tag to solve it and then just create a layer on that with whatever additional data i want synced and triggered by the timer (on my specific example i've used PopcornJS to trigger time-based events).
NOW, it works fine on normal desktop browsers and it works well enough for android
but it seems that Safari won't render it no matter what... it insist on opening the video in it's own player that disregard any additional JS/HTML.
Ref about the issue can be seen here.
Afraid it isn't currently possible on iPhone in Safari. I've been working on an interactive presentation web app and have encountered the same problem.
This question covers the problem of full screen only video on the iPhone. The answers mention the webkit-playsinline attribute but point out that it only works inside a UIWebView object, not in Safari.
Hopefully this will change at some point in the future.
I'm working on creating a FPS-type game for the browser using WebGL/Javascript and have been unable to successfully implement the very recently added "Mouse Lock" feature to Chrome and Firefox.
I have tried the example code from all three of these sources to no avail:
http://code.google.com/p/chromium/issues/detail?id=72754
http://blog.sethladd.com/2011/09/mouse-lock-for-html5-fps-games.html
http://jsfiddle.net/jdias/3dqBL/
So, that leads me to my question. What is the correct way to lock the mouse in the latest versions of Chrome and Firefox (Minefield)? I would really love to get this working!
Thanks in advance.
Mouselock actually hasn't been implemented in Firefox, but there is an experimental build located at: http://people.mozilla.com/~tmielczarek/mouselock+gamepad/ . With google Chrome, get the latest version and go into about:flags and check --enable-pointer-lock.
I hope that helps.
I have the following javascript being called to request a focus when page is loaded.
This code works 100% OK with Firefox and IE7, but Chrome and Safari do not seem to move the focus at all. How to make it work with all browsers?
document.getElementById("MyFlashFile").focus();
It took me hours searching the Internet, but finally I found a solution that works on the lastest versions of IE, Firefox, Chrome and Safari.
The following code solves the problem for good:
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script>
function setFocusOnFlash() {
var f=swfobject.getObjectById('myFlashObjectId');
if (f) { f.tabIndex = 0; f.focus(); }
}
</script>
</head>
<body onload="setFocusOnFlash()">
This example assumes the flash is embedded using the SWFObject library. If not, you should set the f variable to the Object or Embed tag which holds the flash movie.
Edited on 5 May 2012: Well, unfortunately it seems that the tabIndex workaround no longer works for all combinations of browser (Chrome/Safari) and operating system.
For instance, currently Chrome 18 on Windows fails.
See the link below, provided by Christian Junk, to get the status of the problem's resolution.
Unfortunately there is no way to ensure that you can set focus to a flash file that works in all browsers. IE and Firefox have solved this problem (for the most part), but Chrome and Safari are both based off of Webkit which does not have a solution.
If you ever notice on YouTube or other video / flash site that the first thing you see is something to entice you to click on the player, that is due to this problem.
One developer came up with a clever workaround, but it does involve adding some ActionScript to your flash file, this can be a pain in the ass if you are building a generic player.
Gary Bishop: Fixing Firefox Flash Foolishness
Another sort of solution is to set your wmode to opaque. I've heard this works in some situations, but will screw up cursors in text areas. I haven't had much luck with this either, but you can give it a shot.
You can find more information about the no focus bug on bugzilla.
It seems that there is a bug in Chrome:
"window.document.getElementById('swfID').focus() not working for flash objects"
http://code.google.com/p/chromium/issues/detail?id=27868
I've tried to find a workaround but I was not able to find one ;(
Regards,
Christian
In addition to Cláudio Silva answer , you need to set wmode="opaque"
Ensure this code is being called after the entire page has been rendered. It's probably being called above the HTML it refers to, so the element will not exist yet.
Various JavaScript frameworks have utilities to tell you when the DOM is ready.