138 lines
4.6 KiB
HTML
138 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
|
|
SPDX-License-Identifier: MIT
|
|
-->
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
</head>
|
|
|
|
<body>
|
|
<h3> Local Video </h3>
|
|
<video id="localVideo" width="160" height="120" autoplay muted></video>
|
|
<br />
|
|
|
|
<h3> Remote Video </h3>
|
|
<div id="remoteVideos"></div>
|
|
<br />
|
|
|
|
<h3> Logs </h3>
|
|
<div id="logs"></div>
|
|
<button onclick="call()">呼叫</button>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
let ws;
|
|
let pc;
|
|
|
|
const call = () => {
|
|
console.log(ws);
|
|
pc?.createOffer().then(function (offer) {
|
|
pc?.setLocalDescription(offer);
|
|
ws.send(JSON.stringify({
|
|
type: "offer", "data": {
|
|
"to": "01J8RT7YMKZNVWTYAECJ55S6W0",
|
|
"from": "31283192",
|
|
"description": offer,
|
|
"media": "video",
|
|
"session_id": "01J8RT7YMKZNVWTYAECJ55S6W0-31283192",
|
|
}
|
|
}))
|
|
// socketService.send({ type: 'offer', data: offer })
|
|
}).catch(function (error) {
|
|
// 错误处理
|
|
console.error(error);
|
|
});
|
|
|
|
}
|
|
// wss://rw.quwanya.cn/ws
|
|
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
|
|
.then(stream => {
|
|
const configuration = {
|
|
iceServers: [{ urls: 'stun:127.0.0.1:19302' }]
|
|
};
|
|
pc = new RTCPeerConnection(configuration)
|
|
pc.ontrack = function (event) {
|
|
if (event.track.kind === 'audio') {
|
|
return
|
|
}
|
|
let el = document.createElement(event.track.kind)
|
|
el.srcObject = event.streams[0]
|
|
el.autoplay = true
|
|
el.controls = true
|
|
document.getElementById('remoteVideos').appendChild(el)
|
|
event.track.onmute = function (event) {
|
|
el.play()
|
|
}
|
|
event.streams[0].onremovetrack = ({ track }) => {
|
|
if (el.parentNode) {
|
|
el.parentNode.removeChild(el)
|
|
}
|
|
}
|
|
}
|
|
|
|
document.getElementById('localVideo').srcObject = stream
|
|
stream.getTracks().forEach(track => pc.addTrack(track, stream))
|
|
ws = new WebSocket("ws://rw.quwanya.cn:12217/ws")
|
|
pc.onicecandidate = e => {
|
|
if (!e.candidate) {
|
|
return
|
|
}
|
|
ws.send(JSON.stringify({ type: 'candidate', data: e }))
|
|
}
|
|
ws.addEventListener('open', function (event) {
|
|
ws.send(JSON.stringify({
|
|
type: "new", "data": {
|
|
"name": "AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 )",
|
|
"id": "31283192",
|
|
"user_agent": "flutter-webrtc/js"
|
|
}
|
|
}))
|
|
});
|
|
ws.onclose = function (evt) {
|
|
window.alert("Websocket has closed")
|
|
}
|
|
ws.onmessage = function (evt) {
|
|
let msg = JSON.parse(evt.data)
|
|
if (!msg) {
|
|
return console.log('failed to parse msg')
|
|
}
|
|
switch (msg.type) {
|
|
case 'offer':
|
|
let offer = msg.data.description
|
|
pc.setRemoteDescription(offer)
|
|
pc.createAnswer().then(answer => {
|
|
pc.setLocalDescription(answer)
|
|
ws.send(JSON.stringify({
|
|
type: 'answer', data: {
|
|
'to': msg.data.from,
|
|
'from': "31283192",
|
|
'description': { 'sdp': answer.sdp, 'type': answer.type },
|
|
'session_id': msg.data.from + "-31283192",
|
|
}
|
|
}))
|
|
})
|
|
return
|
|
|
|
case 'candidate':
|
|
let candidate = msg.data.candidate
|
|
if (!candidate) {
|
|
return console.log('failed to parse candidate')
|
|
}
|
|
pc.addIceCandidate(candidate)
|
|
case "answer":
|
|
pc?.setRemoteDescription(msg.data.description)
|
|
}
|
|
}
|
|
|
|
ws.onerror = function (evt) {
|
|
console.log("ERROR: " + evt.data)
|
|
}
|
|
}).catch(window.alert)
|
|
</script>
|
|
|
|
</html> |