I'm working on a tabs based React app in Microsoft Teams using #microsoft/teams-js. The app is supposed to work in Browser, Team Desktop Client (iframe in Electron based client) and Teams Mobile client (iframe in unknown setup). I've been able to access image and video files, both uploads and recording/capture in both Browser and Teams Desktop Client following documentation. It were basically file inputs and navigator.mediaDevices.getUserMedia() methods of HTML5.
But the Mobile Client requires calling media.captureImage() method of #microsoft/teams-js library. The official Documentation states that we will only be to upload or capture photos in the Mobile Client and no video access is possible, but I was able to get video upload to work using <input type="file" />. By using the camera="camera" prop I was even able to launch the native camera in mobile browsers (but not desktop browser, or the Teams Clients).
<input type="file" accept="video/*" capture="camera" onChange={uploadVideoFile} />
I want to know what other way is there to access camera for video recording in Teams Mobile - be it native camera app or in app Media access.
The APIs supported by Microsoft Teams are mentioned in documentation. For other APIs please help by raising it on user voice.
Related
I'm building a web application that creates a slideshow mp4 video. It will be uploaded to S3 and viewed through HTML5 . The goal is to share it on instagram but instagram doesn't allow direct sharing through web. Hence, the alternative is to get the user to download it to their mobile device and upload it manually through the app.
On Android, I'm able to download the video using it's video controls or through <a href='s3-video-link.mp4' download>
However this doesn't work on IOS. How can I download a html5 video onto the mobile device? Can I download directly from s3 somehow? Or is there any possible option to get it to upload to instagram?
The sandboxed nature of iOS means that while Safari can access and download a file unless there is an app registered to handle that filetype that immediately accepts it then it is lost to the user.
If the user has the Instagram app installed, then you could use their custom URL scheme to reference the asset, but the documentation seems more targeted to images than video so YMMV.
There have been some attempts to reverse engineer the APIs that their app uses, and create ways around their current limitations, but nothing that would address your requirement (the various sharing widgets that target Pinterest, Facebook etc don't seem to support Instagram so it's a common problem). Might be worth reaching out to their developer support folks?
Does there have any way to help me streaming devices's camera on web page?
I need to keep show it on html5's video tag can't use like <input type="file" capture="camera">this code or Native Code.
thanks for answer.
Unfortunately, like you states, WebRTC is not supported on iOS devices (keep yourself updated using this page). streaming a video from a web page on an iOS device is not possible using conventioal HTML or Javascript methods. You can upload a video element, but not stream it. That would require access to navigator.webkitGetUserMedia or navigator.GetUserMedia, which again, is not supported on iOS browsers (yet).
I'm working on a phonegap project using Html5 & Javascript.
I want the user to upload files. When I add this:
<input id="image-file" type="file" />
It works on the web browser, but when I open it on the mobile, it's disabled.
Is there someway to upload files with mobiles ?
You need to talk to the native libraries for the specific platform.
For iOS for example, you need access to the photo albums, in order to upload photo's. This needs to be done with the API from phonegap to talk to the iOS native libraries.
Every OS has a specific API to do this. I am not much into phonegap but I know this is there. Perhaps even 1 API for all OS's
I want to make a very simple web app that takes the audio signal from the phone's microphone and varies some simple graphics on the page in as near to real-time as possible.
I'd prefer the app to be web-based (rather than iOS/Android apps) so that users can be directed to the page in a more rapid way. (I.e. go to sh.ort/url and the web app starts straight away)
Is this currently possible?
I'm not sure how well supported the web audio API is, or some of the more modern HTML5 features.
Thanks
This gives you a nice tutorial on how to record audio through the HTML5 API: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Unfortunately, as seen in this post, Apple doesn't support any API for this yet: Mobile Safari Audio Recording from Microphone
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.