mirror of
https://github.com/pion/webrtc.git
synced 2025-10-05 23:26:58 +08:00
1202dbaa06
This commit has breaking changes. This API change means we can no longer support an arbitrary number of receivers. For every track you want to receive you MUST call PeerConnection.AddTransceiver We do now support sending an multiple audio/video feeds. You can see this behavior via gstreamer-receive and gstreamer-send currently. Resolves #54
147 lines
4.8 KiB
HTML
147 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>sfu</title>
|
|
|
|
<style type="text/css">
|
|
.comments {
|
|
width:100%;/*auto width*/
|
|
overflow:auto;
|
|
word-break:break-all;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<video id="video1" width="320" height="240" autoplay muted controls></video> <br />
|
|
<input id="msginput" type="text" style="width: 320px;height: 24px;" placeholder="typing here..." onkeydown="sendMessage(this)"><br />
|
|
|
|
<button class="sessbtn" onclick="window.createSession(true)">Publish</button>
|
|
<button class="sessbtn" onclick="window.createSession(false)">Subscribe</button>
|
|
|
|
<div id="signalingContainer" style="display: none">
|
|
Client SDP<textarea class="comments" id="localSDP" readonly="true" rows=10 cols=30 onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>
|
|
Server SDP<textarea class="comments" id="remoteSDP" readonly="true" rows=10 cols=30 onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>
|
|
<!-- <button onclick="window.startSession()"> Start Session </button> -->
|
|
</div>
|
|
|
|
<div id="logs"></div>
|
|
<script>
|
|
var log = msg => {
|
|
document.getElementById('logs').innerHTML += msg + '<br>'
|
|
}
|
|
|
|
var sock = null;
|
|
var wsuri = "wss://" + location.host + "/ws";
|
|
var dataChannel = null;
|
|
window.onload = function() {
|
|
sock = new WebSocket(wsuri);
|
|
sock.onopen = function() {
|
|
<!-- console.log("websocket connected to " + wsuri); -->
|
|
}
|
|
sock.onclose = function(e) {
|
|
<!-- sock = new WebSocket('wss://' + location.host + '/ws'); -->
|
|
<!-- console.log("websocket connection closed (" + e.code + ")"); -->
|
|
}
|
|
sock.onmessage = function(e) {
|
|
<!-- console.log("websocket message received: " + e.data); -->
|
|
document.getElementById('remoteSDP').value = e.data
|
|
<!-- console.log("startSession"); -->
|
|
window.startSession()
|
|
}
|
|
sock.onerror = function(e) {
|
|
<!-- console.log("websocket error: " + e.data); -->
|
|
}
|
|
};
|
|
|
|
window.sendMessage = element => {
|
|
if(event.key === 'Enter') {
|
|
let message = element.value
|
|
if (dataChannel === null){
|
|
return;
|
|
}
|
|
if (message === ''){
|
|
return alert('Message must not be empty')
|
|
}
|
|
dataChannel.send(message)
|
|
element.value = ''
|
|
}
|
|
}
|
|
|
|
window.createSession = isPublisher => {
|
|
let pc = new RTCPeerConnection({
|
|
iceServers: [
|
|
{
|
|
urls: 'stun:stun.l.google.com:19302'
|
|
}
|
|
]
|
|
})
|
|
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
|
|
pc.onicecandidate = event => {
|
|
if (event.candidate === null) {
|
|
document.getElementById('localSDP').value = pc.localDescription.sdp;
|
|
<!-- document.getElementById('localSDP').value = pc.localDescription.sdp; -->
|
|
sock.send(pc.localDescription.sdp);
|
|
<!-- console.log("send sdp to server:==============\n" + pc.localDescription.sdp); -->
|
|
}
|
|
}
|
|
|
|
if (isPublisher) {
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: true})
|
|
.then(stream => {
|
|
pc.addStream(document.getElementById('video1').srcObject = stream)
|
|
pc.createOffer()
|
|
.then(d => pc.setLocalDescription(d))
|
|
.catch(log)
|
|
dataChannel = pc.createDataChannel('data')
|
|
}).catch(log)
|
|
<!-- console.log("Publisher createOffer") -->
|
|
} else {
|
|
<!-- console.log("Subcriber createOffer") -->
|
|
document.getElementById('msginput').style = 'display: none'
|
|
dataChannel = pc.createDataChannel('data')
|
|
dataChannel.onmessage = e => log(`receive data from '${dataChannel.label}' payload '${e.data}'`)
|
|
pc.addTransceiver('audio', {'direction': 'recvonly'})
|
|
pc.addTransceiver('video', {'direction': 'recvonly'})
|
|
|
|
pc.createOffer()
|
|
.then(d => pc.setLocalDescription(d))
|
|
.catch(log)
|
|
|
|
<!-- console.log("Subcriber ontrack") -->
|
|
pc.ontrack = function (event) {
|
|
var el = document.getElementById('video1')
|
|
el.srcObject = event.streams[0]
|
|
el.autoplay = true
|
|
el.controls = true
|
|
}
|
|
}
|
|
|
|
window.startSession = () => {
|
|
let sd = document.getElementById('remoteSDP').value
|
|
if (sd === '') {
|
|
return alert('Session Description must not be empty')
|
|
}
|
|
|
|
try {
|
|
pc.setRemoteDescription(new RTCSessionDescription({type:'answer', sdp:sd}))
|
|
} catch (e) {
|
|
alert(e)
|
|
}
|
|
}
|
|
|
|
let btns = document.getElementsByClassName('sessbtn')
|
|
for (let i = 0; i < btns.length; i++) {
|
|
btns[i].style = 'display: none'
|
|
}
|
|
|
|
document.getElementById('signalingContainer').style = 'display: block'
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|