React Native Video HTTP Video Streaming - reactjs

I am using React Native with an Express backend which is handling the video streaming.
I am using this GitHub project as the backend - https://github.com/Abdisalan/blog-code-examples/tree/master/http-video-stream - which basically sends back a chunk of bytes (video data) to the client in a response.
I ran into a problem trying to implement this into my application using react-native-video and expo-av (tried both).
My problem is, when I try to play a video like this it does not work.
<Video
source={{
// it's without file extension (backend provides the content type)
uri: `https://www.apiurl.tld/video/video_id`
}}
/>
Is there any possible solution to play a video in React Native like this?

Related

React Native - Multithreading

I have a mobile app built using react-native.
With this app, user takes hundreds of photos
The photos need to be uploaded to S3 ASAP
Wondering if react-native supports multithreading so that we can process uploads faster
Yes, you can use z.B. react-native-workers.

React - upload a video with youtube data API

I'm trying to upload a video on youtube in my react app using Youtube Data API, but the documentation is a mess.
Is there an example with the javascript SDK somewhere or I have to implement all the API calls one by one (not so simple if you want resumable uploads...)?

Streaming Audio Record in React Native

To build an interactive app I want to integrate record audio streaming with my react native app. I hunted through
react-native-audio-streamer,
react-native-sound-recorder and
react-native-audio
But I didn't find an acquiescent API for this purpose. Is there any package or manual method to accomplish?
Try react-native-live-audio-stream link is here

Dynamic Youtube Embed from Firebase Realtime Database in React

Hello Stack Overflow Community!
I really need some help with my most recent project. I am attempting to embed a Youtube Video from a Firebase Realtime Database. Inside the Database is the Embed Url, but when I try and put the data inside the src, it makes a blank iframe.
<iframe src="{item.embed}" />
What would I do to this link embeddable?
You can use react-youtube module for this purpose which uses youtube iFrame API for videos.
Find all the documentation in below link.
https://www.npmjs.com/package/react-youtube

modernizing old app handlebars app with react

I've got an old app I wrote in Node, Mongo, Express and Handlebars. It seems to be a bit outdated in the sense that it was more static and all data was called locally off the same domain and rendered with Handlebars on the server side, which I thought was always necessary for SEO and it wasn't built with the idea of later building and connecting the data to a mobile version.
I've been using React a lot lately as well as looking into building mobile apps and with the tutorials out there, it seems like most apps these days are designed in a way that the backend is mostly a remote api with cross site origin requests enabled and a frontend that just gets the data from it and parses it on the frontend whether it's a desktop client or a mobile client.
What would be the best way to modernize my old app that'd keep it rendering on the server side using react instead of handlebars for SEO, while also having an api service for if I were to develop a mobile version that could get and parse the data?
There's a lot of server side rending react tutorials out there, but I'm not sure what the best approach is.
To turn your current app into a SSR (server side rendered) react application would be a big ask.
You would have more luck ripping out the html / handle bars response and just returning JSON instead, effectively turning it into an API.
In terms of adding a SSR react layer, the easiest option would be to use something like Next.JS. This does the heavy lifting for you to create server side rendering. There are plenty of other options out there but Next is one of the best and probably the easiest to get going with.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.

Resources