Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[solved] electron video and image preview #28

Open
TianyiLi opened this issue Oct 6, 2017 · 1 comment
Open

[solved] electron video and image preview #28

TianyiLi opened this issue Oct 6, 2017 · 1 comment

Comments

@TianyiLi
Copy link

TianyiLi commented Oct 6, 2017

目的

目前正在利用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
Copy link
Author

TianyiLi commented Oct 11, 2017

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

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()
        }
      })
  })
}

@TianyiLi TianyiLi changed the title electron video and image preview [solved] electron video and image preview Oct 11, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant