export class SrsRTC { 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()); } this.pc && this.pc.close(); this.pc = null; } 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); } // 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); }; }; } 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(); 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; } }