You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.7 KiB
Cheetah
129 lines
3.7 KiB
Cheetah
{{template "head.tmpl" .}}
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0 text-dark">Play webrtc video</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
<li class="breadcrumb-item active">Play webrtc video</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.container-fluid -->
|
|
</div>
|
|
<div class="content">
|
|
{{template "player.tmpl" .}}
|
|
|
|
{{template "foot.tmpl" .}}
|
|
</div>
|
|
<script>
|
|
let webrtc, webrtcSendChannel;
|
|
let mediaStream;
|
|
|
|
$(document).ready(() => {
|
|
startPlay();
|
|
});
|
|
|
|
async function startPlay() {
|
|
mediaStream = new MediaStream();
|
|
$("#videoPlayer")[0].srcObject = mediaStream;
|
|
webrtc = new RTCPeerConnection({
|
|
iceServers: [{
|
|
urls: ["stun:stun.l.google.com:19302"]
|
|
}],
|
|
sdpSemantics: "unified-plan"
|
|
});
|
|
webrtc.onnegotiationneeded = handleNegotiationNeeded;
|
|
webrtc.onsignalingstatechange = signalingstatechange;
|
|
|
|
webrtc.ontrack = ontrack
|
|
let offer = await webrtc.createOffer({
|
|
//iceRestart:true,
|
|
offerToReceiveAudio:true,
|
|
offerToReceiveVideo:true
|
|
});
|
|
await webrtc.setLocalDescription(offer);
|
|
}
|
|
|
|
function ontrack (event){
|
|
console.log(event.streams.length + ' track is delivered');
|
|
mediaStream.addTrack(event.track);
|
|
}
|
|
|
|
async function signalingstatechange (){
|
|
switch (webrtc.signalingState){
|
|
case 'have-local-offer':
|
|
let uuid = $('#uuid').val();
|
|
let channel = $('#channel').val();
|
|
let url = "/stream/" + uuid + "/channel/" + channel + "/webrtc?uuid=" + uuid + '&channel=' + channel;
|
|
$.post(url, {
|
|
data: btoa(webrtc.localDescription.sdp)
|
|
}, function(data) {
|
|
try {
|
|
console.log(data);
|
|
webrtc.setRemoteDescription(new RTCSessionDescription({
|
|
type: 'answer',
|
|
sdp: atob(data)
|
|
}))
|
|
} catch (e) {
|
|
console.warn(e);
|
|
}
|
|
|
|
});
|
|
break;
|
|
case 'stable':
|
|
/*
|
|
* There is no ongoing exchange of offer and answer underway.
|
|
* This may mean that the RTCPeerConnection object is new, in which case both the localDescription and remoteDescription are null;
|
|
* it may also mean that negotiation is complete and a connection has been established.
|
|
*/
|
|
break;
|
|
|
|
case 'closed':
|
|
/*
|
|
* The RTCPeerConnection has been closed.
|
|
*/
|
|
break;
|
|
|
|
default:
|
|
console.log(`unhandled signalingState is ${webrtc.signalingState}`);
|
|
break;
|
|
}
|
|
}
|
|
|
|
async function handleNegotiationNeeded() {
|
|
let uuid = $('#uuid').val();
|
|
let channel = $('#channel').val();
|
|
let url = "/stream/" + uuid + "/channel/" + channel + "/webrtc?uuid=" + uuid + '&channel=' + channel;
|
|
let offer = await webrtc.createOffer();
|
|
|
|
await webrtc.setLocalDescription(offer);
|
|
$.post(url, {
|
|
data: btoa(webrtc.localDescription.sdp)
|
|
}, function(data) {
|
|
try {
|
|
console.log(data);
|
|
webrtc.setRemoteDescription(new RTCSessionDescription({
|
|
type: 'answer',
|
|
sdp: atob(data)
|
|
}))
|
|
} catch (e) {
|
|
console.warn(e);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
$("#videoPlayer")[0].addEventListener('loadeddata', () => {
|
|
$("#videoPlayer")[0].play();
|
|
makePic();
|
|
});
|
|
|
|
$("#videoPlayer")[0].addEventListener('error', () => {
|
|
console.log('video_error')
|
|
});
|
|
</script>
|