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.
Related
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.
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.
In my project as per client we need to access and upload picture from photo gallery to site. It is for iOS, Android and blackberry. I know we can access it for android using opera browser but my question is can we access it for all mobile device and from any device browser.
Yes, in fact iOS even has multi-upload functionality built in as well. I'm not sure about blackberry, but I'm almost positive that any mobile device has this feature. The best thing you can do is just more research online and testing on them.
HTML(you don't need javascript to do it)
<input type="file"/>
Question:
Is it possible, with some sort of technology, to integrate voice recording into a mobile web application?
Some background:
I have been working on a mobile web application just for my own enjoyment and research. Everything seemed to be working pretty slick with HTML5/CSS and JavaScript for the client application, although it looks like I need a third party technology for voice recording. I had a pretty good solution working with Flash, but after testing it with my IPhone, I had remembered that they don't seem to support flash which is disappointing because I had a pretty good solution going.
Voice Recording Requirements:
1. Must work with both iOS and Android.
2. Must work in most current versions of Firefox, Google Chrome, Internet Explorer, Opera, and Safari.
3. Must work within the framework of a mobile web application.
4. Must be able to record without being actively connected to the internet.
5. The client application shouldn't require the user to alter their phone OS.
I tried to be as specific as possible to assist in allowing you to answer this question accurately. If anything is unclear, just let me know in a comment below, and I will further clarify.
Check this http://www.html5rocks.com/en/tutorials/getusermedia/intro/
HTML Media Capture <input type="file">
Work for most of the mobile browsers, but it works not well because it will require native recording app and needs to active manually.
getUserMedia() and WebRTC
So far, only the Chromium support it well in mobile.
So, I gave up the web app. Hybrid app is the solution.
If you want to try the hybrid app for recording, you can check the Cordova Plugin https://github.com/emj365/cordova-plugin-audio-recorder-api that I created for recording task in the hybrid app.
It looks like in the years since asking this question a solution has surfaced. This solution has come in the form of MediaStreamConstraints dictionary audio property.
The Web API docs from Mozilla have a very nice example shown below:
document.getElementById("startButton").addEventListener("click", function() {
navigator.mediaDevices.getUserMedia({
audio: true
}).then(stream => audioElement.srcObject = stream)
.catch(err => log(err.name + ": " + err.message));
}, false);
Resources
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio
If you want to record it as an audio, I think you can only make it for Chrome dev, Chrome canary, Opera next, and some mobile browser.
Using the WebRTC getUserMedia() API then make the blob URL of the audio data URL to save it.
If you want to record it as text maybe you can use <input -x-webkit-speech/> for webkit browsers. Make an event that make every-time it stop recording it'll add the currently recorded speech to an element and start recording again. Finally, make a blob URL to save it as a text file.
I'm doing some rough development on the iPhone. I'm writing a native iPhone app, which uses an UIWebView object to load web sites with javascript. I find very difficult to debug the javascript code on an iPhone.
What are the methods/techniques available for this matter?
Since Safari on the iPhone is using webkit, you could use the debugger built into desktop Safari's web inspector. While there will probably be some quirks that are different between platforms, it will give you a pretty good idea of what's going on in the interpreter.
If you have access to an Android phone, you can debug your application using desktop Chrome's full developer tools and a USB cable (very convenient).
That means the debugger, profiler, HTML inspector, etc, all running on your mobile phone, but accessed through chrome running on your laptop/desktop computer.
Android Chrome and iPhone Mobile Safari are usually more similar to each other than Desktop Safari is to Mobile Safari, the screen format will be similar, the layout similar, and you'll be able to try real touch events, etc.
https://developers.google.com/chrome/mobile/docs/debugging
It'll require Chrome, an Android device able to run the android Chrome app, and a USB cable.
You have to install and use the ADB console command, but once its working, you'll have the full chrome developer tools interface available for debugging mobile.
Similar to Adrian Harris, it is possible to debug any website on the iphone by creating a dummy project in dashcode, clicking on "Mobile Safari" and then "Run"
Once the iPhone Simulator opens and safari opens with the dummy project website, click on the url bar of safari, enter any public url, and when you are at the site, you can click "Pause" and the debugger will pop up after any javascript code runs. At this point, variables can be inspected, breakpoints set, etc.
I know this is an old question, but wanted to update the answers with the latest info ->
The new safari (for mac) has a way to use the web inspector on an actual iphone or ipad in real time if you have the latest software (safari, iOS6, and MacOS) and an attached (with a cable) iDevice.
You access it by enabling it in the "advanced" safari preferences on the iphone, then under the develop menu in safari on the mac. See here for more info: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html#//apple_ref/doc/uid/TP40006515
You can also access the simulators in the same way (installed with xCode).
I agree with pjbeardsley. I would add to use your web page within http://www.testiphone.com/ just so you can see what the dimensions will be like. I would definitely use Safari and the Web Inspector for it as well
I have had mixed success using Dashcode which has a javascript debugger paired with the iPhone Simulator. It is a bit tricky to get working because you can't launch it without opening a project. But as I recall, I posted the project on the web, launched a placeholder project, and then debugged the placeholder project in Dashcode. Then I navigated to my url in the Simulator and was able to set breakpoints. There were probably a few other hoops to jump through, but once it was working, it was like I had a real debugger within Mobile Safari, which was great.
Good luck