|
|
@@ -1,95 +1,193 @@
|
|
|
-
|
|
|
export class SrsRTC {
|
|
|
- constructor(url){
|
|
|
-
|
|
|
- this.stream = new MediaStream();
|
|
|
- this.url = url;
|
|
|
- this.offer = null;
|
|
|
- this.pc =null;
|
|
|
- // this.pc = new RTCPeerConnection(null);
|
|
|
- // this.pc.ontrack = (event) => {
|
|
|
- // // https://webrtc.org/getting-started/remote-streams
|
|
|
- // console.warn('event',event.track)
|
|
|
- // if(this.stream){
|
|
|
- // this.stream.addTrack(event.track);
|
|
|
- // }
|
|
|
- // };
|
|
|
+ constructor(url) {
|
|
|
+ this.stream = new MediaStream();
|
|
|
+ this.url = url;
|
|
|
+ this.offer = null;
|
|
|
|
|
|
+ const supportsInsertableStreams =
|
|
|
+ !!RTCRtpSender.prototype.createEncodedStreams;
|
|
|
+ console.log("supportsInsertableStreams", supportsInsertableStreams);
|
|
|
+ // this.pc.ontrack = (event) => {
|
|
|
+ // // https://webrtc.org/getting-started/remote-streams
|
|
|
+ // console.warn('event',event.track)
|
|
|
+ // if(this.stream){
|
|
|
+ // this.stream.addTrack(event.track);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ this.pc = new RTCPeerConnection({
|
|
|
+ encodedInsertableStreams: true,
|
|
|
+ });
|
|
|
+ this.pc.addEventListener("icecandidate", (e) =>
|
|
|
+ this.onIceCandidate(this.pc, e)
|
|
|
+ );
|
|
|
+ this.pc.addEventListener("datachannel", this.ondatachannel);
|
|
|
+ // var dc = this.pc.createDataChannel("datachannel");
|
|
|
+ // dc.onmessage = function (event) {
|
|
|
+ // console.log("received: " + event.data);
|
|
|
+ // };
|
|
|
+
|
|
|
+ // dc.onopen = function () {
|
|
|
+ // console.log("datachannel open");
|
|
|
+ // };
|
|
|
+
|
|
|
+ // dc.onclose = function () {
|
|
|
+ // console.log("datachannel close");
|
|
|
+ // };
|
|
|
+ // this.pc.ondatachannel = (event) => {
|
|
|
+ // console.log("ondatachannel", event);
|
|
|
+ // // this.inputChannel.onopen = () => {
|
|
|
+ // // console.log("连接");
|
|
|
+ // // };
|
|
|
+ // // this.inputChannel.onmessage = (event) => {
|
|
|
+ // // // mark00 rtcp接收
|
|
|
+ // // console.log("连接", event);
|
|
|
+ // // };
|
|
|
+ // // this.inputChannel.close = (event) => {
|
|
|
+ // // // mark00 rtcp接收
|
|
|
+ // // console.log("close", event);
|
|
|
+ // // };
|
|
|
+ // };
|
|
|
+ }
|
|
|
+ onIceCandidate(event) {
|
|
|
+ // console.warn("icecandidate", event);
|
|
|
+ }
|
|
|
+ ondatachannel(event) {
|
|
|
+ console.warn("ondatachannel", ondatachannel);
|
|
|
+ }
|
|
|
+
|
|
|
+ close() {
|
|
|
+ var remoteVideo = document.querySelector("#testVideoFeed");
|
|
|
+ if (remoteVideo.srcObject) {
|
|
|
+ remoteVideo.srcObject.getTracks().forEach((track) => track.stop());
|
|
|
}
|
|
|
- close(){
|
|
|
- var remoteVideo = document.querySelector("#testVideoFeed");
|
|
|
- if(remoteVideo.srcObject){
|
|
|
- remoteVideo.srcObject.getTracks().forEach(track => track.stop());
|
|
|
- }
|
|
|
- this.pc && this.pc.close();
|
|
|
- this.pc = null;
|
|
|
- }
|
|
|
-
|
|
|
- async getVideo(clipUrl){
|
|
|
+ this.pc && this.pc.close();
|
|
|
+ this.pc = null;
|
|
|
+ }
|
|
|
|
|
|
- if(!this.pc){
|
|
|
- this.pc = new RTCPeerConnection(null);
|
|
|
- this.pc.ontrack = (event) => {
|
|
|
- // https://webrtc.org/getting-started/remote-streams
|
|
|
- console.log('event',event)
|
|
|
- if(this.stream){
|
|
|
- // this.stream.removeTrack(event.track));
|
|
|
- const videoTrack = this.stream.getVideoTracks().find(i=>i.kind ==='video')
|
|
|
- console.log('旧videoTrack',videoTrack)
|
|
|
- if(videoTrack){
|
|
|
- this.stream.removeTrack(videoTrack);
|
|
|
- }
|
|
|
- // if(this.stream.removeTrack())
|
|
|
- this.stream.addTrack(event.track);
|
|
|
- }
|
|
|
- // mediaRecorder.
|
|
|
- };
|
|
|
- this.pc.ondatachannel =(data)=>{
|
|
|
- console.log('data',data)
|
|
|
- }
|
|
|
- this.pc.onaddstream = function (obj) {
|
|
|
- console.error(obj)
|
|
|
- }
|
|
|
+ async start(clipUrl) {
|
|
|
+ this.pc.addTransceiver("video", { direction: "recvonly" });
|
|
|
+ const serverApi = "https://demo-kms.4dage.com:443/rtc/v1/play/";
|
|
|
+ const tid = Number(parseInt(new Date().getTime() * Math.random() * 100))
|
|
|
+ .toString(16)
|
|
|
+ .slice(0, 7);
|
|
|
+ var offer = await this.pc.createOffer();
|
|
|
+ await this.pc.setLocalDescription(offer);
|
|
|
+ const session = await new Promise(function (resolve, reject) {
|
|
|
+ // @see https://github.com/rtcdn/rtcdn-draft
|
|
|
+ var data = {
|
|
|
+ api: serverApi,
|
|
|
+ tid: tid,
|
|
|
+ streamurl: clipUrl,
|
|
|
+ clientip: null,
|
|
|
+ sdp: offer.sdp,
|
|
|
+ };
|
|
|
+ console.log("Generated offer: ", data);
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: serverApi,
|
|
|
+ data: JSON.stringify(data),
|
|
|
+ contentType: "application/json",
|
|
|
+ dataType: "json",
|
|
|
+ })
|
|
|
+ .done(function (data) {
|
|
|
+ console.log("Got answer: ", data);
|
|
|
+ if (data.code) {
|
|
|
+ reject(data);
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
+ resolve(data);
|
|
|
+ })
|
|
|
+ .fail(function (reason) {
|
|
|
+ reject(reason);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ await this.pc.setRemoteDescription(
|
|
|
+ new RTCSessionDescription({ type: "answer", sdp: session.sdp })
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ async getVideo(clipUrl) {
|
|
|
+ if (!this.pc) {
|
|
|
+ this.pc = new RTCPeerConnection(null);
|
|
|
+ this.pc.ontrack = (event) => {
|
|
|
+ // https://webrtc.org/getting-started/remote-streams
|
|
|
+ console.log("event", event);
|
|
|
+ if (this.stream) {
|
|
|
+ // this.stream.removeTrack(event.track));
|
|
|
+ const videoTrack = this.stream
|
|
|
+ .getVideoTracks()
|
|
|
+ .find((i) => i.kind === "video");
|
|
|
+ console.log("旧videoTrack", videoTrack);
|
|
|
+ if (videoTrack) {
|
|
|
+ this.stream.removeTrack(videoTrack);
|
|
|
+ }
|
|
|
+ // if(this.stream.removeTrack())
|
|
|
+ this.stream.addTrack(event.track);
|
|
|
}
|
|
|
-
|
|
|
- this.pc.addTransceiver("video", {direction: "recvonly"});
|
|
|
+ // mediaRecorder.
|
|
|
+ };
|
|
|
+
|
|
|
+ this.pc.ondatachannel = (event) => {
|
|
|
+ console.log("ondatachannel", ondatachannel);
|
|
|
+ this.inputChannel.onopen = () => {
|
|
|
+ console.log("连接");
|
|
|
+ };
|
|
|
+ this.inputChannel.onmessage = (event) => {
|
|
|
+ // mark00 rtcp接收
|
|
|
+ console.log("连接", event);
|
|
|
+ };
|
|
|
+ this.inputChannel.close = (event) => {
|
|
|
+ // mark00 rtcp接收
|
|
|
+ console.log("close", event);
|
|
|
+ };
|
|
|
+ };
|
|
|
+ }
|
|
|
|
|
|
- const serverApi ='https://demo-kms.4dage.com:443/rtc/v1/play/';
|
|
|
- const tid = Number(parseInt(new Date().getTime()*Math.random()*100)).toString(16).slice(0, 7);
|
|
|
- var offer = await this.pc.createOffer();
|
|
|
- this.offer = offer;
|
|
|
- await this.pc.setLocalDescription(offer);
|
|
|
- const session = await new Promise(function(resolve, reject) {
|
|
|
- // @see https://github.com/rtcdn/rtcdn-draft
|
|
|
- var data = {
|
|
|
- api: serverApi,
|
|
|
- tid: tid,
|
|
|
- streamurl: clipUrl,
|
|
|
- clientip: null,
|
|
|
- sdp: offer.sdp
|
|
|
- };
|
|
|
- console.log("Generated offer: ", data);
|
|
|
- $.ajax({
|
|
|
- type: "POST", url: serverApi, data: JSON.stringify(data),
|
|
|
- contentType:'application/json', dataType: 'json'
|
|
|
- }).done(function(data) {
|
|
|
- console.log("Got answer: ", data);
|
|
|
- if (data.code) {
|
|
|
- reject(data); return;
|
|
|
- }
|
|
|
+ this.pc.addTransceiver("video", { direction: "recvonly" });
|
|
|
|
|
|
- resolve(data);
|
|
|
- }).fail(function(reason){
|
|
|
- reject(reason);
|
|
|
- });
|
|
|
+ const serverApi = "https://demo-kms.4dage.com:443/rtc/v1/play/";
|
|
|
+ const tid = Number(parseInt(new Date().getTime() * Math.random() * 100))
|
|
|
+ .toString(16)
|
|
|
+ .slice(0, 7);
|
|
|
+ var offer = await this.pc.createOffer();
|
|
|
+ this.offer = offer;
|
|
|
+ await this.pc.setLocalDescription(offer);
|
|
|
+ const session = await new Promise(function (resolve, reject) {
|
|
|
+ // @see https://github.com/rtcdn/rtcdn-draft
|
|
|
+ var data = {
|
|
|
+ api: serverApi,
|
|
|
+ tid: tid,
|
|
|
+ streamurl: clipUrl,
|
|
|
+ clientip: null,
|
|
|
+ sdp: offer.sdp,
|
|
|
+ };
|
|
|
+ console.log("Generated offer: ", data);
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: serverApi,
|
|
|
+ data: JSON.stringify(data),
|
|
|
+ contentType: "application/json",
|
|
|
+ dataType: "json",
|
|
|
+ })
|
|
|
+ .done(function (data) {
|
|
|
+ console.log("Got answer: ", data);
|
|
|
+ if (data.code) {
|
|
|
+ reject(data);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ resolve(data);
|
|
|
+ })
|
|
|
+ .fail(function (reason) {
|
|
|
+ reject(reason);
|
|
|
});
|
|
|
- await this.pc.setRemoteDescription(
|
|
|
- new RTCSessionDescription({type: 'answer', sdp: session.sdp})
|
|
|
- );
|
|
|
-
|
|
|
-
|
|
|
- return session;
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
+ });
|
|
|
+ await this.pc.setRemoteDescription(
|
|
|
+ new RTCSessionDescription({ type: "answer", sdp: session.sdp })
|
|
|
+ );
|
|
|
+
|
|
|
+ return session;
|
|
|
+ }
|
|
|
+}
|
zhouenguang