使用HBuilder中的html5+的例子稍微改造了一下，将推流和拉流放在了一个页面想做一个类似微信一对一聊天的功能。使用自己搭建的nginx-rtmp-module流媒体服务器，发现两台手机进行互动聊天的时候会出现一台手机没声音或很大的噪音的情况，于是我更换了red5来做流媒体服务器，还是出现上面的情况，所以我怀疑是不是html5+的vedio组件有一些设置没有设对，希望大神们帮我解决一下。下面是我的代码。
创建两个应用，每个应用除了推流地址和拉流地址不一样以外，其他的都一样。
A应用：推流地址 rtmp://192.168.31.130:1935/hls/testpush
拉流地址 rtmp://192.168.31.130:1935/hls/pulltest或http://192.168.31.130/hls/pulltest.m3u8
B应用：推流地址 rtmp://192.168.31.130:1935/hls/pulltest
拉流地址 rtmp://192.168.31.130:1935/hls/testpush或http://192.168.31.130/hls/testpush.m3u8
html代码如下：
<!DOCTYPE HTML>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>Hello H5+</title>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
var pusher = null;
var bstart = false;
var video = null;
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
plusReady();
playReady();
});
//拉流
function playReady() {
// 创建视频播放控件
video = new plus.video.VideoPlayer('video',{
src:'rtmp://192.168.31.130:1935/hls/pulltest' //拉流地址 A应用为rtmp://192.168.31.130:1935/hls/pulltest或http://192.168.31.130/hls/pulltest.m3u8,B应用为rtmp://192.168.31.130:1935/hls/testpush或http://192.168.31.130/hls/testpush.m3u8
// src:'http://192.168.0.105/hls/test1.m3u8'
});
//监听播放事件
// video.addEventListener('play', function(){
// updatePlaying(true);
// }, false);
video.play();
}
// H5 plus事件处理 推流
function plusReady() {
console.log("执行了");
// 创建直播推流控件
pusher = new plus.video.LivePusher('pusher', {
url: ' rtmp://192.168.31.130:1935/hls/testpush' //推流地址 A应用为 rtmp://192.168.31.130:1935/hls/testpush， B应用为 rtmp://192.168.31.130:1935/hls/pulltest
});
// 监听状态变化事件
pusher.addEventListener('statechange', function(e) {
console.log('statechange: ' + JSON.stringify(e));
}, false);
pusher.start();
}
function playVideo2() {
video.play();
}
// 开始/停止推流
function ppPusher() {
pusher.start();
}
// 切换摄像头
function switchCamera() {
pusher.switchCamera();
}
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />
<style type="text/css">
input {
width: 70%;
font-size: 16px;
padding: .2em .2em;
border: 1px solid #00B100;
-webkit-user-select: text;
}
button {
width: 20%;
margin: 6px 0 6px 6px;
font-size: 16px;
color: #FFF;
background-color: #00CC00;
border: 1px solid #00B100;
padding: .2em 0em;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<br />
<div id="pusher" style="width:300px;height:400px;background-color:#000000;margin:auto"></div>
<br />
<div style="text-align:center; margin:auto;">
<!-- <input id="path" type="text" value="" placeholder="请输入直播服务器地址(rtmp)"/> -->
<!-- <button id="pp" onclick="ppPusher()">开始直播</button> -->
</div>
<div class="button" onclick="switchCamera()">切换摄像头</div>
<div id="video" style="width:98%;height:300px;background-color:#000000;margin:auto"></div>
<!-- <button onclick="playVideo2()">看直播</button> -->
</body> 
5 个回复
z***@163.com (作者)
自己顶一下
z***@163.com (作者)
再顶一下
2***@qq.com
你好，请问你的推流地址是怎么设置的呢？
huayu
有延时的问题吗？
2***@qq.com
请问方便提供源码参考吗？