I'm making a platform which involves the server triggering Audio to be played with Socket.io. I'm trying to make a PWA for iOS using similar code, but it just doesn't work and I've heard that Safari requires user interaction (I am using this with the full screen PWA meta tag, not through Safari directly). It works fine on the latest version of Chrome on desktop.
Is there anyway to make this work?
Web Interface (uses same audio
playing and socket.io code): https://github.com/archiebaer/bithop-web-interface
No, Safari restricts audio playing quite a lot. It seems in your scenario, there is no work around unfortunately.
Related
I have a website with webrtc that works great between desktops.
Now I'm trying comunicate between desktop and mobile, video is ok but the audio has lots of noise in mobile, I'm using the following constraints for desktop and mobile:
var constraints={audio:true,video:{"mandatory":{"minWidth":"320","minHeight":"240","maxWidth":"320","maxHeight":"240","maxFrameRate":"15","minFrameRate":"15"}}};
If I change the mobile audio constraint to:
audio:{echoCancellation:false}
Solves the noise problem, but now the desktop device hears the sound with echo. How can I solve this problem? The tests that I'm dooing are in chrome(desktop) and in mobile side Chrome for Android and in a hybrid app. The mobile device is a ZTE with android 6.0.1
Welcome to the world of webrtc, probably the browser is outdated and isn't supporting the echoCancellation flag (or is still buggy).
Update the browser might resolve the issue (if you can). Otherwise maybe try another mobile device and check if it works there, if that doesn't work I only know of the if(mobile) ... else ... solution until the browser is updated.
In worst case you even have to check for specific versions to disable the flag.
I am developing a simple web application which only records a voice from microphone but I have some trouble.
HTML5 voice recording function works well on chrome and firefox desktop or android. But while using mobile browsers on iPhone even chrome and firefox it doesn't work.
I tried recorder.js and result did not change.
Is it possible to recording voice on safari or it is a missing function of safari or iOS?
May 2018 Update (because figuring this out has been tough with all the outdated info).
I found this demo that proves it is possible: https://kaliatech.github.io/web-audio-recording-tests/dist/#/test1
As far as I knew, even on the latest iOS (iOS 10), recording voice on iOS using HTML5 is still impossible. Since all the browsers on iOS are limited to use UIWebView which Safari on iOS uses as well, Chrome on iOS is not able to support any API that can be used for media recording.
For example, recorder.js which you used are built on Media Capture API. If you check caniuse.com, you will find this API is not supported on iOS. (Also check the issue here).
MediaRecorder API is also a promising API but still not supported by Apple's browser.
Check answers below for more information.
1. Record voice from IPhone using HTML5
2. Audio Recording html5 on iOS
It's now possible and "easy" to do on iOS11 for Safari! The mediaStream API is supported now. The mediaRecorder API however is not. This causes any existing examples out there to not work. So you'll have to implement your own mediaRecorder functionality by connecting the media stream to a webkitAudioContext ScriptProcessorNode and collect the stream buffer on the node's onaudioprocess event. You can then collect the iOS microphone's streaming audio data and do with it what you want, most likely merging it into a wav file for upload/download. This works for any browser that supports the Media Stream API.
Two gotcha's:
- iOS Safari likes to deallocate any AudioContext that wasn't created on the main thread (on a tap) so you can't initialize it on the device media access accepted callback.
- The scriptProccessorNode wont fire any audioprocessed events unless the input AND output are connected for some reason.
Since iOS11, Safari now supports Media Capture API:
New in Safari 11.0 – Camera and microphone access.
Added support for the Media Capture API.
Added ability for websites to access camera and microphone streams from a user's
device (user permission is required.)
Announcement by Apple - broken link as of Jul 2018
A copy of the announcement on someone's blog
Therefore recorder.js will work now.
I'm using the new iPhone 11 ProMax, with iOS13.3, and have been trying to build out a web app with voice recognition services via HTML5 to work in safari or any browser on my iPhone. It seems iOS developers have blocked audio / video recording at the os level. There is a limited workaround however that might be useful for someone coming here as I did.
https://blog.addpipe.com/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/
Basically, if you go into advanced settings for safari you can enable the mediaRecorder. Their demo works with video capture, I have not seen it with pure audio yet.
Safari on iOS 11 does NOT support the 2 standards which would make audio (only) recording possible (and easy to implement):
HTML Media Capture for audio (spec, correct syntax ) - audio recording should be passed to a native app which should pass the result back to the browser for upload (it works for video and picture)
MediaStream Recording API (spec, demo) - allows you to record to a blob directly in the browser. The recording can be downloaded or uploaded to a web server.
I am trying to record a video with audio (for desktop it will use web cam and headphone if any, for IOS and Andriod it will use phone camera and mic).
Tried to implement using (http://www.html5rocks.com/en/tutorials/getusermedia/intro/) but when I tried the given demo its not working with Andriod and IOS even not working in firefox too.
Tried to implement using (https://www.webrtc-experiment.com/RecordRTC) too but we have different js for firefox and chrome and its not working with IOS and Andriod.
If anybody know a solution which one work for chrome, firefox, andriod and IOS than please reply.
Waiting for the response, in the mean time trying my own to find out some solutions.
I'm playing audio in my HTML5 app using:
createjs.Sound.play('boom-sound');
I then imported the project to Intel XDK. Now the game is playing smoothly in the emulator but the no sounds are there. I also tested after building the app for android and no audio was there.
Any idea, anyone?
soundjs does not work that well, I've also had problems making it play sound on IOS devices in the past. To fix this problem I now use howler.js.
SoundJS has run into trouble in environments like Intel XKD and PhoneGap because it defaults to using the WebAudioPlugin. While Web Audio may be available, it needs to load audio through XHR which will not work with local files.
Loading files from an external server would get around this, but require the app to fetch data which is less than ideal. Using createjs.Sound.registerPlugins([HTMLAudioPlugin]) would get around this but HTML audio playback is sometimes limited on mobile devices.
Luckily, SoundJS recently added a CordovaAudioPlugin, and since Intel XDK is based on Cordova this should give you full SoundJS functionality. You'll need to grab the plugin and the latest SoundJS-NEXT from github. Then you can setup the plugin with registerPlugins
createjs.Sound.registerPlugins([CordovaAudioPlugin]);
Hope that helps.
I want to stream my webcam to my website. Maybe inside < video >, < embed >, or even < img > tag.
What would be the best way? I've tried VLC-player and webrtc.
The problem with VLC is that I cannot manage to stream outside my LAN. Inside my LAN it is working fine, but I cannot connect through the internet. And I also don't know how to implement it to my website.
The problem with webrtc is that it is not supported by ios. It works fine on windows and android, but is failing to run on iphones and ipads (I didn't tried it on mac, but I think it will work).
Maybe there is some code in javascript, html or something else?
For iOS devices, webrtc is not fully supported. However, you CAN build the Native C/C++ API for them and build a locally running applications that can access your stream(not from a webpage but currently your only option on iOS).
OSX, Windows, and Android's versions of Chrome should all work well together(I have tested this myself and have gotten streams to work between all those devices without issue) and access you stream.
For grabbing your camera's stream, you could grab it through chrome, continually stream and dynamically handle peer connections as they come in from your signalling server(you can use the same local stream for numerous peer connections). You could also use a natively built application using the WebRTC API but that will be more complex than manipulating your stream in chrome.