优化播放逻辑

go.mod

@@ -3,7 +3,7 @@ module github.com/Monibuca/plugin-webrtc
 go 1.13
 
 require (
-	github.com/Monibuca/engine/v2 v2.1.4
+	github.com/Monibuca/engine/v2 v2.1.7
 	github.com/Monibuca/plugin-rtp v0.0.0-20200531020026-1b12ef72f221
 	github.com/pion/rtcp v1.2.1
 	github.com/pion/webrtc/v2 v2.2.14

go.sum

@@ -2,8 +2,8 @@ github.com/BurntSushi/toml v0.3.1 h1:WXkYYl6Yr3qBf1K79EBnL4mak0OimBfB0XUf9Vl28OQ
 github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
 github.com/Monibuca/engine/v2 v2.1.0 h1:pHeDCEFDusKFsZLpconYj8U5LCaWApnjd+yQRHYgQsQ=
 github.com/Monibuca/engine/v2 v2.1.0/go.mod h1:34EYjjV15G6myuHOKaJkO7y5tJ1Arq/NfC9Weacr2mc=
-github.com/Monibuca/engine/v2 v2.1.4 h1:TZK6o/8giu4Yzd9sqntAHZkirqxMahaak/TMiMCSAKg=
+github.com/Monibuca/engine/v2 v2.1.7 h1:/2k2Uupufizo0jiIkdYJsdHIf6VNvpLIxVVeIGGQgD4=
-github.com/Monibuca/engine/v2 v2.1.4/go.mod h1:34EYjjV15G6myuHOKaJkO7y5tJ1Arq/NfC9Weacr2mc=
+github.com/Monibuca/engine/v2 v2.1.7/go.mod h1:34EYjjV15G6myuHOKaJkO7y5tJ1Arq/NfC9Weacr2mc=
 github.com/Monibuca/plugin-rtp v0.0.0-20200531020026-1b12ef72f221 h1:WBC0eLB7J3PXWZiu4cr9kdcNAkR/74jf0+7zkYDzwZQ=
 github.com/Monibuca/plugin-rtp v0.0.0-20200531020026-1b12ef72f221/go.mod h1:62NoacApn7++z5wQnr9ktSfn+vVZL0eSvbD/EqoSHoM=
 github.com/StackExchange/wmi v0.0.0-20190523213315-cbe66965904d h1:G0m3OIz70MZUWq3EgK3CesDbo8upS2Vm9/P3FtgI+Jk=
@@ -63,7 +63,6 @@ github.com/pion/rtcp v1.2.1 h1:S3yG4KpYAiSmBVqKAfgRa5JdwBNj4zK3RLUa8JYdhak=
 github.com/pion/rtcp v1.2.1/go.mod h1:a5dj2d6BKIKHl43EnAOIrCczcjESrtPuMgfmL6/K6QM=
 github.com/pion/rtp v1.5.4 h1:PuNg6xqV3brIUihatcKZj1YDUs+M45L0ZbrZWYtkDxY=
 github.com/pion/rtp v1.5.4/go.mod h1:bg60AL5GotNOlYZsqycbhDtEV3TkfbpXG0KBiUq29Mg=
-github.com/pion/rtp v1.5.5 h1:WTqWdmBuIj+luh8Wg6XVX+w7OytZHAIgtC7uSvgEl9Y=
 github.com/pion/sctp v1.7.6 h1:8qZTdJtbKfAns/Hv5L0PAj8FyXcsKhMH1pKUCGisQg4=
 github.com/pion/sctp v1.7.6/go.mod h1:ichkYQ5tlgCQwEwvgfdcAolqx1nHbYCxo4D7zK/K0X8=
 github.com/pion/sdp/v2 v2.3.7 h1:WUZHI3pfiYCaE8UGUYcabk863LCK+Bq3AklV5O0oInQ=
@@ -78,10 +77,8 @@ github.com/pion/transport v0.10.0 h1:9M12BSneJm6ggGhJyWpDveFOstJsTiQjkLf4M44rm80
 github.com/pion/transport v0.10.0/go.mod h1:BnHnUipd0rZQyTVB2SBGojFHT9CBt5C5TcsJSQGkvSE=
 github.com/pion/turn/v2 v2.0.3 h1:SJUUIbcPoehlyZgMyIUbBBDhI03sBx32x3JuSIBKBWA=
 github.com/pion/turn/v2 v2.0.3/go.mod h1:kl1hmT3NxcLynpXVnwJgObL8C9NaCyPTeqI2DcCpSZs=
-github.com/pion/webrtc v1.2.0 h1:3LGGPQEMacwG2hcDfhdvwQPz315gvjZXOfY4vaF4+I4=
 github.com/pion/webrtc/v2 v2.2.14 h1:bRjnXTqMDJ3VERPF45z439Sv6QfDfjdYvdQk1QcIx8M=
 github.com/pion/webrtc/v2 v2.2.14/go.mod h1:G+8lShCMbHhjpMF1ZJBkyuvrxXrvW4bxs3nOt+mJ2UI=
-github.com/pion/webrtc/v2 v2.2.17 h1:2nkMUXFHfdOp1zOLmBgrbFrKDgTxDGk/GVcI7PQefp4=
 github.com/pkg/errors v0.8.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=

main.go

@@ -10,7 +10,6 @@ import (
 
 	. "github.com/Monibuca/engine/v2"
 	"github.com/Monibuca/engine/v2/avformat"
-	"github.com/Monibuca/engine/v2/util"
 	. "github.com/Monibuca/plugin-rtp"
 	"github.com/pion/rtcp"
 	. "github.com/pion/webrtc/v2"
@@ -48,7 +47,6 @@ var config struct {
 // 	port int
 // }
 
-var ssrcLock sync.Mutex
 var playWaitList WaitList
 
 type WaitList struct {
@@ -71,7 +69,6 @@ func (wl *WaitList) Get(k string) *WebRTC {
 	return wl.m[k]
 }
 func init() {
-
 	InstallPlugin(&PluginConfig{
 		Config: &config,
 		Name:   "WebRTC",
@@ -87,6 +84,7 @@ type WebRTC struct {
 	videoTrack *Track
 	m          MediaEngine
 	api        *API
+	payloader  avformat.H264
 	// codecs.H264Packet
 	// *os.File
 }
@@ -101,33 +99,39 @@ func (rtc *WebRTC) Play(streamPath string) bool {
 			return nil
 		}
 		if packet.IsSequence {
+			rtc.payloader.PPS = sub.PPS
+			rtc.payloader.SPS = sub.SPS
 		} else {
 			var s uint32
 			if lastTimeStamp > 0 {
 				s = packet.Timestamp - lastTimeStamp
 			}
-			if packet.IsKeyFrame {
+			lastTimeStamp = packet.Timestamp
-				rtc.videoTrack.WriteSample(media.Sample{
+			rtc.videoTrack.WriteSample(media.Sample{
-					Data:    sub.SPS,
+				Data:    packet.Payload,
-					Samples: 0,
+				Samples: s * 90,
-				})
+			})
-				rtc.videoTrack.WriteSample(media.Sample{
+			// if packet.IsKeyFrame {
-					Data:    sub.PPS,
+			// 	rtc.videoTrack.WriteSample(media.Sample{
-					Samples: 0,
+			// 		Data:    sub.SPS,
-				})
+			// 		Samples: 0,
-			}
+			// 	})
-			for payload := packet.Payload[5:]; len(payload) > 4; {
+			// 	rtc.videoTrack.WriteSample(media.Sample{
-				var naulLen = int(util.BigEndian.Uint32(payload))
+			// 		Data:    sub.PPS,
-				payload = payload[4:]
+			// 		Samples: 0,
-				rtc.videoTrack.WriteSample(media.Sample{
+			// 	})
-					Data:    payload[:naulLen],
+			// }
-					Samples: s * 90,
+			// for payload := packet.Payload[5:]; len(payload) > 4; {
-				})
+			// 	var naulLen = int(util.BigEndian.Uint32(payload))
-				s = 0
+			// 	payload = payload[4:]
-				payload = payload[naulLen:]
+			// 	rtc.videoTrack.WriteSample(media.Sample{
-			}
+			// 		Data:    payload[:naulLen],
+			// 		Samples: s * 90,
+			// 	})
+			// 	s = 0
+			// 	payload = payload[naulLen:]
+			// }
 		}
-		lastTimeStamp = packet.Timestamp
 		return nil
 	}
 	// go sub.Subscribe(streamPath)
@@ -135,10 +139,9 @@ func (rtc *WebRTC) Play(streamPath string) bool {
 		Printf("%s Connection State has changed %s ", streamPath, connectionState.String())
 		switch connectionState {
 		case ICEConnectionStateDisconnected:
-			if rtc.Stream != nil {
+			sub.Close()
-				rtc.Stream.Close()
-			}
 		case ICEConnectionStateConnected:
+
 			//rtc.videoTrack = rtc.GetSenders()[0].Track()
 			sub.Subscribe(streamPath)
 		}
@@ -217,13 +220,17 @@ func (rtc *WebRTC) Publish(streamPath string) bool {
 	}
 	return true
 }
-func (rtc *WebRTC) GetAnswer(localSdp SessionDescription) ([]byte, error) {
+func (rtc *WebRTC) GetAnswer() ([]byte, error) {
 	// Sets the LocalDescription, and starts our UDP listeners
-	if err := rtc.SetLocalDescription(localSdp); err != nil {
+	answer, err := rtc.CreateAnswer(nil)
+	if err != nil {
+		return nil, err
+	}
+	if err := rtc.SetLocalDescription(answer); err != nil {
 		Println(err)
 		return nil, err
 	}
-	if bytes, err := json.Marshal(localSdp); err != nil {
+	if bytes, err := json.Marshal(answer); err != nil {
 		Println(err)
 		return bytes, err
 	} else {
@@ -235,84 +242,84 @@ func run() {
 	http.HandleFunc("/webrtc/play", func(w http.ResponseWriter, r *http.Request) {
 		streamPath := r.URL.Query().Get("streamPath")
 		var offer SessionDescription
+		var rtc WebRTC
 		bytes, err := ioutil.ReadAll(r.Body)
-		err = json.Unmarshal(bytes, &offer)
 		defer func() {
 			if err != nil {
 				Println(err)
-				fmt.Fprint(w, err)
+				fmt.Fprintf(w, `{"errmsg":"%s"}`, err)
 				return
 			}
+			rtc.Play(streamPath)
 		}()
 		if err != nil {
 			return
 		}
-		if rtc := playWaitList.Get(streamPath); rtc != nil {
+		if err = json.Unmarshal(bytes, &offer); err != nil {
-			if err := rtc.SetRemoteDescription(offer); err != nil {
+			return
-				return
-			}
-			rtc.Play(streamPath)
-		} else {
-			w.Write([]byte("bad name"))
 		}
-	})
+		// pli := "42001f"
-	http.HandleFunc("/webrtc/preparePlay", func(w http.ResponseWriter, r *http.Request) {
+		// if stream := FindStream(streamPath); stream != nil {
-		streamPath := r.URL.Query().Get("streamPath")
+		// 	pli = fmt.Sprintf("%x", stream.SPS[1:4])
-		pli := "42001f"
+		// }
-		if stream := FindStream(streamPath); stream != nil {
-			pli = fmt.Sprintf("%x", stream.SPS[1:4])
-		}
-		rtc := new(WebRTC)
 		rtc.m.RegisterCodec(NewRTPCodec(RTPCodecTypeVideo,
 			H264,
 			90000,
 			0,
-			"level-asymmetry-allowed=1;packetization-mode=1;profile-level-id="+pli,
+			"level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f",
 			DefaultPayloadTypeH264,
-			new(avformat.H264)))
+			&rtc.payloader))
 		//m.RegisterCodec(NewRTPPCMUCodec(DefaultPayloadTypePCMU, 8000))
 		rtc.api = NewAPI(WithMediaEngine(rtc.m))
 		peerConnection, err := rtc.api.NewPeerConnection(Configuration{
-			ICEServers: []ICEServer{
+			// ICEServers: []ICEServer{
-				{
+			// 	{
-					URLs: config.ICEServers,
+			// 		URLs: config.ICEServers,
-				},
+			// 	},
-			},
+			// },
 		})
 		rtc.PeerConnection = peerConnection
 		rtc.OnICECandidate(func(ice *ICECandidate) {
 			if ice != nil {
-				println(ice.ToJSON().Candidate)
+				Println(ice.ToJSON().Candidate)
 			}
 		})
-		if r, err := peerConnection.AddTransceiverFromKind(RTPCodecTypeVideo); err == nil {
+		// if r, err := peerConnection.AddTransceiverFromKind(RTPCodecTypeVideo); err == nil {
-			rtc.videoTrack = r.Sender().Track()
+		// 	rtc.videoTrack = r.Sender().Track()
-		} else {
+		// } else {
-			Println(err)
+		// 	Println(err)
-		}
+		// }
-		defer func() {
-			if err != nil {
-				Println(err)
-				fmt.Fprintf(w, `{"errmsg":"%s"}`, err.Error())
-				return
-			}
-		}()
 		if err != nil {
 			return
 		}
-		playWaitList.Set(streamPath, rtc)
 		rtc.RemoteAddr = r.RemoteAddr
-		offer, err := rtc.CreateOffer(nil)
+		if err = rtc.SetRemoteDescription(offer); err != nil {
-		if err != nil {
 			return
 		}
-		if bytes, err := rtc.GetAnswer(offer); err == nil {
+		rtc.m.PopulateFromSDP(offer)
+		// var vpayloadType uint8 = 0
+
+		// for _, videoCodec := range rtc.m.GetCodecsByKind(RTPCodecTypeVideo) {
+		// 	if videoCodec.Name == H264 {
+		// 		vpayloadType = videoCodec.PayloadType
+		// 		videoCodec.Payloader = &rtc.payloader
+		// 		Printf("H264 fmtp %v", videoCodec.SDPFmtpLine)
+		// 		break
+		// 	}
+		// }
+		if rtc.videoTrack, err = rtc.NewTrack(DefaultPayloadTypeH264, 8, "video", "monibuca"); err != nil {
+			return
+		}
+		if _, err = rtc.AddTrack(rtc.videoTrack); err != nil {
+			return
+		}
+		if bytes, err := rtc.GetAnswer(); err == nil {
 			w.Write(bytes)
 		} else {
 			return
 		}
-
 	})
+
 	http.HandleFunc("/webrtc/publish", func(w http.ResponseWriter, r *http.Request) {
 		streamPath := r.URL.Query().Get("streamPath")
 		offer := SessionDescription{}
@@ -329,12 +336,7 @@ func run() {
 				Println(err)
 				return
 			}
-			answer, err := rtc.CreateAnswer(nil)
+			if bytes, err = rtc.GetAnswer(); err == nil {
-			if err != nil {
-				Println(err)
-				return
-			}
-			if bytes, err = rtc.GetAnswer(answer); err == nil {
 				w.Write(bytes)
 			} else {
 				Println(err)

ui/dist/plugin-webrtc.common.js

@@ -214,19 +214,19 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7d106341-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=50fea0bc&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0b526416-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=50fea0bc&scoped=true&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.$parent.titleTabActive == 0)?_c('div',[_c('mu-text-field',{attrs:{"label":"streamPath"},model:{value:(_vm.streamPath),callback:function ($$v) {_vm.streamPath=$$v},expression:"streamPath"}}),(!_vm.remoteSDP)?_c('m-button',{on:{"click":_vm.publish}},[_vm._v("Publish")]):_c('m-button',{on:{"click":_vm.stopSession}},[_vm._v("Stop")]),(_vm.remoteSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.remoteSDPURL,"download":"remoteSDP.txt"},slot:"content"},[_vm._v("remoteSDP")])]):_vm._e(),(_vm.localSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.localSDPURL,"download":"localSDP.txt"},slot:"content"},[_vm._v("localSDP")])]):_vm._e(),_c('br'),_c('video',{ref:"video1",attrs:{"width":"640","height":"480","autoplay":"","muted":""},domProps:{"srcObject":_vm.stream,"muted":true}})],1):(_vm.$parent.titleTabActive == 1)?_c('stream-table',{scopedSlots:_vm._u([{key:"default",fn:function(scope){return [_c('m-button',{on:{"click":function($event){return _vm.preview(scope)}}},[_vm._v("Play")]),void 0]}}])}):(_vm.$parent.titleTabActive == 2)?_c('pre',[_vm._v(_vm._s(_vm.localSDP))]):(_vm.$parent.titleTabActive == 3)?_c('pre',[_vm._v(_vm._s(_vm.remoteSDP))]):_vm._e(),_c('webrtc-player',{ref:"player",model:{value:(_vm.previewStreamPath),callback:function ($$v) {_vm.previewStreamPath=$$v},expression:"previewStreamPath"}})],1)}
 var staticRenderFns = []
 
 
 // CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=50fea0bc&scoped=true&
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7d106341-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Player.vue?vue&type=template&id=6aea3512&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0b526416-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Player.vue?vue&type=template&id=66d7d764&
-var Playervue_type_template_id_6aea3512_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('Modal',_vm._g(_vm._b({attrs:{"draggable":"","title":_vm.streamPath},on:{"on-ok":_vm.onClosePreview,"on-cancel":_vm.onClosePreview}},'Modal',_vm.$attrs,false),_vm.$listeners),[_c('video',{ref:"webrtc",attrs:{"width":"488","height":"275","autoplay":"","muted":"","controls":""},domProps:{"srcObject":_vm.stream,"muted":true}}),_c('div',{attrs:{"slot":"footer"},slot:"footer"},[(_vm.remoteSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.remoteSDPURL,"download":"remoteSDP.txt"},slot:"content"},[_vm._v("remoteSDP")])]):_vm._e(),(_vm.localSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.localSDPURL,"download":"localSDP.txt"},slot:"content"},[_vm._v("localSDP")])]):_vm._e()],1)])}
+var Playervue_type_template_id_66d7d764_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('Modal',_vm._g(_vm._b({attrs:{"draggable":"","title":_vm.streamPath},on:{"on-ok":_vm.onClosePreview,"on-cancel":_vm.onClosePreview}},'Modal',_vm.$attrs,false),_vm.$listeners),[_c('video',{ref:"webrtc",attrs:{"width":"488","height":"275","autoplay":"","muted":"","controls":""},domProps:{"srcObject":_vm.stream,"muted":true}}),_c('div',{attrs:{"slot":"footer"},slot:"footer"},[(_vm.remoteSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.remoteSDPURL,"download":"remoteSDP.txt"},slot:"content"},[_vm._v("remoteSDP")])]):_vm._e(),(_vm.localSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.localSDPURL,"download":"localSDP.txt"},slot:"content"},[_vm._v("localSDP")])]):_vm._e()],1)])}
-var Playervue_type_template_id_6aea3512_staticRenderFns = []
+var Playervue_type_template_id_66d7d764_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/Player.vue?vue&type=template&id=6aea3512&
+// CONCATENATED MODULE: ./src/components/Player.vue?vue&type=template&id=66d7d764&
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Player.vue?vue&type=script&lang=js&
 //
