-
Notifications
You must be signed in to change notification settings - Fork 36
/
publish.html
112 lines (107 loc) · 4.01 KB
/
publish.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试WebRTC推流</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay muted>
</video>
<!-- <button id="sw" onclick="action()" type="button" style="width:100px;height:30px;display: block;">unpublish</button> -->
<div id="camera"></div>
<pre>
<code id="remoteSdp">
</code>
</pre>
</body>
<script>
let action = () => { console.log('action not set'); };
const screenshare = location.pathname.endsWith("screenshare");
(async () => {
const searchParams = new URLSearchParams(location.search);
const $camera = document.getElementById('camera');
navigator.mediaDevices.enumerateDevices().then((devices) => {
devices.forEach((device) => {
console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
if (device.kind == 'videoinput' && !screenshare) {
const a = document.createElement('a');
a.href = location.pathname + '?videoinput=' + device.deviceId;
a.innerHTML = device.label;
$camera.appendChild(a);
$camera.appendChild(document.createElement('br'));
}
});
});
const mediaStream = await (screenshare ? navigator.mediaDevices.getDisplayMedia() : navigator.mediaDevices.getUserMedia({
video: searchParams.get('videoinput') ? {
deviceId: searchParams.get('videoinput'),
} : true,
audio: true,
}));
searchParams.delete('videoinput');
document.getElementById('video').srcObject = mediaStream;
const pc = new RTCPeerConnection();
pc.oniceconnectionstatechange = () => {
console.log('oniceconnectionstatechange', pc.iceConnectionState);
};
pc.onicecandidate = (e) => {
console.log('onicecandidate', e.candidate);
};
const streamPath = searchParams.get('streamPath') || 'live/webrtc';
searchParams.delete('streamPath');
mediaStream.id = streamPath;
mediaStream.getTracks().forEach((t) => {
pc.addTrack(t, mediaStream);
});
// const videoTransceiver = pc.addTransceiver(mediaStream.getVideoTracks()[0], { direction: 'sendonly' });
// const audioTransceiver = pc.addTransceiver(mediaStream.getAudioTracks()[0], { direction: 'sendonly' });
// const dc = pc.createDataChannel('sdp');
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
const result = await fetch(
`/webrtc/push/${streamPath}${location.search ? `?${searchParams.toString()}` : ''}`,
{
method: 'POST',
mode: 'cors',
cache: 'no-cache',
credentials: 'include',
redirect: 'follow',
referrerPolicy: 'no-referrer',
headers: { 'Content-Type': 'application/sdp' },
body: offer.sdp,
},
);
const remoteSdp = await result.text();
document.getElementById('remoteSdp').innerText = remoteSdp;
await pc.setRemoteDescription(
new RTCSessionDescription({ type: 'answer', sdp: remoteSdp }),
);
// dc.onmessage = async (e) => {
// await pc.setRemoteDescription(
// new RTCSessionDescription({ type: 'answer', sdp: e.data }),
// );
// };
// const publish = async () => {
// videoTransceiver.direction = 'sendonly';
// audioTransceiver.direction = 'sendonly';
// const offer = await pc.createOffer();
// await pc.setLocalDescription(offer);
// dc.send('1' + offer.sdp);
// action = unpublish;
// document.getElementById('sw').innerText = 'unpublish';
// };
// const unpublish = async () => {
// videoTransceiver.direction = 'inactive';
// audioTransceiver.direction = 'inactive';
// const offer = await pc.createOffer();
// await pc.setLocalDescription(offer);
// dc.send('0' + offer.sdp);
// action = publish;
// document.getElementById('sw').innerText = 'publish';
// };
// action = unpublish;
})()
</script>
</html>