我正在尝试用opentok-react-native库构建一个应用程序。
当应用程序运行时,发布者组件变为黑色方块,订阅者组件显示我的摄像头视频。
在日志中,我可以看到流是使用流ID创建的,显然正在工作。但当我去我的Tokbox account时,我在仪表板上看不到任何数据:
这是我目前的代码:https://github.com/victor0402/opentok-demo
重要的是:
import React, {Component} from 'react';
import {View} from 'react-native';
import {OT, OTPublisher, OTSession, OTSubscriber} from "opentok-react-native";
export default class App extends Component {
//Publisher token
token = 'TOKEN HERE';
//Routed session ID
session = 'SESSION ID HERE';
apiKey = 'API KEY';
constructor(props) {
super(props);
this.state = {
streamProperties: {},
};
this.publisherProperties = {
publishVideo: true,
publishAudio: true,
cameraPosition: 'front'
};
this.publisherEventHandlers = {
streamCreated: event => {
console.log('publisherEventHandlers: streamCreated.... updating state');
const streamProperties = {
...this.state.streamProperties, [event.streamId]: {
subscribeToAudio: true,
subscribeToVideo: true,
style: {
width: 400,
height: 300,
},
}
};
this.setState({streamProperties});
},
streamDestroyed: event => {
console.log('Publisher stream destroyed!', event);
}
};
this.subscriberProperties = {
subscribeToAudio: true,
subscribeToVideo: true,
};
this.sessionEventHandlers = {
streamCreated: event => {
console.log('sessionEventHandlers : streamCreated');
},
streamDestroyed: event => {
console.log('Stream destroyed!!!!!!', event);
},
};
this.subscriberEventHandlers = {
error: (error) => {
console.log(`There was an error with the subscriber: ${error}`);
},
};
}
render() {
OT.enableLogs(true);
return (
<View>
<OTSession apiKey={this.apiKey} sessionId={this.session} token={this.token}
eventHandlers={this.sessionEventHandlers}>
<OTPublisher
properties={this.publisherProperties}
eventHandlers={this.publisherEventHandlers}
style={{ height: 100, width: 100 }}
/>
<OTSubscriber
properties={this.subscriberProperties}
eventHandlers={this.subscriberEventHandlers}
style={{height: 100, width: 100}}
streamProperties={this.state.streamProperties}
/>
</OTSession>
</View>
);
}
}
那么,我的代码有问题吗?如何发布视频并在我的帐户信息中心获取结果和录音?
TokBox Developer Evangelist在这里。
使用指标大约需要24小时填充在仪表板中,这就是您没有立即看到它们的原因。
我还查看了您共享的代码,看起来您在streamProperties
回调中为streamCreated
设置了OTPublisher
对象。请注意,发布商的streamCreated
事件只会在您的发布商开始发布时触发。由于您使用streamProperties
为订阅者设置属性,因此您应该在streamCreated
的OTSession
事件回调中设置此数据,因为在会话中创建新流(您自己的流)时会调度该数据。您的代码看起来像这样:
this.sessionEventHandlers = {
streamCreated: event => {
const streamProperties = {
...this.state.streamProperties, [event.streamId]: {
subscribeToAudio: true,
subscribeToVideo: true,
style: {
width: 400,
height: 300,
},
}
};
this.setState({streamProperties});
},
};
最后,为了检查并确定一切是否正常工作,我建议使用OpenTok Playground Tool并连接与React Native应用程序中的sessionId相同的sessionId。