ZLMediaKit/www/webrtc/index.html

264 lines
8.9 KiB
HTML
Raw Normal View History

2021-06-07 18:40:47 +08:00
<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>
2021-09-17 11:20:23 +08:00
<input type="text" style="co" id='streamUrl' value="http://192.168.1.101/index/api/webrtc?app=live&stream=xiong&type=play">
2021-06-07 18:40:47 +08:00
</p>
<p>
2021-06-19 23:56:17 +08:00
<label for="simulcast">simulcast:</label>
2021-09-17 11:20:23 +08:00
<input type="checkbox" id='simulcast'>
2021-06-07 18:40:47 +08:00
</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>
2022-09-22 21:16:56 +08:00
<label for="method">method(play or push or echo):</label>
<input type="radio" name="method" value="echo" >echo
<input type="radio" name="method" value="push" >push
<input type="radio" name="method" value="play" checked = true>play
2021-06-07 18:40:47 +08:00
</p>
<p>
2022-09-22 21:16:56 +08:00
<label for="resolution">resolution:</label>
<select id="resolution">
2021-06-07 18:40:47 +08:00
</select>
</p>
2022-03-24 18:20:10 +08:00
<p>
<label for="datachannel">datachannel:</label>
<input id='datachannel' name="datachannel" type="checkbox" value="0">
</p>
<button onclick="start()">开始(start)</button>
<button onclick="stop()">停止(stop)</button>
<p>
<label for="msgsend">msgsend:</label>
<input type="text" id='msgsend' value="hello word !">
</p>
<p>
<label for="msgrecv">msgrecv:</label>
<input type="text" id='msgrecv' disabled>
2022-03-24 18:20:10 +08:00
</p>
<button onclick="send()">发送(send by datachannel)</button>
<button onclick="close()">关闭(close datachannel)</button>
2021-06-07 18:40:47 +08:00
2022-03-24 18:20:10 +08:00
2021-06-07 18:40:47 +08:00
</div>
</div>
<script>
var player = null
var recvOnly = true
var resArr = []
var ishttps = 'https:' == document.location.protocol ? true : false
var isLocal = "file:" == document.location.protocol ? true : false
var url = document.location.protocol+"//"+window.location.host+"/index/api/webrtc?app=live&stream=test&type=play"
if(!ishttps && !isLocal){
2022-03-24 18:20:10 +08:00
alert('本demo需要在https的网站访问 ,如果你要推流的话(this demo must access in site of https if you want push stream)')
}
if(isLocal){
url = "http://127.0.0.1"+"/index/api/webrtc?app=live&stream=test&type=play"
}
document.getElementById('streamUrl').value = url
2022-09-22 21:16:56 +08:00
document.getElementsByName("method").forEach((el,idx)=>{
2021-06-07 18:40:47 +08:00
el.onclick=function(e){
let url = new URL(document.getElementById('streamUrl').value);
url.searchParams.set("type",el.value)
document.getElementById('streamUrl').value = url.toString()
if(el.value == "play"){
2021-06-07 18:40:47 +08:00
recvOnly = true;
}else if(el.value == "echo"){
recvOnly = false;
}else{
2021-06-07 18:40:47 +08:00
recvOnly = false;
}
};
});
ZLMRTCClient.GetAllScanResolution().forEach((r,i)=>{
opt = document.createElement('option');
opt.text = r.label +"("+r.width+"x"+r.height+")";
opt.value = r;
2022-09-22 21:16:56 +08:00
document.getElementById("resolution").add(opt,null)
2021-06-07 18:40:47 +08:00
//console.log(opt.text.match(/\d+/g))
})
function start_play(){
2022-09-22 21:16:56 +08:00
let elr = document.getElementById("resolution");
2021-06-07 18:40:47 +08:00
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,//流地址
2021-06-24 11:39:55 +08:00
simulcast:document.getElementById('simulcast').checked,
2021-06-07 18:40:47 +08:00
useCamera:document.getElementById('useCamera').checked,
audioEnable:document.getElementById('audioEnable').checked,
videoEnable:document.getElementById('videoEnable').checked,
recvOnly:recvOnly,
2022-03-24 18:20:10 +08:00
resolution:{w:w,h:h},
usedatachannel:document.getElementById('datachannel').checked,
2021-06-07 18:40:47 +08:00
}
);
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)
});
2021-09-17 11:20:23 +08:00
player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,function(e)
{// offer anwser 交换失败
console.log('offer anwser 交换失败',e)
2021-06-07 18:40:47 +08:00
stop();
});
player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,function(s)
{// 获取到了本地流
document.getElementById('selfVideo').srcObject=s;
document.getElementById('selfVideo').muted = true;
2021-09-17 11:20:23 +08:00
//console.log('offer anwser 交换失败',e)
2021-06-07 18:40:47 +08:00
});
player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED,function(s)
{// 获取本地流失败
console.log('获取本地流失败')
});
player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,function(state)
{// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
console.log('当前状态==>',state)
});
2022-03-24 18:20:10 +08:00
player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN,function(event)
{
console.log('rtc datachannel 打开 :',event)
});
player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG,function(event)
{
console.log('rtc datachannel 消息 :',event.data)
document.getElementById('msgrecv').value = event.data
2022-03-24 18:20:10 +08:00
});
player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR,function(event)
{
console.log('rtc datachannel 错误 :',event)
});
player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE,function(event)
{
console.log('rtc datachannel 关闭 :',event)
});
2021-06-07 18:40:47 +08:00
}
function start()
{
stop();
2022-09-22 21:16:56 +08:00
let elr = document.getElementById("resolution");
2021-06-07 18:40:47 +08:00
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;
2022-03-24 18:20:10 +08:00
var remote = document.getElementById('video');
if(remote)
{
remote.srcObject = null;
remote.load();
}
2021-06-07 18:40:47 +08:00
var local = document.getElementById('selfVideo');
2021-09-17 11:20:23 +08:00
local.srcObject = null;
2021-06-07 18:40:47 +08:00
local.load();
}
}
2022-03-24 18:20:10 +08:00
function send(){
if(player){
//send msg refernece https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/send
player.sendMsg(document.getElementById('msgsend').value)
2022-03-24 18:20:10 +08:00
}
}
function close(){
if(player){
player.closeDataChannel()
}
}
2021-06-07 18:40:47 +08:00
</script>
</body>
<script>
</script>
2022-03-24 18:20:10 +08:00
</html>