Browse Source

优化播放逻辑

v4
dexter 5 years ago
parent
commit
298379ab0c
  1. 2
      go.mod
  2. 7
      go.sum
  3. 148
      main.go
  4. 43
      ui/dist/plugin-webrtc.common.js
  5. 2
      ui/dist/plugin-webrtc.common.js.map
  6. 43
      ui/dist/plugin-webrtc.umd.js
  7. 2
      ui/dist/plugin-webrtc.umd.js.map
  8. 2
      ui/dist/plugin-webrtc.umd.min.js
  9. 2
      ui/dist/plugin-webrtc.umd.min.js.map
  10. 3183
      ui/package-lock.json
  11. 29
      ui/src/components/Player.vue

2
go.mod

@ -3,7 +3,7 @@ module github.com/Monibuca/plugin-webrtc
go 1.13 go 1.13
require ( 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/Monibuca/plugin-rtp v0.0.0-20200531020026-1b12ef72f221
github.com/pion/rtcp v1.2.1 github.com/pion/rtcp v1.2.1
github.com/pion/webrtc/v2 v2.2.14 github.com/pion/webrtc/v2 v2.2.14

7
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/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 h1:pHeDCEFDusKFsZLpconYj8U5LCaWApnjd+yQRHYgQsQ=
github.com/Monibuca/engine/v2 v2.1.0/go.mod h1:34EYjjV15G6myuHOKaJkO7y5tJ1Arq/NfC9Weacr2mc= 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 h1:WBC0eLB7J3PXWZiu4cr9kdcNAkR/74jf0+7zkYDzwZQ=
github.com/Monibuca/plugin-rtp v0.0.0-20200531020026-1b12ef72f221/go.mod h1:62NoacApn7++z5wQnr9ktSfn+vVZL0eSvbD/EqoSHoM= 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= 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/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 h1:PuNg6xqV3brIUihatcKZj1YDUs+M45L0ZbrZWYtkDxY=
github.com/pion/rtp v1.5.4/go.mod h1:bg60AL5GotNOlYZsqycbhDtEV3TkfbpXG0KBiUq29Mg= 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 h1:8qZTdJtbKfAns/Hv5L0PAj8FyXcsKhMH1pKUCGisQg4=
github.com/pion/sctp v1.7.6/go.mod h1:ichkYQ5tlgCQwEwvgfdcAolqx1nHbYCxo4D7zK/K0X8= github.com/pion/sctp v1.7.6/go.mod h1:ichkYQ5tlgCQwEwvgfdcAolqx1nHbYCxo4D7zK/K0X8=
github.com/pion/sdp/v2 v2.3.7 h1:WUZHI3pfiYCaE8UGUYcabk863LCK+Bq3AklV5O0oInQ= 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/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 h1:SJUUIbcPoehlyZgMyIUbBBDhI03sBx32x3JuSIBKBWA=
github.com/pion/turn/v2 v2.0.3/go.mod h1:kl1hmT3NxcLynpXVnwJgObL8C9NaCyPTeqI2DcCpSZs= 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 h1:bRjnXTqMDJ3VERPF45z439Sv6QfDfjdYvdQk1QcIx8M=
github.com/pion/webrtc/v2 v2.2.14/go.mod h1:G+8lShCMbHhjpMF1ZJBkyuvrxXrvW4bxs3nOt+mJ2UI= 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.8.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4= github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0= github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=

148
main.go

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

43
ui/dist/plugin-webrtc.common.js

@ -214,19 +214,19 @@ if (typeof window !== 'undefined') {
// Indicate to webpack that this file can be concatenated // Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null); /* 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 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 = [] var staticRenderFns = []
// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=50fea0bc&scoped=true& // 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& // 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: { methods: {
async play(streamPath) { async play(streamPath) {
pc = new RTCPeerConnection(); pc = new RTCPeerConnection();
pc.addTransceiver('video',{
direction:'recvonly'
})
this.streamPath = streamPath; this.streamPath = streamPath;
pc.onsignalingstatechange = e => { pc.onsignalingstatechange = e => {
//console.log(e); //console.log(e);
@ -278,37 +281,31 @@ let pc = null;
pc.onicecandidate = event => { pc.onicecandidate = event => {
console.log(event) console.log(event)
}; };
let result = await this.ajax({
url: "/webrtc/preparePlay?streamPath=" + this.streamPath,
dataType: "json"
});
if (result.errmsg) {
this.$toast.error(result.errmsg);
return;
} else {
this.remoteSDP = result.sdp;
this.remoteSDPURL = URL.createObjectURL(new Blob([this.remoteSDP], { type: "text/plain" }));
}
pc.ontrack = event => { pc.ontrack = event => {
// console.log(event); // console.log(event);
if (event.track.kind == "video") if (event.track.kind == "video")
this.stream = event.streams[0]; this.stream = event.streams[0];
}; };
await pc.setRemoteDescription(new RTCSessionDescription(result)); await pc.setLocalDescription(await pc.createOffer());
await pc.setLocalDescription(await pc.createAnswer());
this.localSDP = pc.localDescription.sdp; this.localSDP = pc.localDescription.sdp;
this.localSDPURL = URL.createObjectURL( this.localSDPURL = URL.createObjectURL(
new Blob([this.localSDP], { type: "text/plain" }) new Blob([this.localSDP], { type: "text/plain" })
); );
result = await this.ajax({ const result = await this.ajax({
type: "POST", type: "POST",
processData: false, processData: false,
data: JSON.stringify(pc.localDescription.toJSON()), data: JSON.stringify(pc.localDescription.toJSON()),
url: "/webrtc/play?streamPath=" + this.streamPath, url: "/webrtc/play?streamPath=" + this.streamPath,
dataType: "json"
}); });
if (result != "success") { if (result.errmsg) {
this.$toast.error(result); this.$toast.error(result.errmsg);
return;
} else {
this.remoteSDP = result.sdp;
this.remoteSDPURL = URL.createObjectURL(new Blob([this.remoteSDP], { type: "text/plain" }));
} }
await pc.setRemoteDescription(new RTCSessionDescription(result));
}, },
onClosePreview() { onClosePreview() {
pc.close(); pc.close();
@ -428,8 +425,8 @@ function normalizeComponent (
var component = normalizeComponent( var component = normalizeComponent(
components_Playervue_type_script_lang_js_, 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, false,
null, null,
null, null,

2
ui/dist/plugin-webrtc.common.js.map

File diff suppressed because one or more lines are too long

43
ui/dist/plugin-webrtc.umd.js

@ -223,19 +223,19 @@ if (typeof window !== 'undefined') {
// Indicate to webpack that this file can be concatenated // Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null); /* 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 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 = [] var staticRenderFns = []
// CONCATENATED MODULE: ./src/App.vue?vue&type=template&id=50fea0bc&scoped=true& // 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& // 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: { methods: {
async play(streamPath) { async play(streamPath) {
pc = new RTCPeerConnection(); pc = new RTCPeerConnection();
pc.addTransceiver('video',{
direction:'recvonly'
})
this.streamPath = streamPath; this.streamPath = streamPath;
pc.onsignalingstatechange = e => { pc.onsignalingstatechange = e => {
//console.log(e); //console.log(e);
@ -287,37 +290,31 @@ let pc = null;
pc.onicecandidate = event => { pc.onicecandidate = event => {
console.log(event) console.log(event)
}; };
let result = await this.ajax({
url: "/webrtc/preparePlay?streamPath=" + this.streamPath,
dataType: "json"
});
if (result.errmsg) {
this.$toast.error(result.errmsg);
return;
} else {
this.remoteSDP = result.sdp;
this.remoteSDPURL = URL.createObjectURL(new Blob([this.remoteSDP], { type: "text/plain" }));
}
pc.ontrack = event => { pc.ontrack = event => {
// console.log(event); // console.log(event);
if (event.track.kind == "video") if (event.track.kind == "video")
this.stream = event.streams[0]; this.stream = event.streams[0];
}; };
await pc.setRemoteDescription(new RTCSessionDescription(result)); await pc.setLocalDescription(await pc.createOffer());
await pc.setLocalDescription(await pc.createAnswer());
this.localSDP = pc.localDescription.sdp; this.localSDP = pc.localDescription.sdp;
this.localSDPURL = URL.createObjectURL( this.localSDPURL = URL.createObjectURL(
new Blob([this.localSDP], { type: "text/plain" }) new Blob([this.localSDP], { type: "text/plain" })
); );
result = await this.ajax({ const result = await this.ajax({
type: "POST", type: "POST",
processData: false, processData: false,
data: JSON.stringify(pc.localDescription.toJSON()), data: JSON.stringify(pc.localDescription.toJSON()),
url: "/webrtc/play?streamPath=" + this.streamPath, url: "/webrtc/play?streamPath=" + this.streamPath,
dataType: "json"
}); });
if (result != "success") { if (result.errmsg) {
this.$toast.error(result); this.$toast.error(result.errmsg);
return;
} else {
this.remoteSDP = result.sdp;
this.remoteSDPURL = URL.createObjectURL(new Blob([this.remoteSDP], { type: "text/plain" }));
} }
await pc.setRemoteDescription(new RTCSessionDescription(result));
}, },
onClosePreview() { onClosePreview() {
pc.close(); pc.close();
@ -437,8 +434,8 @@ function normalizeComponent (
var component = normalizeComponent( var component = normalizeComponent(
components_Playervue_type_script_lang_js_, 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, false,
null, null,
null, null,

2
ui/dist/plugin-webrtc.umd.js.map

File diff suppressed because one or more lines are too long

2
ui/dist/plugin-webrtc.umd.min.js

File diff suppressed because one or more lines are too long

2
ui/dist/plugin-webrtc.umd.min.js.map

File diff suppressed because one or more lines are too long

3183
ui/package-lock.json

File diff suppressed because it is too large

29
ui/src/components/Player.vue

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

Loading…
Cancel
Save