6 changed files with 96 additions and 397 deletions
@ -1,317 +0,0 @@ |
|||
export let WebRtcStreamer = function () { |
|||
|
|||
/** |
|||
* Interface with WebRTC-streamer API |
|||
* @constructor |
|||
* @param {string} videoElement - id of the video element tag |
|||
* @param {string} srvurl - url of webrtc-streamer (default is current location) |
|||
*/ |
|||
var WebRtcStreamer = function WebRtcStreamer(videoElement, srvurl) { |
|||
if (typeof videoElement === "string") { |
|||
this.videoElement = document.getElementById(videoElement); |
|||
} else { |
|||
this.videoElement = videoElement; |
|||
} |
|||
this.srvurl = srvurl || location.protocol + "//" + window.location.hostname + ":" + window.location.port; |
|||
this.pc = null; |
|||
|
|||
this.mediaConstraints = {offerToReceiveAudio: true, offerToReceiveVideo: true}; |
|||
|
|||
this.iceServers = null; |
|||
this.earlyCandidates = []; |
|||
} |
|||
|
|||
WebRtcStreamer.prototype._handleHttpErrors = function (response) { |
|||
if (!response.ok) { |
|||
throw Error(response.statusText); |
|||
} |
|||
return response; |
|||
} |
|||
|
|||
/** |
|||
* Connect a WebRTC Stream to videoElement |
|||
* @param {string} videourl - id of WebRTC video stream |
|||
* @param {string} audiourl - id of WebRTC audio stream |
|||
* @param {string} options - options of WebRTC call |
|||
* @param {string} stream - local stream to send |
|||
*/ |
|||
WebRtcStreamer.prototype.connect = function (videourl, audiourl, options, localstream) { |
|||
this.disconnect(); |
|||
|
|||
// getIceServers is not already received
|
|||
if (!this.iceServers) { |
|||
console.log("Get IceServers"); |
|||
|
|||
fetch(this.srvurl + "/api/getIceServers") |
|||
.then(this._handleHttpErrors) |
|||
.then((response) => (response.json())) |
|||
.then((response) => this.onReceiveGetIceServers.call(this, response, videourl, audiourl, options, localstream)) |
|||
.catch((error) => this.onError("getIceServers " + error)) |
|||
|
|||
} else { |
|||
this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Disconnect a WebRTC Stream and clear videoElement source |
|||
*/ |
|||
WebRtcStreamer.prototype.disconnect = function () { |
|||
if (this.videoElement?.srcObject) { |
|||
this.videoElement.srcObject.getTracks().forEach(track => { |
|||
track.stop() |
|||
this.videoElement.srcObject.removeTrack(track); |
|||
}); |
|||
} |
|||
if (this.pc) { |
|||
fetch(this.srvurl + "/api/hangup?peerid=" + this.pc.peerid) |
|||
.then(this._handleHttpErrors) |
|||
.catch((error) => this.onError("hangup " + error)) |
|||
|
|||
|
|||
try { |
|||
this.pc.close(); |
|||
} catch (e) { |
|||
console.log("Failure close peer connection:" + e); |
|||
} |
|||
this.pc = null; |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* GetIceServers callback |
|||
*/ |
|||
WebRtcStreamer.prototype.onReceiveGetIceServers = function (iceServers, videourl, audiourl, options, stream) { |
|||
this.iceServers = iceServers; |
|||
this.pcConfig = iceServers || {"iceServers": []}; |
|||
try { |
|||
this.createPeerConnection(); |
|||
|
|||
var callurl = this.srvurl + "/api/call?peerid=" + this.pc.peerid + "&url=" + encodeURIComponent(videourl); |
|||
if (audiourl) { |
|||
callurl += "&audiourl=" + encodeURIComponent(audiourl); |
|||
} |
|||
if (options) { |
|||
callurl += "&options=" + encodeURIComponent(options); |
|||
} |
|||
|
|||
if (stream) { |
|||
this.pc.addStream(stream); |
|||
} |
|||
|
|||
// clear early candidates
|
|||
this.earlyCandidates.length = 0; |
|||
|
|||
// create Offer
|
|||
var bind = this; |
|||
this.pc.createOffer(this.mediaConstraints).then(function (sessionDescription) { |
|||
console.log("Create offer:" + JSON.stringify(sessionDescription)); |
|||
|
|||
bind.pc.setLocalDescription(sessionDescription |
|||
, function () { |
|||
fetch(callurl, {method: "POST", body: JSON.stringify(sessionDescription)}) |
|||
.then(bind._handleHttpErrors) |
|||
.then((response) => (response.json())) |
|||
.catch((error) => bind.onError("call " + error)) |
|||
.then((response) => bind.onReceiveCall.call(bind, response)) |
|||
.catch((error) => bind.onError("call " + error)) |
|||
|
|||
} |
|||
, function (error) { |
|||
console.log("setLocalDescription error:" + JSON.stringify(error)); |
|||
}); |
|||
|
|||
}, function (error) { |
|||
alert("Create offer error:" + JSON.stringify(error)); |
|||
}); |
|||
|
|||
} catch (e) { |
|||
this.disconnect(); |
|||
alert("connect error: " + e); |
|||
} |
|||
} |
|||
|
|||
|
|||
WebRtcStreamer.prototype.getIceCandidate = function () { |
|||
fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid) |
|||
.then(this._handleHttpErrors) |
|||
.then((response) => (response.json())) |
|||
.then((response) => this.onReceiveCandidate.call(this, response)) |
|||
.catch((error) => bind.onError("getIceCandidate " + error)) |
|||
} |
|||
|
|||
/* |
|||
* create RTCPeerConnection |
|||
*/ |
|||
WebRtcStreamer.prototype.createPeerConnection = function () { |
|||
console.log("createPeerConnection config: " + JSON.stringify(this.pcConfig)); |
|||
this.pc = new RTCPeerConnection(this.pcConfig); |
|||
var pc = this.pc; |
|||
pc.peerid = Math.random(); |
|||
|
|||
var bind = this; |
|||
pc.onicecandidate = function (evt) { |
|||
bind.onIceCandidate.call(bind, evt); |
|||
}; |
|||
pc.onaddstream = function (evt) { |
|||
bind.onAddStream.call(bind, evt); |
|||
}; |
|||
pc.oniceconnectionstatechange = function (evt) { |
|||
console.log("oniceconnectionstatechange state: " + pc.iceConnectionState); |
|||
if (bind.videoElement) { |
|||
if (pc.iceConnectionState === "connected") { |
|||
bind.videoElement.style.opacity = "1.0"; |
|||
} else if (pc.iceConnectionState === "disconnected") { |
|||
bind.videoElement.style.opacity = "0.25"; |
|||
} else if ((pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed")) { |
|||
bind.videoElement.style.opacity = "0.5"; |
|||
} else if (pc.iceConnectionState === "new") { |
|||
bind.getIceCandidate.call(bind) |
|||
} |
|||
} |
|||
} |
|||
pc.ondatachannel = function (evt) { |
|||
console.log("remote datachannel created:" + JSON.stringify(evt)); |
|||
|
|||
evt.channel.onopen = function () { |
|||
console.log("remote datachannel open"); |
|||
this.send("remote channel openned"); |
|||
} |
|||
evt.channel.onmessage = function (event) { |
|||
console.log("remote datachannel recv:" + JSON.stringify(event.data)); |
|||
} |
|||
} |
|||
pc.onicegatheringstatechange = function () { |
|||
if (pc.iceGatheringState === "complete") { |
|||
const recvs = pc.getReceivers(); |
|||
|
|||
recvs.forEach((recv) => { |
|||
if (recv.track && recv.track.kind === "video") { |
|||
console.log("codecs:" + JSON.stringify(recv.getParameters().codecs)) |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
try { |
|||
var dataChannel = pc.createDataChannel("ClientDataChannel"); |
|||
dataChannel.onopen = function () { |
|||
console.log("local datachannel open"); |
|||
this.send("local channel openned"); |
|||
} |
|||
dataChannel.onmessage = function (evt) { |
|||
console.log("local datachannel recv:" + JSON.stringify(evt.data)); |
|||
} |
|||
} catch (e) { |
|||
console.log("Cannor create datachannel error: " + e); |
|||
} |
|||
|
|||
console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig)); |
|||
return pc; |
|||
} |
|||
|
|||
|
|||
/* |
|||
* RTCPeerConnection IceCandidate callback |
|||
*/ |
|||
WebRtcStreamer.prototype.onIceCandidate = function (event) { |
|||
if (event.candidate) { |
|||
if (this.pc.currentRemoteDescription) { |
|||
this.addIceCandidate(this.pc.peerid, event.candidate); |
|||
} else { |
|||
this.earlyCandidates.push(event.candidate); |
|||
} |
|||
} else { |
|||
console.log("End of candidates."); |
|||
} |
|||
} |
|||
|
|||
|
|||
WebRtcStreamer.prototype.addIceCandidate = function (peerid, candidate) { |
|||
fetch(this.srvurl + "/api/addIceCandidate?peerid=" + peerid, {method: "POST", body: JSON.stringify(candidate)}) |
|||
.then(this._handleHttpErrors) |
|||
.then((response) => (response.json())) |
|||
.then((response) => { |
|||
console.log("addIceCandidate ok:" + response) |
|||
}) |
|||
.catch((error) => this.onError("addIceCandidate " + error)) |
|||
} |
|||
|
|||
/* |
|||
* RTCPeerConnection AddTrack callback |
|||
*/ |
|||
WebRtcStreamer.prototype.onAddStream = function (event) { |
|||
console.log("Remote track added:" + JSON.stringify(event)); |
|||
|
|||
this.videoElement.srcObject = event.stream; |
|||
var promise = this.videoElement.play(); |
|||
if (promise !== undefined) { |
|||
var bind = this; |
|||
promise.catch(function (error) { |
|||
console.warn("error:" + error); |
|||
bind.videoElement.setAttribute("controls", true); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* AJAX /call callback |
|||
*/ |
|||
WebRtcStreamer.prototype.onReceiveCall = function (dataJson) { |
|||
var bind = this; |
|||
console.log("offer: " + JSON.stringify(dataJson)); |
|||
var descr = new RTCSessionDescription(dataJson); |
|||
this.pc.setRemoteDescription(descr |
|||
, function () { |
|||
console.log("setRemoteDescription ok"); |
|||
while (bind.earlyCandidates.length) { |
|||
var candidate = bind.earlyCandidates.shift(); |
|||
bind.addIceCandidate.call(bind, bind.pc.peerid, candidate); |
|||
} |
|||
|
|||
bind.getIceCandidate.call(bind) |
|||
} |
|||
, function (error) { |
|||
console.log("setRemoteDescription error:" + JSON.stringify(error)); |
|||
}); |
|||
} |
|||
|
|||
/* |
|||
* AJAX /getIceCandidate callback |
|||
*/ |
|||
WebRtcStreamer.prototype.onReceiveCandidate = function (dataJson) { |
|||
console.log("candidate: " + JSON.stringify(dataJson)); |
|||
if (dataJson) { |
|||
for (var i = 0; i < dataJson.length; i++) { |
|||
var candidate = new RTCIceCandidate(dataJson[i]); |
|||
|
|||
console.log("Adding ICE candidate :" + JSON.stringify(candidate)); |
|||
this.pc.addIceCandidate(candidate |
|||
, function () { |
|||
console.log("addIceCandidate OK"); |
|||
} |
|||
, function (error) { |
|||
console.log("addIceCandidate error:" + JSON.stringify(error)); |
|||
}); |
|||
} |
|||
this.pc.addIceCandidate(); |
|||
} |
|||
} |
|||
|
|||
|
|||
/* |
|||
* AJAX callback for Error |
|||
*/ |
|||
WebRtcStreamer.prototype.onError = function (status) { |
|||
console.log("onError:" + status); |
|||
} |
|||
|
|||
return WebRtcStreamer; |
|||
}; |
|||
|
|||
if (typeof window !== 'undefined' && typeof window.document !== 'undefined') { |
|||
window.WebRtcStreamer = WebRtcStreamer; |
|||
} |
|||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { |
|||
module.exports = WebRtcStreamer; |
|||
} |
|||
Loading…
Reference in new issue