尝试播放

go.mod

@@ -6,5 +6,6 @@ require (
 	github.com/Monibuca/engine/v2 v2.1.0
 	github.com/Monibuca/plugin-rtp v0.0.0-20200531020026-1b12ef72f221
 	github.com/pion/rtcp v1.2.1
+	github.com/pion/rtp v1.5.4
 	github.com/pion/webrtc/v2 v2.2.14
 )

go.sum

@@ -61,6 +61,7 @@ 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=
@@ -75,8 +76,10 @@ 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

@@ -1,41 +1,49 @@
 package webrtc
 
 import (
+	"bytes"
 	"encoding/json"
 	"fmt"
 	"io/ioutil"
 	"net/http"
+	"sync"
 	"time"
 
 	. "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/rtp"
+	"github.com/pion/rtp/codecs"
 	. "github.com/pion/webrtc/v2"
 )
 
-var config = &struct {
+var config struct {
 	ICEServers []string
-}{[]string{
+}
-	"stun:stun.ekiga.net",
+
-	"stun:stun.ideasip.com",
+// }{[]string{
-	"stun:stun.schlund.de",
+// 	"stun:stun.ekiga.net",
-	"stun:stun.stunprotocol.org:3478",
+// 	"stun:stun.ideasip.com",
-	"stun:stun.voiparound.com",
+// 	"stun:stun.schlund.de",
-	"stun:stun.voipbuster.com",
+// 	"stun:stun.stunprotocol.org:3478",
-	"stun:stun.voipstunt.com",
+// 	"stun:stun.voiparound.com",
-	"stun:stun.voxgratia.org",
+// 	"stun:stun.voipbuster.com",
-	"stun:stun.services.mozilla.com",
+// 	"stun:stun.voipstunt.com",
-	"stun:stun.xten.com",
+// 	"stun:stun.voxgratia.org",
-	"stun:stun.softjoys.com",
+// 	"stun:stun.services.mozilla.com",
-	"stun:stunserver.org",
+// 	"stun:stun.xten.com",
-	"stun:stun.schlund.de",
+// 	"stun:stun.softjoys.com",
-	"stun:stun.rixtelecom.se",
+// 	"stun:stunserver.org",
-	"stun:stun.iptel.org",
+// 	"stun:stun.schlund.de",
-	"stun:stun.ideasip.com",
+// 	"stun:stun.rixtelecom.se",
-	"stun:stun.fwdnet.net",
+// 	"stun:stun.iptel.org",
-	"stun:stun.ekiga.net",
+// 	"stun:stun.ideasip.com",
-	"stun:stun01.sipphone.com",
+// 	"stun:stun.fwdnet.net",
-}}
+// 	"stun:stun.ekiga.net",
+// 	"stun:stun01.sipphone.com",
+// }}
 
 // type udpConn struct {
 // 	conn *net.UDPConn
