前端图片和视频采用流播放

1.图片播放

<template>
	<img :src="testUrl" alt="加载失败">
</template>
<script type="text/ecmascript-6">
var Minio = require('minio')
var minioClient = new Minio.Client({
    endPoint: '',	// 视屏图片服务器域名
    port: '',	// 端口
    useSSL: false,
    accessKey: '',	// 用户名
    secretKey: ''	// 密码
});
export default {
	methods: {
		blobImg () {
      let that = this
      var size = 0
      // test1表示1541747854fa4db9977d.jpg所在的文件夹  1541747854fa4db9977d.jpg表示文件名
      // 下面的代码会自动在服务器中找1541747854fa4db9977d.jpg文件返回流
      minioClient.getObject('test1', '1541747854fa4db9977d.jpg', {}, function(err, dataStream) {
        if (err) {
          return console.log(err)
        }
        // 得到流
        dataStream.on('data', function(chunk) {
          size += chunk.length
          console.log('chunk', chunk);
          that.testUrl = 'data:image/png;base64,' + btoa(
            new Uint8Array(chunk).reduce((data, byte) => data + String.fromCharCode(byte), '')
          )
        })
        // 得到流结束
        dataStream.on('end', function() {
          console.log('End. Total size = ' + size)
        })
        // 监听错误
        dataStream.on('error', function(err) {
          console.log(err)
        })
      })
    },
	}
}
</script>

2.视屏播放，返回多段视频流，我是将多段视频流用concat组装在一起，然后再输出视频的，这种做法不好，以后会优化

<template>
	<video id="video" controls style="width:300px;height:300px"></video>
</template>
script type="text/ecmascript-6">
var Minio = require('minio')
var minioClient = new Minio.Client({
    endPoint: '',	// 视屏图片服务器域名
    port: '',	// 端口
    useSSL: false,
    accessKey: '',	// 用户名
    secretKey: ''	// 密码
});
export default {
	methods: {
		blobVideo () {
      let that = this
      var size = 0
      var chunks = []
      var video = document.getElementById('video')
      minioClient.getObject('test1', '2020060111275346389.mp4', {}, function(err, dataStream) {
        if (err) {
          return console.log(err)
        }
        
        dataStream.on('data', function(chunk) {
          size += chunk.length
          console.log('size', size)
          console.log('chunk', chunk);
          var arrInt = Array.from(chunk)
          chunks = chunks.concat(arrInt)
        })
        dataStream.on('end', function (chunk) {
          console.log('chunks', chunks);
          var c = new Uint8Array(chunks)
          video.src = window.URL.createObjectURL(new Blob([c], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }))
        })
        dataStream.on('error', function(err) {
          console.log(err)
        })
      })
      
    }
	}
}
</script>

3.返回的流