一对一直播app源码开发的前端实现
Web的实现(Web PC、Web App)
// 这里使用了flv.js
<script src="./flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://192.168.31.50:16215/live/stream.flv' //这个url是服务器配置的拉流地址
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
React Native
首先是安装
npm install react-native-live-stream
react-native link react-native-live-stream
这里使用了LivePlayer组件
import LivePlayer from 'react-native-live-stream'
// ...
<LivePlayer source={{uri:"rtmp://192.168.31.50/live/stream.flv"}}
ref={(ref) => {
this.player = ref
}}
style={ss.video}
paused={false}
muted={false}
bufferTime={300}
maxBufferTime={1000}
resizeMode={"contain"}
onLoading={()=>{}}
onLoad={()=>{}}
onEnd={()=>{}}
/>
说明
在一对一直播app源码开发中,不建议初学者自己开发相关SDK,很多第三方SDK可以使用。