@@ -44,13 +52,16 @@ var config = &struct {
 
 var m MediaEngine
 var api *API
+var SSRC uint32
+var SSRCMap = make(map[string]uint32)
+var ssrcLock sync.Mutex
 
 func init() {
 	m.RegisterCodec(NewRTPH264Codec(DefaultPayloadTypeH264, 90000))
 	//m.RegisterCodec(NewRTPPCMUCodec(DefaultPayloadTypePCMU, 8000))
 	api = NewAPI(WithMediaEngine(m))
 	InstallPlugin(&PluginConfig{
-		Config: config,
+		Config: &config,
 		Name:   "WebRTC",
 		Type:   PLUGIN_PUBLISHER | PLUGIN_SUBSCRIBER,
 		Run:    run,
@@ -60,8 +71,160 @@ func init() {
 type WebRTC struct {
 	RTP
 	*PeerConnection
+	RemoteAddr string
 }
 
+func (rtc *WebRTC) Play(streamPath string) bool {
+	peerConnection, err := api.NewPeerConnection(Configuration{
+		ICEServers: []ICEServer{
+			{
+				URLs: config.ICEServers,
+			},
+		},
+	})
+	if _, err = peerConnection.AddTransceiverFromKind(RTPCodecTypeVideo); err != nil {
+		if err != nil {
+			Println(err)
+			return false
+		}
+	}
+	if err != nil {
+		return false
+	}
+
+	rtc.PeerConnection = peerConnection
+	// Create a video track, using the same SSRC as the incoming RTP Packet
+	ssrcLock.Lock()
+	ssrc, ok := SSRCMap[streamPath]
+	if !ok {
+		SSRC++
+		ssrc = SSRC
+		SSRCMap[streamPath] = SSRC
+	}
+	ssrcLock.Unlock()
+	videoTrack, err := peerConnection.NewTrack(DefaultPayloadTypeH264, ssrc, "video", "monibuca")
+	if err != nil {
+		Println(err)
+		return false
+	}
+	if _, err = peerConnection.AddTrack(videoTrack); err != nil {
+		Println(err)
+		return false
+	}
+	peerConnection.OnICEConnectionStateChange(func(connectionState ICEConnectionState) {
+		Printf("%s Connection State has changed %s ", streamPath, connectionState.String())
+		switch connectionState {
+		case ICEConnectionStateDisconnected:
+			if rtc.Stream != nil {
+				rtc.Stream.Close()
+			}
+		case ICEConnectionStateConnected:
+			var sequence uint16
+			var sub Subscriber
+			sub.ID = rtc.RemoteAddr
+			sub.Type = "WebRTC"
+			nextHeader := func(ts uint32, marker bool) rtp.Header {
+				sequence++
+				return rtp.Header{
+					Version:        2,
+					SSRC:           ssrc,
+					PayloadType:    DefaultPayloadTypeH264,
+					SequenceNumber: sequence,
+					Timestamp:      ts,
+					Marker:         marker,
+				}
+			}
+			stapA := func(naul ...[]byte) []byte {
+				var buffer bytes.Buffer
+				buffer.WriteByte(24)
+				for _, n := range naul {
+					l := len(n)
+					buffer.WriteByte(byte(l >> 8))
+					buffer.WriteByte(byte(l))
+					buffer.Write(n)
+				}
+				return buffer.Bytes()
+			}
+
+			// aud := []byte{0x09, 0x30}
+			sub.OnData = func(packet *avformat.SendPacket) error {
+				if packet.Type == avformat.FLV_TAG_TYPE_AUDIO {
+					return nil
+				}
+				if packet.IsSequence {
+					payload := packet.Payload[11:]
+					spsLen := int(payload[0])<<8 + int(payload[1])
+					sps := payload[2:spsLen]
+					payload = payload[3+spsLen:]
+					ppsLen := int(payload[0])<<8 + int(payload[1])
+					pps := payload[2:ppsLen]
+					if err := videoTrack.WriteRTP(&rtp.Packet{
+						Header:  nextHeader(0, false),
+						Payload: stapA(sps, pps),
+					}); err != nil {
+						return err
+					}
+				} else {
+					payload := packet.Payload[5:]
+					for {
+						var naulLen = int(util.BigEndian.Uint32(payload))
+						payload = payload[4:]
+						_payload := payload[:naulLen]
+						if naulLen > 1000 {
+							part := _payload[:1000]
+							indicator := ((part[0] >> 5) << 5) | 28
+							nalutype := part[0] & 31
+							header := 128 | nalutype
+							part = part[1:]
+							marker := false
+							for {
+								if err := videoTrack.WriteRTP(&rtp.Packet{
+									Header:  nextHeader(packet.Timestamp*90, marker),
+									Payload: append([]byte{indicator, header}, part...),
+								}); err != nil {
+									return err
+								}
+								marker = true
+								if _payload == nil {
+									break
+								}
+								if len(_payload[1000:]) <= 1000 {
+									header = 64 | nalutype
+									part = _payload[1000:]
+									_payload = nil
+								} else {
+									header = nalutype
+									part = _payload[1000:]
+									_payload = part
+								}
+							}
+						} else {
+							if err := videoTrack.WriteRTP(&rtp.Packet{
+								Header:  nextHeader(packet.Timestamp*90, false),
+								Payload: _payload,
+							}); err != nil {
+								return err
+							}
+						}
+						if len(payload) < naulLen+4 {
+							break
+						}
+						payload = payload[naulLen:]
+					}
+					// if err := videoTrack.WriteRTP(&rtp.Packet{
+					// 	Header:  nextHeader(packet.Timestamp * 90),
+					// 	Payload: aud,
+					// }); err != nil {
+					// 	return err
+					// }
+				}
+				return nil
+			}
+			sub.Subscribe(streamPath)
+		}
+	})
+	return true
+}
 func (rtc *WebRTC) Publish(streamPath string) bool {
 	peerConnection, err := api.NewPeerConnection(Configuration{
 		ICEServers: []ICEServer{
@@ -82,12 +245,16 @@ func (rtc *WebRTC) Publish(streamPath string) bool {
 	peerConnection.OnICEConnectionStateChange(func(connectionState ICEConnectionState) {
 		Printf("%s Connection State has changed %s ", streamPath, connectionState.String())
 		switch connectionState {
-		case ICEConnectionStateDisconnected:
+		case ICEConnectionStateDisconnected, ICEConnectionStateFailed:
+			if rtc.Stream != nil {
 				rtc.Stream.Close()
 			}
+		}
 	})
 	rtc.PeerConnection = peerConnection
 	if rtc.RTP.Publish(streamPath) {
+		//f, _ := os.OpenFile("resource/live/rtc.h264", os.O_TRUNC|os.O_WRONLY, 0666)
+		var h264 codecs.H264Packet
 		rtc.Stream.Type = "WebRTC"
 		peerConnection.OnTrack(func(track *Track, receiver *RTPReceiver) {
 			defer rtc.Stream.Close()
@@ -113,6 +280,8 @@ func (rtc *WebRTC) Publish(streamPath string) bool {
 				if err = pack.Unmarshal(b[:i]); err != nil {
 					return
 				}
+				h264.Unmarshal(pack.Payload)
+				// f.Write(bytes)
 			}
 		})
 	} else {
@@ -120,8 +289,32 @@ func (rtc *WebRTC) Publish(streamPath string) bool {
 	}
 	return true
 }
+func (rtc *WebRTC) GetAnswer(offer SessionDescription) ([]byte, error) {
+	if err := rtc.SetRemoteDescription(offer); err != nil {
+		Println(err)
+		return nil, err
+	}
+	// Create answer
+	answer, err := rtc.CreateAnswer(nil)
+	if err != nil {
+		Println(err)
+		return nil, err
+	}
+
+	// Sets the LocalDescription, and starts our UDP listeners
+	if err = rtc.SetLocalDescription(answer); err != nil {
+		Println(err)
+		return nil, err
+	}
+	if bytes, err := json.Marshal(answer); err != nil {
+		Println(err)
+		return bytes, err
+	} else {
+		return bytes, nil
+	}
+}
 func run() {
-	http.HandleFunc("/webrtc/answer", func(w http.ResponseWriter, r *http.Request) {
+	http.HandleFunc("/webrtc/play", func(w http.ResponseWriter, r *http.Request) {
 		streamPath := r.URL.Query().Get("streamPath")
 		offer := SessionDescription{}
 		bytes, err := ioutil.ReadAll(r.Body)
@@ -131,30 +324,38 @@ func run() {
 			return
 		}
 		rtc := new(WebRTC)
-		if rtc.Publish(streamPath) {
+		rtc.RemoteAddr = r.RemoteAddr
-			// Set the remote SessionDescription
+		if rtc.Play(streamPath) {
-			if err = rtc.SetRemoteDescription(offer); err != nil {
+			if bytes, err = rtc.GetAnswer(offer); err == nil {
+				w.Write(bytes)
+			} else {
 				Println(err)
+				w.Write([]byte(err.Error()))
 				return
 			}
-
+		} else {
-			// Create answer
+			w.Write([]byte(`{"errmsg":"bad name"}`))
-			answer, err := rtc.CreateAnswer(nil)
+		}
+	})
+	http.HandleFunc("/webrtc/publish", func(w http.ResponseWriter, r *http.Request) {
+		streamPath := r.URL.Query().Get("streamPath")
+		offer := SessionDescription{}
+		bytes, err := ioutil.ReadAll(r.Body)
+		err = json.Unmarshal(bytes, &offer)
 		if err != nil {
 			Println(err)
 			return
 		}
-
+		rtc := new(WebRTC)
-			// Sets the LocalDescription, and starts our UDP listeners
+		rtc.RemoteAddr = r.RemoteAddr
-			if err = rtc.SetLocalDescription(answer); err != nil {
+		if rtc.Publish(streamPath) {
-				Println(err)
+			if bytes, err = rtc.GetAnswer(offer); err == nil {
-				return
-			}
-			if bytes, err = json.Marshal(answer); err != nil {
-				Println(err)
-				return
-			}
 				w.Write(bytes)
+			} else {
+				Println(err)
+				w.Write([]byte(err.Error()))
+				return
+			}
 		} else {
 			w.Write([]byte(`{"errmsg":"bad name"}`))
 		}

ui/dist/plugin-webrtc.common.js

@@ -87,24 +87,6 @@ module.exports =
 /************************************************************************/
 /******/ ({
 
-/***/ "40b7":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
-/***/ "5776":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_42a5fa69_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("40b7");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_42a5fa69_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_42a5fa69_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
- /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_42a5fa69_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
-
-/***/ }),
-
 /***/ "8875":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -181,6 +163,24 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 }));
 
 
+/***/ }),
+
+/***/ "8dc9":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "c857":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("8dc9");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+ /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
+
 /***/ }),
 
 /***/ "fb15":
@@ -214,12 +214,12 @@ 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=42a5fa69&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/App.vue?vue&type=template&id=3d66f6b2&scoped=true&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.$parent.titleTabActive == 1)?_c('pre',[_vm._v(_vm._s(_vm.localSDP))]):(_vm.$parent.titleTabActive == 2)?_c('pre',[_vm._v(_vm._s(_vm.remoteSDP))]):_c('div',[_c('mu-text-field',{attrs:{"label":"streamPath"},model:{value:(_vm.streamPath),callback:function ($$v) {_vm.streamPath=$$v},expression:"streamPath"}}),(!_vm.localSDP || _vm.ask)?_c('span',{staticClass:"blink"},[_vm._v("Connecting")]):(_vm.iceConnectionState!='connected')?_c('m-button',{on:{"click":_vm.startSession}},[_vm._v("Start")]):(_vm.iceConnectionState=='connected')?_c('m-button',{on:{"click":_vm.stopSession}},[_vm._v("Stop")]):_vm._e(),_c('br'),_c('video',{ref:"video1",attrs:{"width":"640","height":"480","autoplay":"","muted":""},domProps:{"srcObject":_vm.stream,"muted":true}})],1)])}
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.$parent.titleTabActive == 1)?_c('pre',[_vm._v(_vm._s(_vm.localSDP))]):(_vm.$parent.titleTabActive == 2)?_c('pre',[_vm._v(_vm._s(_vm.remoteSDP))]):_c('div',[_c('mu-text-field',{attrs:{"label":"streamPath"},model:{value:(_vm.streamPath),callback:function ($$v) {_vm.streamPath=$$v},expression:"streamPath"}}),(!_vm.localSDP || _vm.ask)?_c('span',{staticClass:"blink"},[_vm._v("Connecting")]):(_vm.iceConnectionState!='connected')?[_c('m-button',{on:{"click":function($event){return _vm.startSession('publish')}}},[_vm._v("Publish")]),_c('m-button',{on:{"click":function($event){return _vm.startSession('play')}}},[_vm._v("Play")])]:(_vm.iceConnectionState=='connected')?_c('m-button',{on:{"click":_vm.stopSession}},[_vm._v("Stop")]):_vm._e(),_c('br'),_c('video',{ref:"video1",attrs:{"width":"640","height":"480","autoplay":"","muted":""},domProps:{"srcObject":_vm.stream,"muted":true}})],2)])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=42a5fa69&scoped=true&
+// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=3d66f6b2&scoped=true&
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 //
@@ -237,32 +237,35 @@ var staticRenderFns = []
 //
 //
 //
+//
+//
+//
 
 const config = {
   iceServers:[
-    {
+    // {
-      urls:[
+    //   urls:[
-        "stun:stun.ekiga.net",
+    //     "stun:stun.ekiga.net",
-        "stun:stun.ideasip.com",
+    //     "stun:stun.ideasip.com",
-        "stun:stun.schlund.de",
+    //     "stun:stun.schlund.de",
-        "stun:stun.stunprotocol.org:3478",
+    //     "stun:stun.stunprotocol.org:3478",
-        "stun:stun.voiparound.com",
+    //     "stun:stun.voiparound.com",
-        "stun:stun.voipbuster.com",
+    //     "stun:stun.voipbuster.com",
-        "stun:stun.voipstunt.com",
+    //     "stun:stun.voipstunt.com",
-        "stun:stun.voxgratia.org",
+    //     "stun:stun.voxgratia.org",
-        "stun:stun.services.mozilla.com",
+    //     "stun:stun.services.mozilla.com",
-        "stun:stun.xten.com",
+    //     "stun:stun.xten.com",
-        "stun:stun.softjoys.com",
+    //     "stun:stun.softjoys.com",
-        "stun:stunserver.org",
+    //     "stun:stunserver.org",
-        "stun:stun.schlund.de",
+    //     "stun:stun.schlund.de",
-        "stun:stun.rixtelecom.se",
+    //     "stun:stun.rixtelecom.se",
-        "stun:stun.iptel.org",
+    //     "stun:stun.iptel.org",
-        "stun:stun.ideasip.com",
+    //     "stun:stun.ideasip.com",
-        "stun:stun.fwdnet.net",
+    //     "stun:stun.fwdnet.net",
-        "stun:stun.ekiga.net",
+    //     "stun:stun.ekiga.net",
-        "stun:stun01.sipphone.com",
+    //     "stun:stun01.sipphone.com",
-      ]
+    //   ]
-    }
+    // }
   ]
 }
 let pc = new RTCPeerConnection(config);
@@ -276,13 +279,15 @@ var streamPath = "live/rtc"
       streamPath,
       iceConnectionState:pc&&pc.iceConnectionState,
       stream,
+      type:"",
       ask:false
     };
   },
   methods: {
-    startSession() {
+    startSession(type) {
+      this.type = type
       this.ask = true
-      this.ajax({type: 'POST',processData:false,data: JSON.stringify(pc.localDescription),url:"/webrtc/answer?streamPath="+this.streamPath,dataType:"json"}).then(result => {
+      this.ajax({type: 'POST',processData:false,data: JSON.stringify(pc.localDescription),url:"/webrtc/"+type+"?streamPath="+this.streamPath,dataType:"json"}).then(result => {
         this.ask = false
         if (result.errmsg){
           this.$toast.error(result.errmsg)
@@ -314,6 +319,11 @@ var streamPath = "live/rtc"
           this.$parent.titleTabs = ["摄像头", "localSDP"];
         }
       };
+      pc.ontrack = event=>{
+        if(this.type=="play" && event.streams[0]){
+          this.stream = stream = event.streams[0]
+        }
+      }
     }
   },
   async mounted() {
@@ -336,8 +346,8 @@ var streamPath = "live/rtc"
 
 // CONCATENATED MODULE: ./src/App.vue?vue&type=script&lang=js&
  /* harmony default export */ var src_Appvue_type_script_lang_js_ = (Appvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/App.vue?vue&type=style&index=0&id=42a5fa69&scoped=true&lang=css&
+// EXTERNAL MODULE: ./src/App.vue?vue&type=style&index=0&id=3d66f6b2&scoped=true&lang=css&
-var Appvue_type_style_index_0_id_42a5fa69_scoped_true_lang_css_ = __webpack_require__("5776");
+var Appvue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css_ = __webpack_require__("c857");
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -454,7 +464,7 @@ var component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "42a5fa69",
+  "3d66f6b2",
   null
   
 )

ui/dist/plugin-webrtc.css

@@ -1 +1 @@
-@-webkit-keyframes blink-data-v-42a5fa69{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}@keyframes blink-data-v-42a5fa69{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.blink[data-v-42a5fa69]{-webkit-animation:blink-data-v-42a5fa69 1s infinite;animation:blink-data-v-42a5fa69 1s infinite}
+@-webkit-keyframes blink-data-v-3d66f6b2{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}@keyframes blink-data-v-3d66f6b2{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.blink[data-v-3d66f6b2]{-webkit-animation:blink-data-v-3d66f6b2 1s infinite;animation:blink-data-v-3d66f6b2 1s infinite}

ui/dist/plugin-webrtc.umd.js

@@ -96,24 +96,6 @@ return /******/ (function(modules) { // webpackBootstrap
 /************************************************************************/
 /******/ ({
 
-/***/ "40b7":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
-/***/ "5776":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_42a5fa69_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("40b7");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_42a5fa69_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_42a5fa69_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
- /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_42a5fa69_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
-
-/***/ }),
-
 /***/ "8875":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -190,6 +172,24 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 }));
 
 
+/***/ }),
+
+/***/ "8dc9":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "c857":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("8dc9");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+ /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
+
 /***/ }),
 
 /***/ "fb15":
@@ -223,12 +223,12 @@ 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=42a5fa69&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/App.vue?vue&type=template&id=3d66f6b2&scoped=true&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.$parent.titleTabActive == 1)?_c('pre',[_vm._v(_vm._s(_vm.localSDP))]):(_vm.$parent.titleTabActive == 2)?_c('pre',[_vm._v(_vm._s(_vm.remoteSDP))]):_c('div',[_c('mu-text-field',{attrs:{"label":"streamPath"},model:{value:(_vm.streamPath),callback:function ($$v) {_vm.streamPath=$$v},expression:"streamPath"}}),(!_vm.localSDP || _vm.ask)?_c('span',{staticClass:"blink"},[_vm._v("Connecting")]):(_vm.iceConnectionState!='connected')?_c('m-button',{on:{"click":_vm.startSession}},[_vm._v("Start")]):(_vm.iceConnectionState=='connected')?_c('m-button',{on:{"click":_vm.stopSession}},[_vm._v("Stop")]):_vm._e(),_c('br'),_c('video',{ref:"video1",attrs:{"width":"640","height":"480","autoplay":"","muted":""},domProps:{"srcObject":_vm.stream,"muted":true}})],1)])}
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.$parent.titleTabActive == 1)?_c('pre',[_vm._v(_vm._s(_vm.localSDP))]):(_vm.$parent.titleTabActive == 2)?_c('pre',[_vm._v(_vm._s(_vm.remoteSDP))]):_c('div',[_c('mu-text-field',{attrs:{"label":"streamPath"},model:{value:(_vm.streamPath),callback:function ($$v) {_vm.streamPath=$$v},expression:"streamPath"}}),(!_vm.localSDP || _vm.ask)?_c('span',{staticClass:"blink"},[_vm._v("Connecting")]):(_vm.iceConnectionState!='connected')?[_c('m-button',{on:{"click":function($event){return _vm.startSession('publish')}}},[_vm._v("Publish")]),_c('m-button',{on:{"click":function($event){return _vm.startSession('play')}}},[_vm._v("Play")])]:(_vm.iceConnectionState=='connected')?_c('m-button',{on:{"click":_vm.stopSession}},[_vm._v("Stop")]):_vm._e(),_c('br'),_c('video',{ref:"video1",attrs:{"width":"640","height":"480","autoplay":"","muted":""},domProps:{"srcObject":_vm.stream,"muted":true}})],2)])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=42a5fa69&scoped=true&
+// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=3d66f6b2&scoped=true&
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 //
@@ -246,32 +246,35 @@ var staticRenderFns = []
 //
 //
 //