@@ -267,6 +267,9 @@ let pc = null;
     methods: {
         async play(streamPath) {
             pc = new RTCPeerConnection();
+            pc.addTransceiver('video',{
+              direction:'recvonly'
+            })
             this.streamPath = streamPath;
             pc.onsignalingstatechange = e => {
                 //console.log(e);
@@ -278,8 +281,21 @@ let pc = null;
             pc.onicecandidate = event => {
                 console.log(event)
             };
-            let result = await this.ajax({
+            pc.ontrack = event => {
-                url: "/webrtc/preparePlay?streamPath=" + this.streamPath,
+               // console.log(event);
+                if (event.track.kind == "video")
+                    this.stream = event.streams[0];
+            };
+            await pc.setLocalDescription(await pc.createOffer());
+            this.localSDP = pc.localDescription.sdp;
+            this.localSDPURL = URL.createObjectURL(
+                new Blob([this.localSDP], { type: "text/plain" })
+            );
+            const result = await this.ajax({
+                type: "POST",
+                processData: false,
+                data: JSON.stringify(pc.localDescription.toJSON()),
+                url: "/webrtc/play?streamPath=" + this.streamPath,
                 dataType: "json"
             });
             if (result.errmsg) {
@@ -289,26 +305,7 @@ let pc = null;
                 this.remoteSDP = result.sdp;
                 this.remoteSDPURL = URL.createObjectURL(new Blob([this.remoteSDP], { type: "text/plain" }));
             }
-            pc.ontrack = event => {
-               // console.log(event);
-                if (event.track.kind == "video")
-                    this.stream = event.streams[0];
-            };
             await pc.setRemoteDescription(new RTCSessionDescription(result));
-            await pc.setLocalDescription(await pc.createAnswer());
-            this.localSDP = pc.localDescription.sdp;
-            this.localSDPURL = URL.createObjectURL(
-                new Blob([this.localSDP], { type: "text/plain" })
-            );
-            result = await this.ajax({
-                type: "POST",
-                processData: false,
-                data: JSON.stringify(pc.localDescription.toJSON()),
-                url: "/webrtc/play?streamPath=" + this.streamPath,
-            });
-            if (result != "success") {
-                this.$toast.error(result);
-            }
         },
         onClosePreview() {
             pc.close();
@@ -428,8 +425,8 @@ function normalizeComponent (
 
 var component = normalizeComponent(
   components_Playervue_type_script_lang_js_,
-  Playervue_type_template_id_6aea3512_render,
+  Playervue_type_template_id_66d7d764_render,
-  Playervue_type_template_id_6aea3512_staticRenderFns,
+  Playervue_type_template_id_66d7d764_staticRenderFns,
   false,
   null,
   null,

ui/dist/plugin-webrtc.umd.js

@@ -223,19 +223,19 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7d106341-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=50fea0bc&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0b526416-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=50fea0bc&scoped=true&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.$parent.titleTabActive == 0)?_c('div',[_c('mu-text-field',{attrs:{"label":"streamPath"},model:{value:(_vm.streamPath),callback:function ($$v) {_vm.streamPath=$$v},expression:"streamPath"}}),(!_vm.remoteSDP)?_c('m-button',{on:{"click":_vm.publish}},[_vm._v("Publish")]):_c('m-button',{on:{"click":_vm.stopSession}},[_vm._v("Stop")]),(_vm.remoteSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.remoteSDPURL,"download":"remoteSDP.txt"},slot:"content"},[_vm._v("remoteSDP")])]):_vm._e(),(_vm.localSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.localSDPURL,"download":"localSDP.txt"},slot:"content"},[_vm._v("localSDP")])]):_vm._e(),_c('br'),_c('video',{ref:"video1",attrs:{"width":"640","height":"480","autoplay":"","muted":""},domProps:{"srcObject":_vm.stream,"muted":true}})],1):(_vm.$parent.titleTabActive == 1)?_c('stream-table',{scopedSlots:_vm._u([{key:"default",fn:function(scope){return [_c('m-button',{on:{"click":function($event){return _vm.preview(scope)}}},[_vm._v("Play")]),void 0]}}])}):(_vm.$parent.titleTabActive == 2)?_c('pre',[_vm._v(_vm._s(_vm.localSDP))]):(_vm.$parent.titleTabActive == 3)?_c('pre',[_vm._v(_vm._s(_vm.remoteSDP))]):_vm._e(),_c('webrtc-player',{ref:"player",model:{value:(_vm.previewStreamPath),callback:function ($$v) {_vm.previewStreamPath=$$v},expression:"previewStreamPath"}})],1)}
 var staticRenderFns = []
 
 
 // CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=50fea0bc&scoped=true&
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7d106341-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Player.vue?vue&type=template&id=6aea3512&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0b526416-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Player.vue?vue&type=template&id=66d7d764&
-var Playervue_type_template_id_6aea3512_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('Modal',_vm._g(_vm._b({attrs:{"draggable":"","title":_vm.streamPath},on:{"on-ok":_vm.onClosePreview,"on-cancel":_vm.onClosePreview}},'Modal',_vm.$attrs,false),_vm.$listeners),[_c('video',{ref:"webrtc",attrs:{"width":"488","height":"275","autoplay":"","muted":"","controls":""},domProps:{"srcObject":_vm.stream,"muted":true}}),_c('div',{attrs:{"slot":"footer"},slot:"footer"},[(_vm.remoteSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.remoteSDPURL,"download":"remoteSDP.txt"},slot:"content"},[_vm._v("remoteSDP")])]):_vm._e(),(_vm.localSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.localSDPURL,"download":"localSDP.txt"},slot:"content"},[_vm._v("localSDP")])]):_vm._e()],1)])}
+var Playervue_type_template_id_66d7d764_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('Modal',_vm._g(_vm._b({attrs:{"draggable":"","title":_vm.streamPath},on:{"on-ok":_vm.onClosePreview,"on-cancel":_vm.onClosePreview}},'Modal',_vm.$attrs,false),_vm.$listeners),[_c('video',{ref:"webrtc",attrs:{"width":"488","height":"275","autoplay":"","muted":"","controls":""},domProps:{"srcObject":_vm.stream,"muted":true}}),_c('div',{attrs:{"slot":"footer"},slot:"footer"},[(_vm.remoteSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.remoteSDPURL,"download":"remoteSDP.txt"},slot:"content"},[_vm._v("remoteSDP")])]):_vm._e(),(_vm.localSDP)?_c('mu-badge',[_c('a',{attrs:{"slot":"content","href":_vm.localSDPURL,"download":"localSDP.txt"},slot:"content"},[_vm._v("localSDP")])]):_vm._e()],1)])}
-var Playervue_type_template_id_6aea3512_staticRenderFns = []
+var Playervue_type_template_id_66d7d764_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/Player.vue?vue&type=template&id=6aea3512&
+// CONCATENATED MODULE: ./src/components/Player.vue?vue&type=template&id=66d7d764&
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Player.vue?vue&type=script&lang=js&
 //
