直播开发的前端实现(web、React Native...)

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={()=>{}}
/>

说明

不建议初学者自己开发SDK，很多第三方SDK可以使用，博主推荐 “七牛云”

写在最后

欢迎留言私信讨论；
文章有知识性错误请立马联系博主，博主将非常感谢；
无需经过允许即可随意使用转载，知识本来就是被广泛用来学习的；
非常感谢您能看到此处，本文为博主学习笔记，如有不同见解，请不吝赐教。