I'm looking into the file upload on IOS6 and know that this is possible with the usual link:
<input type="file" accept="image/*" capture="camera">
Altho, the most tutorials and issues I can find are mostly about the upload function. In my case I need to be able to take a picture inside mobile safari with the build-in camera.
I have set up a page to test this (no code, only the link I posted above), and when I take a picture the app (camera app) crashes without actually saving my picture. Is this normal behaviour? Do I need to add some code to upload the picture first? Altho this last thing doesn't make sence to me, since you need to add an already saved picture to a file upload link.
Any help in this would be greatly appreciated :)
You should not need anything more in the code to avoid crash. It should work the same as choosing a picture from the library. I have tested this on an iPhone 4S with iOS7 and my Safari crashes too. It does not crash every time if I take a picture with the front facing camera (smaller picture?). It also works if I only load the picture from the photo library.
This is a bug in iOS I think. I managed to go around it by restarting my phone. Sadly there is not much we can do on the web side of things, except inform the user that the feature may be buggy.
Probably the best recommendation, until Apple provides a fix in a future update, would be to caution your user to close down the rest of their Safari tabs. (This lowers the memory usage and prevents Safari from crashing when doing the 'Take Photo' path through file upload).
Related
EDIT: Quickly gonna mention that in mobile, the phone cannot be on vibrate/silent mode or else the sounds won't play for whatever reason.
I created a tune-by-ear guitar tuner using React and Howler.js and so far everything works great on Desktop.
It currently lives here: https://rickyd-dev.github.io/sonus_app/
My source code: Sonus Repository
When testing my site on mobile, upon loading the page, the sounds work great. You can tap on the strings and the sounds turn on no problem.
Now, if I were to leave my phone's browser to go into a different app like Twitter for a little bit and then if I come back to my browser with my tuner site still on there, the sounds no longer turn on upon tapping on the strings. I have to do a manual refresh of the page in order for the sounds to play normally again.
I have tried many things like testing the Howler.ctx.state, unloading my sounds and then immediately having them reloaded, and nothing seems to work when it comes to this issue. They all play initially then after leaving and coming back the sounds stop.
I tested the Fender website's guitar tuner (Fender's online tuner), and they do not have this issue. I can load up the site, play sounds, leave the browser to browse reddit for a minute, come back and the sounds STILL play no problem.
I tried looking at their source code and I have also tried debugging by connecting my phone to the computer and testing different things from the mobile browser but I'm not having any luck finding what Fender is doing different.
Does anyone know how they're accomplishing this? That is the ONLY issue that I'm having with this and I have not found a way to tap into the problem. I just want my sounds to play even after a user comes back from another app without having to manually refresh.
I've to share a mobile screen and display it on a browser using WebRTC. I then have to take control of the mobile screen.
I've researched this and know I can share a screen browser to browser using chrome(with extension) or firefox(after certain flags are set). Some information I've read suggests that screen sharing on mobile is not possible and then another article said it was but I think they meant be sharing through the chrome browser on a mobile.
Some of the the information and posts I read are dating back to 2013/2015/2016 and I wondered if there is any new information on this?
Is screen sharing on mobile devices(android or iOS) possible using webrtc now?
is screen control on mobile devices possible?
Thanks Andrea
I also investigated this topic a few days ago and it seems to me we are on the verge of the next step and the technology hasn't totally settled yet. Screencapture is mostly working with (very) up-to-date browsers and (still) an extension or some kind of white-listing. I could not find any kind of hint that a "remote control" mechanisms are part of webrtc and the getUserMedia implementations. Unfortunately.
ICE seems to work fine for most scenarios (if you don't mind waiting a minute) and Tickled ICE adresses the problem in an interesting way.
Mobile is very confusing indeed as the market is even more heterogeneous.
Maybe we should open a wiki or a chat channel or whatnot they habe nowadays on stackoverflow :-) I think I will have to read about this "community wiki" checkbox down there...
The most promising thing I could find was
https://inthelocus.com/
Still trying it out in different scenarios.
[This might not be an answer...] I was on the same topic and then I noticed there's an existing tool (SDK) to serve the similar purpose: https://cobrowse.io. It works good in both the demo video and the simulator web page. Yet I'm not sure if it utilises WebRTC...
I've implemented the Twilio Video quickstart code in my project using ReactJS and after a few tweaks, it all seems to work fine on chrome and firefox from my computer, but when I try to use either the preview or make a call with another client from my mobile web browser, the video does not move. It is stuck, but the video streams will work fine if I am moving the screen with my finger or if my finger is just on the screen, but will freeze on it's current frame the moment I stop moving the screen. I am not sure if this is an issue with the way Twilio attaches the video or if there is just something about mobile browsers that I don't understand when attaching video streams.
Thanks for the help
So there are a few things that could be going on here. Currently and also for the foreseeable future, Twilio Video will require the A6 system on chip, so older devices like an iPod Touch (5th gen) for example, would not supported.
https://www.twilio.com/docs/api/video/system-requirements
You might try to modify the bitrate indirectly through modifying the resolution. There is some sample code (in Swift) demonstrating this API:
https://github.com/twilio/video-sample-ios-capture-render/blob/master/VideoSampleCaptureRender/ViewController.swift#L205
Lastly, reporting of connection information through the conversation delegate does receive statistics:
https://media.twiliocdn.com/sdk/ios/conversations/releases/0.22.0/docs/Protocols/TWCConversationDelegate.html#//api/name/conversation:didReceiveTrackStatistics:
however there is not an automatic way to adjust the resolution based on these statistics.
Hope this helps to point you in the right direction. Please let me know in the comments what you find out.
well i've made a responsive website which handles well in mobile devices. Now there are some Phonenumbers on the website which my cliënt would like to be clickable on any Phone so the visitor can call directly. I found that making a link of the phonenumbers works like so:
make a call
This triggers mobilephones to call the number. But it also triggers the webbrowser on any other device to follow the link, which results in "page can't be found"
I'm looking for a good anwser to tackle this problem. I've been searching for a while now but i'm getting a bit tired and frustrated.
I think i've come with a solution but i don't excactly know how to put this in the html.
There are several ways to conditional comment browsers in html. If i could do this with the link part and rule it out:
<!--[if any **none mobile** webrowsers: don't read:]>003164646464
And all mobile browsers read the link.
It seems to me, that this is the most easy way to do this, but i could be wrong...
I hope that someone can give me any pointers, I really appreciate your idea's and help!
THANKS!
There is no easy way to achieve this. You can use different approaches depending how accurate you want to be:
WURFL - most accurate, allows to check user-agent and get browser / device capabilities
You can try parsing user-agent by your own detecting OS - check this answer Detecting a mobile browser
Use css media queries to target devices with small screen
Unfortunately there is no silver bullet for this (at least I don't know one).
Hopefully someone may know what I mean and where I may find such a thing.
I'm creating a new website and as part of it i'll be offering mobile web design. What I need if possible, is something that, should a user click on one of my examples, it load up a mobile browser (not the mobile site on a normal web browser). More like an emulator that will allow them to see working examples of potential sites.
Is there anything out there that will do this, or am I looking at opening a new window to a set size and displaying the site within it?
Please Note --- Whilst writing this out, I may have stumbled across a potential floor, as this may expose code.
I'm thinking I should perhaps consider putting JPEGs or PNGs that they can scroll through so not to expose the code behind the mobile site itself?!
If there is such an emulator or the likes that is available (and doesn't show code in the background) i'd be more than happy to be pointed in the right direction!!
Thanks
Paul
Please correct me if I misunderstood your question, but it sounds like you want to let users preview a responsive design at different screen sizes while denying them access to the source code.
If that's the case, rendering the design as a flat image file for previewing purposes is your best bet, even though it would sacrifice any interactive aspects of your design. It's a rough trade-off.
I assume you have a legitimate reason for hiding the code. But if haven't already, you might want to ask yourself what's motivating you to conceal your source code in the first place. The web is built on open standards and accessibility; you'll have to go through a lot of contortions to hide static assets like HTML, CSS, and javascript from a browser. I understand if you're concerned about a sketchy client using your work without payment, but that's more of a contracts/legal issue than a technical one.
That said, you can always place the mobile site's main content (or an image of the content if you must hide the code) within a div of a specified width and height to visually emulate a phone. Wrap it with some phone graphics, control the overflow with overflow-y: scroll; and overflow-x: hidden; and there you have it.
Web Design Weekly is a nice example of this concept in action.
EDIT: it occurred to me that another option you could feasibly explore is video instead of static images. Always an option if you need to wow a client. Typeform.com is a good example of what I'm talking about.