使用Hbuilder实现直播推流与直播观看

最新推荐文章于 2023-11-29 22:25:21 发布

phpluo

最新推荐文章于 2023-11-29 22:25:21 发布

阅读量4.2k

点赞数

分类专栏： swoole 文章标签： swoole

swoole 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

Hbuilder的HTML5+规范确实给众多开发者带来了很多便利，目前直播应用比较多，测试了一下H5 plus的直播推流与观看API确实可用，但是比原生应用要逊色一些了，测试一下是可以的，如果要做成型的产品可能要斟酌一下了，实际测试声音还原不够好，另外推流后客户端播放使用rtmp协议是可以正常播放，如果使用m3u8则播放卡顿，而同样的播放客户端和视频直播服务器，用其他工具推流则不会出问题，不知道是不是设备兼容性问题,下面给出推流和播放的代码供参考。

推流代码

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
		var pusher = null;
		// H5 plus事件处理
		function plusReady(){
			// 创建直播推流控件
			pusher = new plus.video.LivePusher('pusher',{
				url:'rtmp://推流服务器地址',
				mode:'FHD',
				muted:false,
			});
			pusher.preview();
			// 监听状态变化事件
			pusher.addEventListener('statechange', function(e){
				console.log('statechange: '+JSON.stringify(e));
			}, false);
		}
		document.addEventListener('plusready', plusReady, false);
		// 设置推流服务器
		function updatePusher() {
			var url= document.getElementById('pushurl').value;
			pusher.setOptions({
				url:url
			});
		}
		// 开始推流
		function startPusher() {
			pusher.start();
		}
		
		// 切换摄像头
		function switchCamera() {
			pusher.switchCamera();
		}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
		<br/>
		<input type="text" id="pushurl" value="rtmp://推流服务器地址"  style="width: 500px;"/>  <br><br>
		<button onclick="updatePusher()">更新推流服务器</button>
		<br/><br>
		<button onclick="startPusher()">开始推流</button>  <br><br><button onclick="switchCamera()">切换摄像头</button>
		<br/><br/>
		
	</body>
</html>

播放代码

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>视频播放</title>
	<script type="text/javascript">

		var src = '播放地址支持rtmp http等协议';
		
		var video = null;
		// H5 plus事件处理
		function plusReady(){
			// 创建视频播放控件
			video = new plus.video.VideoPlayer('video',{
				src:src
			});
			video.play();
		}
		document.addEventListener('plusready', plusReady, false);
		// 切换视频地址
		function switchVideo(src){
			document.getElementById('content').innerHTML = src;
			console.log(src);
			video.setOptions({src:src});
			video.play();
		}

	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		<span id="content" style="color:#0000FF">默认</span><br>
		
		<div id="video" style="width:100%;height:300px;background-color:#ffffff;margin:auto;"></div>
		<br>
		<button onclick="switchVideo('播放地址1')">切换视频地址1</button><br /><br>
		<button onclick="switchVideo('观看地址2')">观看直播2rtmp</button><br /><br>
		<button onclick="switchVideo('观看地址3')">观看直播3m3u8</button><br />

	</body>
</html>

phpluo

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
使用Hbuilder实现直播推流与直播观看

Hbuilder的HTML5+规范确实给众多开发者带来了很多便利，目前直播应用比较多，测试了一下H5 plus的直播推流与观看API确实可用，但是比原生应用要逊色一些了，测试一下是可以的，如果要做成型的产品可能要斟酌一下了，实际测试声音还原不够好，另外推流后客户端播放使用rtmp协议是可以正常播放，如果使用m3u8则播放卡顿，而同样的播放客户端和视频直播服务器，用其他工具推流则不会出问题，不知道是...
复制链接

扫一扫