mirror of
https://github.com/giongto35/cloud-game.git
synced 2026-07-17 16:50:31 +00:00
87 lines
No EOL
2.3 KiB
HTML
87 lines
No EOL
2.3 KiB
HTML
<html>
|
|
|
|
<style>
|
|
textarea {
|
|
width: 60%;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<div>
|
|
<a href="https://github.com/poi5305/go-yuv2webRTC">https://github.com/poi5305/go-yuv2webRTC</a>
|
|
<br />
|
|
<a href="https://github.com/pions/webrtc/tree/v1.2.0/examples/gstreamer-send/jsfiddle">https://github.com/pions/webrtc/tree/v1.2.0/examples/gstreamer-send/jsfiddle</a>
|
|
</div>
|
|
|
|
<div id="remoteVideos"></div> <br />
|
|
Browser base64 Session Description <br /><textarea id="localSessionDescription" readonly="true"></textarea> <br />
|
|
|
|
Golang base64 Session Description: <br /><textarea id="remoteSessionDescription"> </textarea> <br/>
|
|
|
|
<button onclick="window.startSession()"> Start Session </button>
|
|
<div id="div"></div>
|
|
|
|
<div>
|
|
Refresh to retry
|
|
</div>
|
|
<script>
|
|
function postSession(session) {
|
|
if (session == "") {
|
|
return;
|
|
}
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
document.getElementById('remoteSessionDescription').value = this.responseText;
|
|
}
|
|
};
|
|
xhttp.open("POST", "/session", true);
|
|
xhttp.setRequestHeader("Content-type", "text/plain");
|
|
xhttp.send(session);
|
|
}
|
|
|
|
let pc = new RTCPeerConnection({
|
|
iceServers: [
|
|
{
|
|
urls: 'stun:stun.l.google.com:19302'
|
|
}
|
|
]
|
|
})
|
|
let log = msg => {
|
|
document.getElementById('div').innerHTML += msg + '<br>'
|
|
}
|
|
|
|
pc.ontrack = function (event) {
|
|
var el = document.createElement(event.track.kind)
|
|
el.srcObject = event.streams[0]
|
|
el.autoplay = true
|
|
el.controls = true
|
|
|
|
document.getElementById('remoteVideos').appendChild(el)
|
|
}
|
|
|
|
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
|
|
pc.onicecandidate = event => {
|
|
if (event.candidate === null) {
|
|
var session = btoa(JSON.stringify(pc.localDescription));
|
|
document.getElementById('localSessionDescription').value = session;
|
|
postSession(session)
|
|
}
|
|
}
|
|
|
|
pc.createOffer({offerToReceiveVideo: true, offerToReceiveAudio: true}).then(d => pc.setLocalDescription(d)).catch(log)
|
|
|
|
window.startSession = () => {
|
|
let sd = document.getElementById('remoteSessionDescription').value
|
|
if (sd === '') {
|
|
return alert('Session Description must not be empty')
|
|
}
|
|
|
|
try {
|
|
pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(atob(sd))))
|
|
} catch (e) {
|
|
alert(e)
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</html> |