This repository has been archived by the owner on Apr 16, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
126 lines (113 loc) · 3.57 KB
/
index.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html>
<head>
<meta charset="utf-8">
<title>How to send a MediaStreamTrack with ORTC</title>
<style>
#container {
margin: 0 auto 0 auto;
max-width: 40em;
}
video {
height: 225px;
width: calc(50% - 12px)
}
</style>
</head>
<body>
<div id="container">
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<p>
This shows how to send a MediaStreamTrack with ORTC. Note that ORTC is only supported in Microsoft Edge right now and (at the time of this writing) is considered experimental.
</p>
</div>
<script>
var iceOptions = { "gatherPolicy": "all", "iceServers": [] };
// At the Sender side, create an ICE gatherer, an ICE transport
// and a DTLS transport.
var gatherer1 = new RTCIceGatherer(iceOptions);
var transport1 = new RTCIceTransport(gatherer1);
var dtls1 = new RTCDtlsTransport(transport1);
// Do the same for the Receiver.
var gatherer2 = new RTCIceGatherer(iceOptions);
var transport2 = new RTCIceTransport(gatherer2);
var dtls2 = new RTCDtlsTransport(transport2);
var sender;
var receiver;
// Exchange ICE candidates.
gatherer1.onlocalcandidate = function (evt) {
console.log('1 -> 2', evt.candidate);
transport2.addRemoteCandidate(evt.candidate);
};
gatherer2.onlocalcandidate = function (evt) {
console.log('2 -> 1', evt.candidate);
transport1.addRemoteCandidate(evt.candidate);
};
// Next, start the ICE transports with the parameters from the remote side
// and the gatherer.
transport1.start(gatherer1, gatherer2.getLocalParameters(), 'controlling');
transport1.onicestatechange = function() {
console.log('ICE transport 1 state change', transport1.state);
};
transport2.start(gatherer2, gatherer1.getLocalParameters(), 'controlled');
transport2.onicestatechange = function() {
console.log('ICE transport 2 state change', transport2.state);
};
// Then, start the DTLS transports with the parameters from the remote side.
dtls1.start(dtls2.getLocalParameters());
dtls1.ondtlsstatechange = function() {
console.log('DTLS transport 1 state change', dtls1.state);
};
dtls2.start(dtls1.getLocalParameters());
dtls2.ondtlsstatechange = function() {
console.log('DTLS transport 2 state change', dtls2.state);
};
// call getUserMedia to get a MediaStream.
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
document.getElementById('localVideo').srcObject = stream;
// Determine RtpCodecParameters. Consider this black magic.
var params = RTCRtpReceiver.getCapabilities('video');
params.muxId = 1001;
params.encodings = [{
ssrc: 1001,
codecPayloadType: 0,
fec: 0,
rtx: 0,
priority: 1.0,
maxBitrate: 2000000.0,
minQuality: 0,
framerateBias: 0.5,
resolutionScale: 1.0,
framerateScale: 1.0,
active: true,
dependencyEncodingId: undefined,
encodingId: undefined
}];
// We need to transform the codec capability into a codec.
params.codecs.forEach(function (codec) {
codec.payloadType = codec.preferredPayloadType;
});
params.rtcp = {
cname: "",
reducedSize: false,
ssrc: 0,
mux: true
};
console.log(params);
// Start the RtpReceiver to receive the track.
receiver = new RTCRtpReceiver(dtls2, 'video');
receiver.receive(params);
var remoteStream = new MediaStream();
remoteStream.addTrack(receiver.track);
document.getElementById('remoteVideo').srcObject = remoteStream;
// Last but not least, create the RTPSender to send the track.
sender = new RTCRtpSender(stream.getVideoTracks()[0], dtls1);
sender.send(params);
})
.catch(function(err) {
console.error(err);
});
</script>
</body>
</html>