Skip to content

Instantly share code, notes, and snippets.

@edritech93

edritech93/App.tsx

Forked from ozcanzaferayan/App.tsx
Created October 25, 2022 16:18
Show Gist options
  • Save edritech93/56e61a0bf34a62760a94bd52f997fa29 to your computer and use it in GitHub Desktop.
Save edritech93/56e61a0bf34a62760a94bd52f997fa29 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ozcanzaferayan ozcanzaferayan revised this gist Apr 26, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion App.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -50,7 +50,7 @@ const App = () => {

    const styles = StyleSheet.create({
    container: {
    backgroundColor: '#313131',
    backgroundColor: '#333',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: '100%',
  2. @ozcanzaferayan ozcanzaferayan created this gist Apr 26, 2020.
    71 changes: 71 additions & 0 deletions App.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    import React, {useState} from 'react';
    import {SafeAreaView, StyleSheet, View, Button} from 'react-native';

    import {
    RTCView,
    mediaDevices,
    MediaStream,
    MediaStreamConstraints,
    } from 'react-native-webrtc';

    const App = () => {
    const [localStream, setLocalStream] = useState<MediaStream>();

    const startLocalStream = async () => {
    const isFrontCamera = true;
    const devices = await mediaDevices.enumerateDevices();

    const facing = isFrontCamera ? 'front' : 'environment';
    const videoSourceId = devices.find(
    (device: any) => device.kind === 'videoinput' && device.facing === facing,
    );
    const facingMode = isFrontCamera ? 'user' : 'environment';
    const constraints: MediaStreamConstraints = {
    audio: true,
    video: {
    mandatory: {
    minWidth: 500,
    minHeight: 300,
    minFrameRate: 30,
    },
    facingMode,
    optional: videoSourceId ? [{sourceId: videoSourceId}] : [],
    },
    };
    const newStream: any = await mediaDevices.getUserMedia(constraints);
    setLocalStream(newStream);
    };

    return (
    <SafeAreaView style={styles.container}>
    <Button title="Kamerayı aç ve akışa başla" onPress={startLocalStream} />
    <View style={styles.rtcview}>
    {localStream && (
    <RTCView style={styles.rtc} streamURL={localStream.toURL()} />
    )}
    </View>
    </SafeAreaView>
    );
    };

    const styles = StyleSheet.create({
    container: {
    backgroundColor: '#313131',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: '100%',
    },
    rtcview: {
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
    width: '100%',
    backgroundColor: 'black',
    },
    rtc: {
    width: '100%',
    height: '100%',
    },
    });

    export default App;