62 lines
1.5 KiB
HTML
62 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<script type="text/javascript">
|
|
const WEBSOCKET_URL = "ws://127.0.0.1:8081/";
|
|
|
|
var pc, ws;
|
|
|
|
async function start() {
|
|
pc = new RTCPeerConnection();
|
|
// pc.
|
|
pc.ontrack = (evt) => {
|
|
console.log("触发");
|
|
|
|
document.querySelector("#videoCtl").srcObject = evt.streams[0];
|
|
};
|
|
pc.onicecandidate = (evt) =>
|
|
evt.candidate && ws.send(JSON.stringify(evt.candidate));
|
|
|
|
ws = new WebSocket(document.querySelector("#websockurl").value, []);
|
|
ws.onmessage = async function (evt) {
|
|
var obj = JSON.parse(evt.data);
|
|
if (obj?.candidate) {
|
|
pc.addIceCandidate(obj);
|
|
} else if (obj?.sdp) {
|
|
await pc.setRemoteDescription(new RTCSessionDescription(obj));
|
|
pc.createAnswer()
|
|
.then((answer) => pc.setLocalDescription(answer))
|
|
.then(() => ws.send(JSON.stringify(pc.localDescription)));
|
|
}
|
|
};
|
|
}
|
|
|
|
async function closePeer() {
|
|
await pc?.close();
|
|
await ws?.close();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<video
|
|
controls
|
|
autoplay="autoplay"
|
|
id="videoCtl"
|
|
width="640"
|
|
height="480"
|
|
></video>
|
|
|
|
<div>
|
|
<input type="text" id="websockurl" size="40" />
|
|
<button type="button" class="btn btn-success" onclick="start();">
|
|
Start
|
|
</button>
|
|
<button type="button" class="btn btn-success" onclick="closePeer();">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
document.querySelector("#websockurl").value = WEBSOCKET_URL;
|
|
</script>
|