I am trying to Call onConfigured:
property of Publisher object on a button click using setState .
When I open the start live streaming screen it loads up to configuration from this.state
But I want it to manually start on a button click. I tried setState but it is not getting called when I press the button and streaming doesn't start
here is the code: -
import React from "react";
import { findNodeHandle, View, Button, StyleSheet } from "react-native";
import { R5VideoView } from "react-native-red5pro";
import { R5LogLevel, R5ScaleMode } from "react-native-red5pro";
import {
publish,
unpublish,
swapCamera,
subscribe,
unsubscribe,
} from "react-native-red5pro";
import * as Permissions from "expo-permissions";
export default class StartLiveStream extends React.Component {
constructor(props) {
super(props);
this.state = {
publisher: {
ref: "video",
configuration: {
host: "100.248.112.52", // IP or Fully Qualified Domain Name
port: 8554,
contextName: "live",
bufferTime: 0.5,
streamBufferTime: 2,
key: Math.floor(Math.random() * 0x10000).toString(16),
bundleID: "com.realfreedomplatform.stream",
licenseKey: "794H-993S-PXKL-VZBK",
streamName: "mystream",
},
showDebugView: true,
logLevel: R5LogLevel.DEBUG,
//onConfigured: this.onConfiguredPublish.bind(this),
},
subscriber: {
ref: "video",
configuration: {
host: "107.172.137.107", // IP or Fully Qualified Domain Name
port: 8554,
contextName: "live",
bufferTime: 0.5,
streamBufferTime: 2,
key: Math.floor(Math.random() * 0x10000).toString(16),
bundleID: "com.realfreedomplatform.stream",
licenseKey: "694H-993S-PXKL-VZBK",
streamName: "mystream2", //"test123",
},
showDebugView: true,
logLevel: R5LogLevel.DEBUG,
scaleMode: R5ScaleMode.SCALE_TO_FILL,
// onConfigured: this.onConfiguredSubscribe.bind(this),
},
};
this.onStopPublish = this.onStopPublish.bind(this);
this.onStopSubscribe = this.onStopSubscribe.bind(this);
this.onSwapCamera = this.onSwapCamera.bind(this);
this.onStatechange = this.onStatechange.bind(this);
}
async componentDidMount() {
console.log("loaded publisher");
try {
const { status } = await Permissions.askAsync(
Permissions.CAMERA,
Permissions.CAMERA_ROLL,
Permissions.AUDIO_RECORDING
);
if (status !== "granted") {
return (
<View>
<Text>Permission is not granted</Text>
</View>
);
}
} catch (error) {
console.log("error in permisions");
}
}
render() {
return (
<View style={styles.container}>
<R5VideoView {...this.state.subscriber} style={styles.video1} />
<R5VideoView {...this.state.publisher} style={styles.video} />
<Button
style={styles.button}
onPress={this.onStopPublish}
title="Stop Publish"
accessibilityLabel="Stop Publish"
/>
<Button
style={styles.button}
onPress={this.onStatechange} // I called it here to start streaming on button click
title="Start Publish"
accessibilityLabel="Start Publish"
/>
<Button
style={styles.button}
onPress={this.onSwapCamera}
title="Swap Camera"
accessibilityLabel="Swap Camera"
/>
</View>
);
}
onConfiguredPublish() {
// By providing the `configuration` state prop to the view,
// the component starts the configuration process.
const streamNamePublish = this.state.publisher.configuration.streamName;
publish(findNodeHandle(this.refs.video), streamNamePublish);
}
onConfiguredSubscribe() {
const streamNameSubscribe = this.state.subscriber.configuration.streamName;
subscribe(findNodeHandle(this.refs.video), streamNameSubscribe);
}
onStatechange() { // I think I am doing something wrong here
this.setState((prevState) => ({
publisher: Object.assign({}, prevState.publisher, {
onConfigured: this.onConfiguredPublish.bind(this),
}),
}));
}
onStopSubscribe() {
unsubscribe(findNodeHandle(this.refs.video));
}
onStopPublish() {
unpublish(findNodeHandle(this.refs.video));
}
onSwapCamera() {
swapCamera(findNodeHandle(this.refs.video));
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
justifyContent: "center",
},
video: {
flex: 0.5,
flexDirection: "row",
backgroundColor: "black",
},
video1: {
flex: 0.5,
flexDirection: "row",
backgroundColor: "black",
},
button: {
position: "absolute",
left: 0,
right: 0,
bottom: 0,
height: 40,
backgroundColor: "blue",
color: "white",
},
});