+//
+//
+//
 
 const config = {
   iceServers:[
-    {
+    // {
-      urls:[
+    //   urls:[
-        "stun:stun.ekiga.net",
+    //     "stun:stun.ekiga.net",
-        "stun:stun.ideasip.com",
+    //     "stun:stun.ideasip.com",
-        "stun:stun.schlund.de",
+    //     "stun:stun.schlund.de",
-        "stun:stun.stunprotocol.org:3478",
+    //     "stun:stun.stunprotocol.org:3478",
-        "stun:stun.voiparound.com",
+    //     "stun:stun.voiparound.com",
-        "stun:stun.voipbuster.com",
+    //     "stun:stun.voipbuster.com",
-        "stun:stun.voipstunt.com",
+    //     "stun:stun.voipstunt.com",
-        "stun:stun.voxgratia.org",
+    //     "stun:stun.voxgratia.org",
-        "stun:stun.services.mozilla.com",
+    //     "stun:stun.services.mozilla.com",
-        "stun:stun.xten.com",
+    //     "stun:stun.xten.com",
-        "stun:stun.softjoys.com",
+    //     "stun:stun.softjoys.com",
-        "stun:stunserver.org",
+    //     "stun:stunserver.org",
-        "stun:stun.schlund.de",
+    //     "stun:stun.schlund.de",
-        "stun:stun.rixtelecom.se",
+    //     "stun:stun.rixtelecom.se",
-        "stun:stun.iptel.org",
+    //     "stun:stun.iptel.org",
-        "stun:stun.ideasip.com",
+    //     "stun:stun.ideasip.com",
-        "stun:stun.fwdnet.net",
+    //     "stun:stun.fwdnet.net",
-        "stun:stun.ekiga.net",
+    //     "stun:stun.ekiga.net",
-        "stun:stun01.sipphone.com",
+    //     "stun:stun01.sipphone.com",
-      ]
+    //   ]
-    }
+    // }
   ]
 }
 let pc = new RTCPeerConnection(config);
