Expo camera in our web app is not working in some of the android devices. For example it is working in pixel 6 and in pixel 4a and Samsung a50 it is not working.
I am getting this error in console.
useWebCameraStream.ts:84 Error requesting User Media for type "back"
DOM Exception: Could not start video source
<Camera
style={{ flex: 1 }}
type={type}
ref={(ref) => {
this.camera = ref;
}}
/>
Related
I am loading a Vimeo video using WebView in ReactNative. However, the images do not load (badge and pre-play image). I am using react-native#0.70.5 and react-native-webview#11.23.1, below is the code for my WebView, and screenshots of the video in the emulator vs. directly accessed over the browser url bar.
<WebView
allowsFullscreenVideo={true}
source={{ uri: "https://player.vimeo.com/video/65107797" }}
javaScriptEnabled={true}
scrollEnabled={false}
originWhitelist={["*"]}
style={{ height: 300 }}
/>
Screenshot of video in iOS emulator:
Screenshot of video in the browser:
I want to play some YouTube videos in my react native app using a native player as we don't want to show youtube branding in the player. Is there any possible way to do this?
If not, what's the best way to play youtube videos in react native app without showing youtube branding?
You can do this using react-native-webview.
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
scrollEnabled={false}
source={{
uri: `${"YOUR YOUTUBE URL"}?controls=0&showinfo=0&wmode=transparent&rel=0&mode=opaque`,
}}
style={{
height: 200,
width: Dimensions.get('window').width - 80,
}}
onError={(err) => {
console.log(err, 'this is errr');
}}
/>
I am using React Native View Shot and I need our product to be able to capture live streaming from a m3u8 uri from React Native video package.
Currently on android it is capturing the screen fine, but on IOS there seems to be an issue of View Shot capturing just a blank video. How it looks on IOS
The livestream is the one playing below and the screenshot is the one taken of the video.
Are they just not compatible, or how would I resolve the issue of capturing a screenshot of a live stream on ios?
<TouchableOpacity onPress={()=>saveCapturedImage()} style={capturedShot ? styles.capturedShotStyle : styles.beforeShotStyle}>
{capturedShot ? <Text/> : <Text>Click to capture shot</Text> }
</TouchableOpacity>
<Image style={capturedShot ? styles.captureContainerPost : styles.captureContainerPre} source={capturedShot ? {uri: capturedShot } : null} />
{/* Viewshot component from React Native Viewshot */}
<ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9 }}>
{/* Video component from React Native Video, resizeMode cover to get full height on the component. Add pause controls for default, and controls can be toggled true/false */}
{videoUri && <Video
source={{
uri: videoUri,
}}
style={{
width: "100%",
height: "100%",
}}
resizeMode="cover"
controls={true}
paused = {false}
/>}
</ViewShot>
If anyone else wants an answer for this problem in future, I wrapped View shot capturing screen over a react native webview component playing a video on ios. It took a photo of a paused Youtube video playing. But even though View Shot captured a WebView of a video embedded, the content of the video was empty.
Not sure if this is because of RN View Shot, have emailed the founder of the package. Or does Ios block video content playing?
<View collapsable={false} style=Template:Height: "80%">
<WebView
originWhitelist={["*"]}
source={{
html:
'<iframe playsinline controls autoplay src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" ></iframe>',
}}
useWebKit={true}
originWhitelist={["*"]}
allowsInlineMediaPlayback={true}
style={{
height: 600,
width: 400,
}}
/>
</View>
</ViewShot>
But if anyone finds a better alternative solution let me know.
here is the detail:-
I generated my react native expo project using the command line npx expo-cli init youtube
then I refered to this link:- https://www.npmjs.com/package/react-native-youtube
I installed the react-native-youtube dependencies using the command:- npm i react-native-youtube
I also got my official youtube API from https://developers.google.com/youtube/android/player/register
In App.js file the below are the codes written
`import React from 'react'
import {View,StyleSheet,Text,SafeAreaView} from 'react-native'
import YouTube from 'react-native-youtube';
const App=()=>{
const linkTest="https://www.youtube.com/watch?v=aqz-KE-bpKQ"
return (
<SafeAreaView style={styles.container}>
<YouTube
apiKey="*******************"
videoId={linkTest} // The YouTube video ID
play // control playback of video with true/false
fullscreen // control whether the video should play in fullscreen or inline
loop // control whether the video should loop when ended
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
</SafeAreaView>
)
}
const styles= StyleSheet.create({
container:{ backgroundColor:"white", flex:1},
})
export default App
After this, in my cmd I ran :- npm start
Scanned the QRCode and opened the App in my EXPO App in my mobile
the following is the screenshot of the error I got
Click here for show larger image:
Click here for show larger image:
Click here for show larger image:
The below picture are screenshots of project running on expo on android platform or mobile:
Click here for show larger image:
module 'react-native-youtube' doesnt support youtube link. Rather than that use
<WebView
style={ styles.styleCode }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/dFKhWe2bBkM' }}
/>
Find the youtube uri from ( share > embed ).
I cannot see the player, when mounting to my page:
return (
<YouTube
apiKey="xxx"
videoId={youtubeVideo} // The YouTube video ID
play={false} // control playback of video with true/false
fullscreen={false} // control whether the video should play in fullscreen or inline
loop={false} // control whether the video should loop when ended
onReady={e => console.log('ready')}
onChangeState={e => console.log('onchange')}
onChangeQuality={e => console.log('change quality')}
onError={e => console.log(e.error)}
style={{ alignSelf: "stretch", height: 300 }}
/>
);
I get console logs for the onReady callback but no video. How can I display my video?
Are there any better alternatives? Having looked into these two packages, react-native-youtube and react-native-vimeo. Both haven't been maintained for a while and have various issues.
What is the best way to embed video from youtube that fits guidelines for both Play and App Stores? With lots of video based apps on the Play stores, how does everyone else do it?
Is your YouTube component wrapped inside a parent view with flex ? I'm using the same package in my app and it seems to be working fine and this is pretty much how I've got it set up.
// Parent view (page container)
<View style={{ flex : 1 }}>
...
<Youtube
apiKey={API_KEY}
videoId={videoID}
style={{ marginTop : 15, height : 250, alignSelf : 'stretch' }} />
...
</View>