视频流回显

最新推荐文章于 2024-04-02 16:56:20 发布

Kate_Monkey

最新推荐文章于 2024-04-02 16:56:20 发布

阅读量538

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45958605/article/details/126121596

版权

1、前端代码：

<template>
<div>
  <video :src="videoSrc" controls="controls" width="300" height="200"></video>
  <input type="file" @change="getBigectURL($event)" />
</div>
</template>

<script>
import {preview} from "@/api/login";

export default {
  name: "orderBase64",
  data () {
    return {
      videoSrc: ''
    }
  },
  methods: {
    getBigectURL (event) {
      console.log('getBigectURL', event)
      var current = event.target.files[0]
      var fileReader = new FileReader()
      fileReader .readAsDataURL(current)
      var that = this
      //第一种：上传当前文件的base64字符串
      fileReader .onload = function (e) {
        that.videoSrc = e.currentTarget.result
        console.log("=============== that.videoSrc", that.videoSrc)
        // that.$emit('video', that.videoSrc)
      }

      //第二种：测试后台返回的base64是否可以回显，结果是可以回显的
      preview("").then((res)=>{
        that.videoSrc = res.result//后端返回的视频BASE64字符串
        that.$emit('video',res.result)//调用父组件方法
      })


    },
  }

}
</script>

<style scoped>

</style>

2、后台返回视频base64字符串代码：

	@ApiOperation("获取图片视频附件流")
   @RequestMapping("/preview")
	public Result  preview(HttpServletResponse response){
		List<String> resList = new ArrayList<>();
		try{
			String str="E:\\test\\girl.jpg&&D:\\WeCatFiles\\WeChat Files\\wxid_4wb1yyzqyaie22\\FileStorage\\Video\\2022-07\\4178306fe40e9f65bd39be2e21d67df3.mp4";
			String[] arr = str.split("&&");
			for(String url:arr){
				Base64.Encoder base64 = Base64.getEncoder();
				FileInputStream inputStream = new FileInputStream(url);
				int size = inputStream.available();
				byte[] by = new byte[size];
				inputStream.read(by);
				String baseS64tr = base64.encodeToString(by);
				if(url.substring(url.lastIndexOf(".")+1).equals("mp4")){
					resList.add("data:video/mp4;base64,"+baseS64tr);
				}else{
					resList.add("data:image/jpg;base64,"+baseS64tr);
				}
			}

		}catch (Exception e){
			log.error("-------preview接口操作失败:",e);
			return Result.error("fail"+e.getMessage());
		}
		return Result.ok(resList);
	}