@@ -276,6 +276,9 @@ let pc = null;
     methods: {
         async play(streamPath) {
             pc = new RTCPeerConnection();
+            pc.addTransceiver('video',{
+              direction:'recvonly'
+            })
             this.streamPath = streamPath;
             pc.onsignalingstatechange = e => {
                 //console.log(e);
@@ -287,8 +290,21 @@ let pc = null;
             pc.onicecandidate = event => {
                 console.log(event)
             };
-            let result = await this.ajax({
+            pc.ontrack = event => {
-                url: "/webrtc/preparePlay?streamPath=" + this.streamPath,
+               // console.log(event);
+                if (event.track.kind == "video")
+                    this.stream = event.streams[0];
+            };
+            await pc.setLocalDescription(await pc.createOffer());
+            this.localSDP = pc.localDescription.sdp;
+            this.localSDPURL = URL.createObjectURL(
+                new Blob([this.localSDP], { type: "text/plain" })
+            );
+            const result = await this.ajax({
+                type: "POST",
+                processData: false,
+                data: JSON.stringify(pc.localDescription.toJSON()),
+                url: "/webrtc/play?streamPath=" + this.streamPath,
                 dataType: "json"
             });
             if (result.errmsg) {
@@ -298,26 +314,7 @@ let pc = null;
                 this.remoteSDP = result.sdp;
                 this.remoteSDPURL = URL.createObjectURL(new Blob([this.remoteSDP], { type: "text/plain" }));
             }
-            pc.ontrack = event => {
-               // console.log(event);
-                if (event.track.kind == "video")
-                    this.stream = event.streams[0];
-            };
             await pc.setRemoteDescription(new RTCSessionDescription(result));
-            await pc.setLocalDescription(await pc.createAnswer());
-            this.localSDP = pc.localDescription.sdp;
-            this.localSDPURL = URL.createObjectURL(
-                new Blob([this.localSDP], { type: "text/plain" })
-            );
-            result = await this.ajax({
-                type: "POST",
-                processData: false,
-                data: JSON.stringify(pc.localDescription.toJSON()),
-                url: "/webrtc/play?streamPath=" + this.streamPath,
-            });
-            if (result != "success") {
-                this.$toast.error(result);
-            }
         },
         onClosePreview() {
             pc.close();
@@ -437,8 +434,8 @@ function normalizeComponent (
 
 var component = normalizeComponent(
   components_Playervue_type_script_lang_js_,
-  Playervue_type_template_id_6aea3512_render,
+  Playervue_type_template_id_66d7d764_render,
-  Playervue_type_template_id_6aea3512_staticRenderFns,
+  Playervue_type_template_id_66d7d764_staticRenderFns,
   false,
   null,
   null,

ui/src/components/Player.vue

@@ -36,6 +36,9 @@ export default {
     methods: {
         async play(streamPath) {
             pc = new RTCPeerConnection();
+            pc.addTransceiver('video',{
+              direction:'recvonly'
+            })
             this.streamPath = streamPath;
             pc.onsignalingstatechange = e => {
                 //console.log(e);
@@ -47,8 +50,21 @@ export default {
             pc.onicecandidate = event => {
                 console.log(event)
             };
-            let result = await this.ajax({
+            pc.ontrack = event => {
-                url: "/webrtc/preparePlay?streamPath=" + this.streamPath,
+               // console.log(event);
+                if (event.track.kind == "video")
+                    this.stream = event.streams[0];
+            };
+            await pc.setLocalDescription(await pc.createOffer());
+            this.localSDP = pc.localDescription.sdp;
+            this.localSDPURL = URL.createObjectURL(
+                new Blob([this.localSDP], { type: "text/plain" })
+            );
+            const result = await this.ajax({
+                type: "POST",
+                processData: false,
+                data: JSON.stringify(pc.localDescription.toJSON()),
+                url: "/webrtc/play?streamPath=" + this.streamPath,
                 dataType: "json"
             });
             if (result.errmsg) {
@@ -58,26 +74,7 @@ export default {
                 this.remoteSDP = result.sdp;
                 this.remoteSDPURL = URL.createObjectURL(new Blob([this.remoteSDP], { type: "text/plain" }));
             }
-            pc.ontrack = event => {
-               // console.log(event);
-                if (event.track.kind == "video")
-                    this.stream = event.streams[0];
-            };
             await pc.setRemoteDescription(new RTCSessionDescription(result));
-            await pc.setLocalDescription(await pc.createAnswer());
-            this.localSDP = pc.localDescription.sdp;
-            this.localSDPURL = URL.createObjectURL(
-                new Blob([this.localSDP], { type: "text/plain" })
-            );
-            result = await this.ajax({
-                type: "POST",
-                processData: false,
-                data: JSON.stringify(pc.localDescription.toJSON()),
-                url: "/webrtc/play?streamPath=" + this.streamPath,
-            });
-            if (result != "success") {
-                this.$toast.error(result);
-            }
         },
         onClosePreview() {
             pc.close();