1、Linux上nginx-rtmp服务器的搭建
2、在树莓派上安装ffempg
在树莓派中的 ffmpeg 推流命令（将-t 10删除，则会一直进行推流）

ffmpeg -ss 0 -t 10 -i /dev/video0 -f flv rtmp://(ip):(端口)/(nginx服务器应用)/(自定义应用)

配置后将直播卖货系统网页放在nginx服务器的html文件夹中就可以访问。若有公网IP的话，将直播卖货系统网页放在本地，而访问流的ip改成公网ip就行(即以下的file)。
我的nginx目录为/usr/local/src/nginx/html/

基于jwplayer直播页面demo(该例子需要flash插件的支持，下面介绍一种h5下的实现)

<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
<title>demo</title>   
</head>  
<body>  
<script type='text/javascript' src='jwplayer.js'></script>  
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<p>网页直播测试</p>
<div id="container"></div><!--这部分将被代替-->
<br/>
<input type="button" class="player-play" value="播放" />
<input type="button" class="player-stop" value="停止" />
<input type="button" class="player-status" value="状态" />
<input type="button" class="player-current" value="当前秒数" />
<input type="button" class="player-length" value="视频时长(秒)" />
<script type="text/javascript">
	var server = window.location.hostname;
	var stream_url = 'rtmp://' + server + '/hls' + '/live_stream';
	//或者直接输入'rtmp://ip:1935/hls/live_stream',
	// mylive 对应nginx.conf配置项application的名字  
	// live_stream 对应Adobe Flash Stream Media Live Encoder配置的stream名称  
	var thisPlayer;  //保存当前播放器以便操作
	$(function() {
		thisPlayer = jwplayer('container').setup({
			flashplayer: 'jwplayer.flash.swf',
			file: 'stream_url',
			width: 500,
			height: 350,
			//autostart: true,  //如果打开此标志，在打开网页时会自动播放直播流 
		});
		
		//播放 暂停
		$('.player-play').click(function() {
			if (thisPlayer.getState() != 'PLAYING') {
				thisPlayer.play(true);
				this.value = '暂停';
			} else {
				thisPlayer.play(false);
				this.value = '播放';
			}
		});
		
		//停止
		$('.player-stop').click(function() { thisPlayer.stop(); });
		
		//状态
		$('.player-status').click(function() {
			var state = thisPlayer.getState();
			var msg;
			switch (state) {
				case 'BUFFERING':
					msg = '加载中...';
					break;
				case 'PLAYING':
					msg = '正在播放';
					break;
				case 'PAUSED':
					msg = '暂停';
					break;
				case 'IDLE':
					msg = '停止';
					break;
			}
			alert(msg);
		});
		
		//获取进度
		$('.player-current').click(function() { alert(thisPlayer.getPosition()); });
		//获取视频长度
		$('.player-length').click(function() { alert(thisPlayer.getDuration()); });
	});
</script>
</body>  
</html>

基于video.js的直播demo
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。
对于video.js 5版本以下，可以直接调用video.js即可，而对于video.js 6以及以上版本需要再调用videojs-flash.js才可以播放rtmp流。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于video.js实现rtmp流的直播</title>
    <link href="video-js.min.css" rel="stylesheet">
    <script src="video.min.js"></script>
    <script src="videojs-flash.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
       poster="test.png" width="500" height="400" data-setup='{}'>
    <!--src: 流地址  type:流类型-->
    <source src='rtmp://ip:1935/hls/live_stream' type='rtmp/flv'/>
</video>
<script type="text/javascript">
    // 当浏览器不支持HTML5播放器的时候自动唤起flash播放器
    videojs.options.flash.swf = 'video-js.swf';
    var player = videojs('player'); //player为页面video元素的id
    player.play(); //播放
</script>
</body>
</html>

————————————————
声明：本文由云豹科技转发自 Magical博客，如有侵权请联系作者删除

ITPub博客

直播卖货系统，实现网页的RTMP推流

最新文章