uniapp 将流转化为视频并播放 微信小程序

该问题最关键的一步是将后端传回来的流,转化成视频,并播放。

1、从服务器请求数据流到前端

2、新建一个临时文件,将数据流写入这个文件里面,并自定义路径+命名。

 const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
          fs.writeFile({ })

3、可以将该文件保存到相册(这一步也可以不保存)

 wx.saveVideoToPhotosAlbum({ // 新开页面打开文档
                filePath: wx.env.USER_DATA_PATH + "/myvideo.mp4",  //拿上面存入的文件路径
                success: function (res) {
                  
                }
              })

4、直接用video播放这个临时文件路径即可。

直接上代码:

<video :src="src"></video>

                        uni.request({
                        url: 服务器地址,
                        method: 'GET',
                        responseType: 'arraybuffer',
                        header: {
                            Authorization: 'Bearer ' + user.DEFAULT_USER.access_token
                        },
                        success: res => {
                            const fs = wx.getFileSystemManager(); 
                               //获取全局唯一的文件管理器
                            fs.writeFile({ // 写文件
                                filePath: wx.env.USER_DATA_PATH + "/myvideo.mp4", 
                                // 指定临时文件存入的路径,后面字符串自定义
                                data: res.data,
                                encoding: "binary", //二进制流文件必须是 binary
                                success(res) {
                                    console.log('写入成功', res)
                                    this.src = wx.env.USER_DATA_PATH + "/myvideo.mp4"
                                    })
                                }
                            });
                        },
                    });
相关推荐
晓风伴月1 小时前
uniapp: IOS微信小程序输入框部分被软键盘遮挡问题
微信小程序·小程序·uni-app
转角羊儿1 小时前
uni-app文章列表制作⑧
前端·javascript·uni-app
糊涂涂是个小盆友2 小时前
前端 - 使用uniapp+vue搭建前端项目(app端)
前端·vue.js·uni-app
阿巴阿巴Ovo3 小时前
uniapp中多角色导致tabbar过多的解决方式
uni-app
Json____6 小时前
学法减分交管12123模拟练习小程序源码前端和后端和搭建教程
前端·后端·学习·小程序·uni-app·学法减分·驾考题库
云深时现月7 小时前
jenkins使用cli发行uni-app到h5
前端·uni-app·jenkins
diygwcom8 小时前
低代码可视化-uniapp开关选择组件-低码生成器
uni-app
fakaifa20 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
转角羊儿20 小时前
uni-app请求方法封装⑦
uni-app
java知路20 小时前
uniapp h5实现录音
uni-app