Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
getUserMedia() w/ React Native WebRTC
// @flow
import React, { Component } from 'react';
import {
AppRegistry,
Button,
StyleSheet,
Text,
View
} from 'react-native';
import {
RTCView,
getUserMedia,
} from 'react-native-webrtc';
import Permissions from 'react-native-permissions';
export default class HelloWebRTC extends Component {
state: {
videoURL: string | null;
permissions: { cam: string, mic: string } | null;
}
onPress: () => void;
constructor() {
super();
this.state = {
videoURL: null,
permissions: null,
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to ReactNativeWebRTC!
</Text>
<RTCView style={styles.rtc} streamURL={this.state.videoURL} />
<Text style={styles.instructions}>
{JSON.stringify(this.state, null, 2)}
</Text>
<Button
onPress={() => this.onPress()}
title="getUserMedia()"
color="#841584"
/>
</View>
);
}
componentDidMount() {
Promise.all([
Permissions.requestPermission('camera'),
Permissions.requestPermission('microphone'),
])
.then(([cam, mic]) => {
this.setState({ permissions: { cam, mic } });
});
}
onPress() {
getUserMedia({
audio: true,
video: {
mandatory: {},
}
},
stream => {
this.setState({ videoURL: stream.toURL() });
},
err => console.error(err)
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
paddingTop: 20,
},
instructions: {
flex: 1,
backgroundColor: '#eee',
color: '#333333',
padding: 5,
marginTop: 10,
},
rtc: {
height: 360,
width: 640,
backgroundColor: '#000',
}
});
AppRegistry.registerComponent('HelloWebRTC', () => HelloWebRTC);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment