Skip to content

Z
ZLMediaKit
Commit bb37bce3 by xgj
Options

update zlmrtcclient.js

parent 0f3a8f4a
正在显示 包含 392 行增加 和 213 行删除
www/webrtc/ZLMRTCClient.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
www/webrtc/index_play.html → www/webrtc/index.html
<html> <html>
<meta charset="utf-8"> <meta charset="utf-8">
<head> <head>
<title>ZLM RTC demo</title> <title>ZLM RTC demo</title>
<script src="./ZLMRTCClient.js"></script> <script src="./ZLMRTCClient.js"></script>
</head> </head>
<body> <body>
<div style="text-align: center;"> <div style="text-align: center;">
<div> <div>
<video id='video' controls autoplay style="text-align:left;"> <video id='video' controls autoplay style="text-align:left;">
Your browser is too old which doesn't support HTML5 video. Your browser is too old which doesn't support HTML5 video.
</video> </video>
<video id='selfVideo' controls autoplay style="text-align:right;"> <video id='selfVideo' controls autoplay style="text-align:right;">
Your browser is too old which doesn't support HTML5 video. Your browser is too old which doesn't support HTML5 video.
</video> </video>
</div> </div>
<div> <div>
<p> <p>
<label for="streamUrl">url:</label> <label for="streamUrl">url:</label>
<input type="text" id='streamUrl' value="http://127.0.0.1/index/api/webrtc?app=live&stream=test&type=play"> <input type="text" style="co" id='streamUrl' value="http://127.0.0.1/index/api/webrtc?app=live&stream=test&type=play">
</p> </p>
<p> <p>
<label for="simulecast">simulecast:</label> <label for="simulecast">simulecast:</label>
<input type="checkbox" id='simulecast'> <input type="checkbox" id='simulecast' checked="checked">
</p> </p>
<button onclick="start()">开始</button> <p>
<button onclick="stop()">停止</button> <label for="useCamera">useCamera:</label>
<input type="checkbox" id='useCamera' checked="checked">
</div> </p>
</div>
<script> <p>
var player = null <label for="audioEnable">audioEnable:</label>
function start() <input type="checkbox" id='audioEnable' checked="checked">
{ </p>
stop();
player = new ZLMRTCClient.Endpoint( <p>
{ <label for="videoEnable">videoEnable:</label>
element: document.getElementById('video'),// video 标签 <input type="checkbox" id='videoEnable' checked="checked">
debug: true,// 是否打印日志 </p>
zlmsdpUrl:document.getElementById('streamUrl').value,//流地址
simulecast:document.getElementById('simulecast').checked <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
player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,function(e) </p>
{// ICE 协商出错
console.log('ICE 协商出错') <p>
}); <label for="resilution">resolution:</label>
<select id="resilution">
player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,function(e)
{//获取到了远端流，可以播放 </select>
console.log('播放成功',e.streams) </p>
});
<button onclick="start()">开始</button>
player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,function(e) <button onclick="stop()">停止</button>
{// offer anwser 交换失败
console.log('offer anwser 交换失败',e) </div>
}); </div>
player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,function(s) <script>
{// 获取到了本地流 var player = null
var recvOnly = true
document.getElementById('selfVideo').srcObject=s; var resArr = []
//console.log('offer anwser 交换失败',e) document.getElementsByName("methond").forEach((el,idx)=>{
}); el.onclick=function(e){
if(el.value == "play")
} {
let url = document.getElementById('streamUrl').value;
function stop()
{ document.getElementById('streamUrl').value = url.replace("&type=push","&type=play");
if(player) recvOnly = true;
{ }
player.close(); else
player = null; {
var local = document.getElementById('selfVideo'); let url = document.getElementById('streamUrl').value;
local.removeAttribute('srcObject'); document.getElementById('streamUrl').value = url.replace("&type=play","&type=push");
local.load(); recvOnly = false;
} }
} };
});
</script>
ZLMRTCClient.GetAllScanResolution().forEach((r,i)=>{
</body> opt = document.createElement('option');
opt.text = r.label +"("+r.width+"x"+r.height+")";
<script> opt.value = r;
document.getElementById("resilution").add(opt,null)
</script>
//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> </html>
\ No newline at end of file
www/webrtc/index_push.html deleted 100644 → 0
<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" id='streamUrl' value="http://127.0.0.1/index/api/webrtc?app=live&stream=test&type=push">
</p>
<p>
<label for="simulecast">simulecast:</label>
<input type="checkbox" id='simulecast'>
</p>
<button onclick="start()">开始</button>
<button onclick="stop()">停止</button>
</div>
</div>
<script>
var player = null
function start()
{
stop();
player = new ZLMRTCClient.Endpoint(
{
element: document.getElementById('video'),// video 标签
debug: true,// 是否打印日志
zlmsdpUrl:document.getElementById('streamUrl').value,//流地址
simulecast:document.getElementById('simulecast').checked
}
);
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)
});
player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,function(s)
{// 获取到了本地流
document.getElementById('selfVideo').srcObject=s;
//console.log('offer anwser 交换失败',e)
});
}
function stop()
{
if(player)
{
player.close();
player = null;
var local = document.getElementById('selfVideo');
local.removeAttribute('srcObject');
local.load();
}
}
</script>
</body>
<script>
</script>
</html>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论