I want to make a react-native app having the capability of video streaming from a mobile app to a connected browser user. On top of that, I want to overlay some application components so connected users can see video streaming as well as some of the application UI.
For an example take a reference of the below-given image. Here, video streaming is running in the car showroom and there are a few app components shown as an overlay of the video like an app menu and a car image.
I want to achive same functionality and using VideoSDK platform for video streaming service.
So far I have created react-native app and able to stream video through camera to the connected browser user.
Next, I want to add my app menu on top of the video as per the image and therefore i am thinking screenshare with combination of video sharing is way to go.
The above image is the actual implementation using video SDK in the browser but as you can see screen share window is opening in a totally different context which is not the expected implementation.
Can someone suggest how can I achieve the functionality of video streaming having the capability of app overlay components?
I have reviewed your requirement and I am glad to inform you that we do have application with same requirements, for further discussion and demos can we connect over mail i.e. karan10010#gmail.com
Related
I am planning to build an audio editor app with react-native. The functionalities include having a textbox where user can provide the URL for any audio file. Once the file is loaded on the UI, it will be played with a Waveform UI. User can select the start and endpoints of the audio by moving the slider on the waveform and once it's fixed, the app will get the start-time and end-time of the selected waveform, which will be then sent to the backend to cut the audio(probably using FFmpeg library).
I need but can't seem to find any react-native library that allows the user to interact with the waveform.
The UI can be somewhat similar to:
I don't believe that there is one that allows users to interact with the waveform out of the box.
You could use react-native-audiowaveform to show the waveform, and then capture the user's touches.
I'm developing an Android app using Ionic for music streaming, like a personal Spotify. I can easily play an audio file using Streaming Media plugin, but it seems that this plugin was made for video purposes, because it always brings the player to the front in fullscreen, so you can't navigate through the app while the music is playing, you also can't lock your screen or the playback is stopped.
Is there any way to stream music in the background? Like when I tap the song I want to play, it just starts playing without bringing in another screen? (like you can easily do in AndroidStudio with MediaPlayer). I've search it anywhere for the past week and I just can't find any solution.
I realized Background-Audio in my ionic2/3 Project with
cordova-plugin-media 3.0.1 "Media"
cordova-plugin-music-controls 2.1.4 "MusicControls"
and to workaround some issues on ios I need to add this plugin also
nl.kingsquare.cordova.background-audio 1.0.1 "background-audio"
I making mp3 player with ionic. I use "cordova.plugins.backgroundMode.enable()" for play music in background if close the app.
But when press hardware back button on Android is "stopping and closing" the app instead of just "closing and go back".
You have to use something called Android Services.
From the docs:
"A Service is an application component representing either an application's desire to perform a longer-running operation while not interacting with the user or to supply functionality for other applications to use."
Here's the excellent official guide to using services to get you started: http://developer.android.com/guide/components/services.html
Here's a good tutorial on building an audio player: http://www.androidhive.info/2012/03/android-building-audio-player-tutorial/
Here's a video tutorial for building a streaming music player: http://www.youtube.com/watch?v=LKL-efbiIAM
I am relatively new to SO, and this is my first question so I hope I get the format & question information correct. I am looking for a plugin or tool that can assist me with a specific display issue.
I have a mobile application that is deployed to both Android and iOS devices. I also have a mobile web application that renders very much like the actual mobile application in the mobile device web browser when the user browses certain parts of the server back end cloud service website on their mobile device. So far so good.
However, when the user browses these parts of the cloud service website on a desktop/laptop, they get the web application view - some of it stretched and not ideally optimised as this is really for viewing on mobile devices. The client would like that a user, on desktop/laptop browser can see a mobile 'simulated' view of the web application.
It has to happen when the user navigates to the page, not through installing chrome plugins etc
I see the ideal solution being something like an image of a generic mobile for when browsing on desktop, centred on the desktop screen, inside of which the web app view is rendered. Is there is plugin/tool that someone out there for this, I have done quite a bit of research and can only find information on emulators for testing etc. In a way all I am looking for is an image that dynamically resizes inside of which a view can be rendered, that looks well across many desktop screen sizes/resolutions etc. Rather than go about this myself (it would be a bit of a CSS learning curve for me) it would be great if something like this already existed.
An implementation like the above would free up real estate on the screen for other items like links and form buttons the client wants
Any direction on this would be greatly appreciated.
I am developing a live video streaming solution for a client with the following requirements:
- Stream live video to high-end Android and iPhone devices, from a mobile-optimized web app (NOT native apps)
- The video should not be full screen but partial screen, so that other HTML content can be displayed below the video
So my question is, what is the video format/technology that allows live video streaming in both devices? I've heard about HLS but I am not sure it plays in both devices.
And also, is there a way to prevent the video from going full screen? I've come across this in SO http://broken-links.com/tests/video/, but it's for on demand video. Could it also apply for live video streaming?
Thanks in advance
You should set allowsInlineMediaPlayback attribute of your UIWebView instance to YES for iOS.
From Apple's UIWebView reference page:
allowsInlineMediaPlayback
A Boolean value that determines whether HTML5 videos play inline or
use the native full-screen controller.
#property(nonatomic) BOOL allowsInlineMediaPlayback Discussion The
default value on iPhone is NO.
In order for video to play inline, not only does this property need to
be set on the view, but the video element in the HTML document must
also include the webkit-playsinline attribute.
For Android, AFAIK default behaviour of Android's WebView is not triggering media player with fullscreen. You should be able to use WebView as is.
You can get information about supported video formats with those links:
iOS Media Layer Supported Video Formats
Android Supported Video Formats
There are two major industry standards, I guess it won't be a problem if I understand your concerns correctly.
Hope that helps.