[solved] electron video and image preview

[TianyiLi]

目的

目前正在利用electron + vue + jsftp刻一個客戶端，其中想要做到一個preview圖片、影片的效果。 jsftp讀取檔案資料流出來確認是nodejs socket了，不過不太清楚該怎樣將他轉為video/image的方法

使用的工具

Ubuntu 16.04, vscode, electron, jsftp, vue-electron

嘗試過的解法

如附上的程式碼

程式碼

下面附上我的片段程式碼

程式碼

function streamVideo(){
      let self = this;
      let mediaSource = new MediaSource()
      this.$refs.prviewVideo.src = window.URL.createObjectURL(mediaSource)

      jsftp.get('/var/lib/ltms/transtep/man/media/full/sample.mp4', function(err, socket){
        if (err) throw new Error();
        socket.on('data', buffer=>{
          // 不清楚實作方式
        })
      })
    }

[TianyiLi]

自己的問題自己解，也分享給其他人

function streamVideo(){
  let self = this;
  this.$refs.prviewVideo.src = window.URL.createObjectURL(mediaSource)

  jsftp.get('/var/lib/ltms/transtep/man/media/full/sample.mp4', function(err, socket){
    if (err) throw new Error();
    let buffs = []
    socket.on('data', buffer=>{
      buffs.push(buffer)
    })
    socket.on('close', (hasErr)=>{
        if (hasErr) throw new Error(hasErr)
        console.log('read file over')
        let file = new Blob((buffs), {type:'video/mp4'})
        self.$refs.prviewVideo.src = URL.createObjectURL(file)
        self.$refs.prviewVideo.onload = function(){
          self.$refs.prviewVideo.play()
        }
      })
  })
}