@@ -285,13 +288,15 @@ var streamPath = "live/rtc"
       streamPath,
       iceConnectionState:pc&&pc.iceConnectionState,
       stream,
+      type:"",
       ask:false
     };
   },
   methods: {
-    startSession() {
+    startSession(type) {
+      this.type = type
       this.ask = true
-      this.ajax({type: 'POST',processData:false,data: JSON.stringify(pc.localDescription),url:"/webrtc/answer?streamPath="+this.streamPath,dataType:"json"}).then(result => {
+      this.ajax({type: 'POST',processData:false,data: JSON.stringify(pc.localDescription),url:"/webrtc/"+type+"?streamPath="+this.streamPath,dataType:"json"}).then(result => {
         this.ask = false
         if (result.errmsg){
           this.$toast.error(result.errmsg)
@@ -323,6 +328,11 @@ var streamPath = "live/rtc"
           this.$parent.titleTabs = ["摄像头", "localSDP"];
         }
       };
+      pc.ontrack = event=>{
+        if(this.type=="play" && event.streams[0]){
+          this.stream = stream = event.streams[0]
+        }
+      }
     }
   },
   async mounted() {
@@ -345,8 +355,8 @@ var streamPath = "live/rtc"
 
 // CONCATENATED MODULE: ./src/App.vue?vue&type=script&lang=js&
  /* harmony default export */ var src_Appvue_type_script_lang_js_ = (Appvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/App.vue?vue&type=style&index=0&id=42a5fa69&scoped=true&lang=css&
+// EXTERNAL MODULE: ./src/App.vue?vue&type=style&index=0&id=3d66f6b2&scoped=true&lang=css&
-var Appvue_type_style_index_0_id_42a5fa69_scoped_true_lang_css_ = __webpack_require__("5776");
+var Appvue_type_style_index_0_id_3d66f6b2_scoped_true_lang_css_ = __webpack_require__("c857");
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -463,7 +473,7 @@ var component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "42a5fa69",
+  "3d66f6b2",
   null
   
 )

ui/src/App.vue

@@ -5,7 +5,10 @@
     <div v-else>
       <mu-text-field v-model="streamPath" label="streamPath"></mu-text-field>
       <span class="blink" v-if="!localSDP || ask">Connecting</span>
-      <m-button @click="startSession" v-else-if="iceConnectionState!='connected'">Start</m-button>
+      <template v-else-if="iceConnectionState!='connected'">
+        <m-button @click="startSession('publish')">Publish</m-button>
+        <m-button @click="startSession('play')">Play</m-button>
+      </template>
       <m-button @click="stopSession" v-else-if="iceConnectionState=='connected'">Stop</m-button>
       <br />
       <video ref="video1" :srcObject.prop="stream" width="640" height="480" autoplay muted></video>
@@ -16,29 +19,29 @@
 <script>
 const config = {
   iceServers:[
-    {
+    // {
-      urls:[
+    //   urls:[
-        "stun:stun.ekiga.net",
+    //     "stun:stun.ekiga.net",
-        "stun:stun.ideasip.com",
+    //     "stun:stun.ideasip.com",
-        "stun:stun.schlund.de",
+    //     "stun:stun.schlund.de",
-        "stun:stun.stunprotocol.org:3478",
+    //     "stun:stun.stunprotocol.org:3478",
-        "stun:stun.voiparound.com",
+    //     "stun:stun.voiparound.com",
-        "stun:stun.voipbuster.com",
+    //     "stun:stun.voipbuster.com",
-        "stun:stun.voipstunt.com",
+    //     "stun:stun.voipstunt.com",
-        "stun:stun.voxgratia.org",
+    //     "stun:stun.voxgratia.org",
-        "stun:stun.services.mozilla.com",
+    //     "stun:stun.services.mozilla.com",
-        "stun:stun.xten.com",
+    //     "stun:stun.xten.com",
-        "stun:stun.softjoys.com",
+    //     "stun:stun.softjoys.com",
-        "stun:stunserver.org",
+    //     "stun:stunserver.org",
-        "stun:stun.schlund.de",
+    //     "stun:stun.schlund.de",
-        "stun:stun.rixtelecom.se",
+    //     "stun:stun.rixtelecom.se",
-        "stun:stun.iptel.org",
+    //     "stun:stun.iptel.org",
-        "stun:stun.ideasip.com",
+    //     "stun:stun.ideasip.com",
-        "stun:stun.fwdnet.net",
+    //     "stun:stun.fwdnet.net",
-        "stun:stun.ekiga.net",
+    //     "stun:stun.ekiga.net",
-        "stun:stun01.sipphone.com",
+    //     "stun:stun01.sipphone.com",
-      ]
+    //   ]
-    }
+    // }
   ]
 }
 let pc = new RTCPeerConnection(config);
@@ -52,13 +55,15 @@ export default {
       streamPath,
       iceConnectionState:pc&&pc.iceConnectionState,
       stream,
+      type:"",
       ask:false
     };
   },
   methods: {
-    startSession() {
+    startSession(type) {
+      this.type = type
       this.ask = true
-      this.ajax({type: 'POST',processData:false,data: JSON.stringify(pc.localDescription),url:"/webrtc/answer?streamPath="+this.streamPath,dataType:"json"}).then(result => {
+      this.ajax({type: 'POST',processData:false,data: JSON.stringify(pc.localDescription),url:"/webrtc/"+type+"?streamPath="+this.streamPath,dataType:"json"}).then(result => {
         this.ask = false
         if (result.errmsg){
           this.$toast.error(result.errmsg)
@@ -90,6 +95,11 @@ export default {
           this.$parent.titleTabs = ["摄像头", "localSDP"];
         }
       };
+      pc.ontrack = event=>{
+        if(this.type=="play" && event.streams[0]){
+          this.stream = stream = event.streams[0]
+        }
+      }
     }
   },
   async mounted() {