mirror of
https://github.com/ZLMediaKit/ZLMediaKit.git
synced 2026-07-05 10:58:11 +08:00
update zlmrtcclient.js
This commit is contained in:
xgj
192
www/webrtc/index.html
Normal file
192
www/webrtc/index.html
Normal file
@@ -0,0 +1,192 @@
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
<title>ZLM RTC demo</title>
|
||||
<script src="./ZLMRTCClient.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div>
|
||||
<video id='video' controls autoplay style="text-align:left;">
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
|
||||
<video id='selfVideo' controls autoplay style="text-align:right;">
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<p>
|
||||
<label for="streamUrl">url:</label>
|
||||
<input type="text" style="co" id='streamUrl' value="http://127.0.0.1/index/api/webrtc?app=live&stream=test&type=play">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="simulecast">simulecast:</label>
|
||||
<input type="checkbox" id='simulecast' checked="checked">
|
||||
</p>
|
||||
<p>
|
||||
<label for="useCamera">useCamera:</label>
|
||||
<input type="checkbox" id='useCamera' checked="checked">
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
<label for="audioEnable">audioEnable:</label>
|
||||
<input type="checkbox" id='audioEnable' checked="checked">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="videoEnable">videoEnable:</label>
|
||||
<input type="checkbox" id='videoEnable' checked="checked">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="methond">methond(play or push):</label>
|
||||
<input type="radio" name="methond" value="push" >push
|
||||
<input type="radio" name="methond" value="play" checked = true>play
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="resilution">resolution:</label>
|
||||
<select id="resilution">
|
||||
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<button onclick="start()">开始</button>
|
||||
<button onclick="stop()">停止</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var player = null
|
||||
var recvOnly = true
|
||||
var resArr = []
|
||||
|
||||
document.getElementsByName("methond").forEach((el,idx)=>{
|
||||
el.onclick=function(e){
|
||||
if(el.value == "play")
|
||||
{
|
||||
let url = document.getElementById('streamUrl').value;
|
||||
|
||||
document.getElementById('streamUrl').value = url.replace("&type=push","&type=play");
|
||||
recvOnly = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
let url = document.getElementById('streamUrl').value;
|
||||
document.getElementById('streamUrl').value = url.replace("&type=play","&type=push");
|
||||
recvOnly = false;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
ZLMRTCClient.GetAllScanResolution().forEach((r,i)=>{
|
||||
opt = document.createElement('option');
|
||||
opt.text = r.label +"("+r.width+"x"+r.height+")";
|
||||
opt.value = r;
|
||||
document.getElementById("resilution").add(opt,null)
|
||||
|
||||
//console.log(opt.text.match(/\d+/g))
|
||||
|
||||
|
||||
})
|
||||
function start_play(){
|
||||
let elr = document.getElementById("resilution");
|
||||
let res = elr.options[elr.selectedIndex].text.match(/\d+/g);
|
||||
let h = parseInt(res.pop());
|
||||
let w = parseInt(res.pop());
|
||||
|
||||
player = new ZLMRTCClient.Endpoint(
|
||||
{
|
||||
element: document.getElementById('video'),// video 标签
|
||||
debug: true,// 是否打印日志
|
||||
zlmsdpUrl:document.getElementById('streamUrl').value,//流地址
|
||||
simulecast:false,//document.getElementById('simulecast').checked,
|
||||
useCamera:document.getElementById('useCamera').checked,
|
||||
audioEnable:document.getElementById('audioEnable').checked,
|
||||
videoEnable:document.getElementById('videoEnable').checked,
|
||||
recvOnly:recvOnly,
|
||||
resolution:{w:w,h:h}
|
||||
}
|
||||
);
|
||||
|
||||
player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,function(e)
|
||||
{// ICE 协商出错
|
||||
console.log('ICE 协商出错')
|
||||
});
|
||||
|
||||
player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,function(e)
|
||||
{//获取到了远端流，可以播放
|
||||
console.log('播放成功',e.streams)
|
||||
});
|
||||
|
||||
player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,function(e)
|
||||
{// offer anwser 交换失败
|
||||
console.log('offer anwser 交换失败',e)
|
||||
stop();
|
||||
});
|
||||
|
||||
player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,function(s)
|
||||
{// 获取到了本地流
|
||||
|
||||
document.getElementById('selfVideo').srcObject=s;
|
||||
document.getElementById('selfVideo').muted = true;
|
||||
|
||||
//console.log('offer anwser 交换失败',e)
|
||||
});
|
||||
|
||||
player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED,function(s)
|
||||
{// 获取本地流失败
|
||||
|
||||
console.log('获取本地流失败')
|
||||
});
|
||||
}
|
||||
|
||||
function start()
|
||||
{
|
||||
stop();
|
||||
let elr = document.getElementById("resilution");
|
||||
let res = elr.options[elr.selectedIndex].text.match(/\d+/g);
|
||||
let h = parseInt(res.pop());
|
||||
let w = parseInt(res.pop());
|
||||
|
||||
if(document.getElementById('useCamera').checked && !recvOnly)
|
||||
{
|
||||
ZLMRTCClient.isSupportResolution(w,h).then(e=>{
|
||||
start_play()
|
||||
}).catch(e=>{
|
||||
alert("not support resolution")
|
||||
});
|
||||
}else{
|
||||
start_play()
|
||||
}
|
||||
}
|
||||
|
||||
function stop()
|
||||
{
|
||||
if(player)
|
||||
{
|
||||
player.close();
|
||||
player = null;
|
||||
var local = document.getElementById('selfVideo');
|
||||
local.removeAttribute('srcObject');
|
||||
local.load();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user