Vue调用摄像头录制视频和音频并上传给后端或下载到本地

已于 2022-08-16 19:12:49 修改
阅读量6k 收藏 48
点赞数 8
分类专栏： 前端 文章标签： vue.js 音视频 javascript
于 2022-08-16 18:58:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47424753/article/details/126372232
版权

下载插件

npm install --save webm-duration-fix

代码及作用

调用摄像头


callCamera () {
        let _this = this;
        MediaUtils.getUserMedia(true, true, function (err, stream) {
          if (err) {
            throw err;
          } else {
            // 通过 MediaRecorder 记录获取到的媒体流
            const mimeType = 'video/webm;codecs=vp8,opus';
            mediaRecorder = new MediaRecorder(stream, {
              // mimeType: "video/webm;codecs=vp9",
              mimeType: mimeType,
            });
            mediaStream = stream;
            var chunks = []
            var video = _this.$refs.videos;
            video["srcObject"] = stream;
            video.play();// 播放实时画面
            mediaRecorder.ondataavailable = function (e) {
              mediaRecorder.blobs.push(e.data);
              chunks.push(e.data);
            };
            mediaRecorder.blobs = [];

            mediaRecorder.onstop = async () => {
              recorderFile = await fixWebmDuration(new Blob(chunks, { type: mimeType }));
              console.log(recorderFile);
              var url = URL.createObjectURL(recorderFile)
              var videosreplay = _this.$refs.videosreplay;
              videosreplay.setAttribute("src", url);
              console.log('url', url)
              chunks = [];
              if (null != stopRecordCallback) {
                stopRecordCallback();
              }
            };
            _this.record()
          }
        });
      },

开始结束录制

record () {
        if (this.recordtype == "ING") {
          this.stopRecord(() => {
            console.log("结束录制");
            this.toggleReplayVideo()
          });
        }
        else if (this.recordtype == "BEGIN") {
          console.log("开始录制");
          this.startAudio();
          mediaRecorder.start();
          startTime = Date.now();
          this.recordtype = "ING";
        }
      },

对录像时长进行记录


      startAudio () {
        this.timer = setInterval(() => {
          this.recordtime += 1000;
          if (this.recordtime == 1000000) {
            this.stopRecord();
          }
          this.second++;
          if (this.second >= 60) {
            this.second = 0;
            this.minute = this.minute + 1;
          }

          if (this.minute >= 60) {
            this.minute = 0;
            this.hour = this.hour + 1;
          }
          console.log(this.recordtime)
        }, 1000);
      },

停止录像时终止录制器，关闭媒体流并清除时长记录定时器

      stopRecord (callback) {
        this.recordtype = "END";
        this.showReplay = true;
        stopRecordCallback = callback;
        clearInterval(this.timer);
        // 终止录制器
        mediaRecorder.stop();
        // 关闭媒体流
        MediaUtils.closeStream(mediaStream);
        var videosreplay = this.$refs.videosreplay;
        videosreplay.onended = () => {
          this.playtime = 0;
          this.replayVideo = false;
          clearInterval(this.playtimer);
        };
        videosreplay.onclick = () => {
          this.showReplay = !this.showReplay;
        };
      },

回放

      toggleReplayVideo () {
        console.log('播放中...')
        this.replayVideo = !this.replayVideo;
        this.showReplay = false;
        var videosreplay = this.$refs.videosreplay;
        if (this.replayVideo) {
          videosreplay.play().catch(err => {
            this.$message.error(err.message);
            console.log(err);
          });
          this.playtimer = setInterval(() => {
            this.playtime += 1000;
          }, 1000);
        } else {
          videosreplay.pause();
          clearInterval(this.playtimer);
        }
      },

下载视频

指定且只能指定，下载后的默认文件名字和文件后缀。注意，可以不指定后缀名，浏览器会根据数据类型自动为其匹配后缀名，但是最好指定后缀。

<a href="base64..." download="after">SAVE</a>

下载后的文件名为after.jpg
download属性不能指定下载路径；
当 download 属性值为空时，下载的文件的名字和扩展名与源文件一致;当href为base64编码的图像数据时，则下载后文件名也是那么离谱得长。

<a href="base64..." download>SAVE</a>

下载后的文件名为data_image_jpeg;base64,… .jpg

      download () {
        var url = URL.createObjectURL(recorderFile)
        console.log("URLLLLLL", url)
        const a = document.createElement("a");
        document.body.appendChild(a);
        a.style.display = "none";
        a.href = url;
        if (this.fileName) {
          a.download = this.fileName + ".mp4";
        } else {
          a.download = new Date() + ".mp4";
        }
        a.click();
        window.URL.revokeObjectURL(url);
      },

下载或上传给后端

      submit () {
        let that = this;
        console.log(recorderFile)
        // 下载
        this.download()
        let file = new File(
          [recorderFile],
          "msr-" + new Date().toISOString().replace(/:|\./g, "-") + ".mp4",
          {
            type: "video/mp4",
          }
        );
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        }
        console.log('file', file)
        const formdata = new FormData()
        formdata.append("file", file);
        // 传给后端
        // axios.post('/video', formdata, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } },) //请求头要为表单
        //   .then(response => {
        //     console.log('video', response.data);
        //     this.yy_score = parseInt(response.data.data + 0.5)
        //     that.progress = response.data.data * 1.0 / 23 * 100
        //   })
        //   .catch(function (error) {
        //     that.$message({
        //       message: error,
        //       type: 'error'
        //     });
        //     console.log(error);
        //   })
      },

var MediaUtils = {
    /**
     * 获取用户媒体设备(处理兼容的问题)
     * @param videoEnable {boolean} - 是否启用摄像头
     * @param audioEnable {boolean} - 是否启用麦克风
     * @param callback {Function} - 处理回调
     */
    getUserMedia: function (videoEnable, audioEnable, callback) {
      navigator.getUserMedia =
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia ||
        window.getUserMedia;
      var constraints = { video: videoEnable, audio: audioEnable };
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function (stream) {
            callback(false, stream);
          })
        ["catch"](function (err) {
          callback(err);
        });
      } else if (navigator.getUserMedia) {
        navigator.getUserMedia(
          constraints,
          function (stream) {
            callback(false, stream);
          },
          function (err) {
            callback(err);
          }
        );
      } else {
        callback(new Error("Not support userMedia"));
      }
    },

    /**
     * 关闭媒体流
     * @param stream {MediaStream} - 需要关闭的流
     */
    closeStream: function (stream) {
      if (typeof stream.stop === "function") {
        stream.stop();
      } else {
        let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];

        for (let i = 0; i < trackList.length; i++) {
          let tracks = trackList[i];
          if (tracks && tracks.length > 0) {
            for (let j = 0; j < tracks.length; j++) {
              let track = tracks[j];
              if (typeof track.stop === "function") {
                track.stop();
              }
            }
          }
        }
      }
    },
  };
  var startTime, mediaRecorder, mediaStream, stopRecordCallback, recorderFile;

页面完整代码

<template>
  <div>
    <video id="video" autoplay ref="videos" style="width: 400px;height: 400px;" muted></video>
    <video style="width: 400px;height: 400px;" id="videosreplay" src="" ref="videosreplay"></video>
    <button @click="callCamera()">开始录制</button>
    <button @click="record()">结束录制</button>
    <button @click="submit()">下载或上传</button>
  </div>
</template>
<script>
  import axios from 'axios'
  import fixWebmDuration from 'webm-duration-fix'

  export default {
    name: "Test",
    data () {
      return {
        progress: 0,
        replayVideo: false,
        recordtype: "BEGIN",
        showReplay: true,
        timer: 0,
        recordtime: 0,
        second: 0,
        minute: 0,
        hour: 0,
        playtime: 0,
        playtimer: 0,
        yy_score: 0,
        cnt_sum: 0,
        ansMaxTime: 0,
        ansBeginTime: 0,
        ansMaxBeginTime: 0,

      }
    },
    methods: {
      // 调用摄像头
      callCamera () {
        let _this = this;
        MediaUtils.getUserMedia(true, true, function (err, stream) {
          if (err) {
            throw err;
          } else {
            // 通过 MediaRecorder 记录获取到的媒体流
            const mimeType = 'video/webm;codecs=vp8,opus';
            mediaRecorder = new MediaRecorder(stream, {
              // mimeType: "video/webm;codecs=vp9",
              mimeType: mimeType,
            });
            mediaStream = stream;
            var chunks = []
            var video = _this.$refs.videos;
            video["srcObject"] = stream;
            video.play();// 播放实时画面
            mediaRecorder.ondataavailable = function (e) {
              mediaRecorder.blobs.push(e.data);
              chunks.push(e.data);
            };
            mediaRecorder.blobs = [];

            mediaRecorder.onstop = async () => {
              recorderFile = await fixWebmDuration(new Blob(chunks, { type: mimeType }));
              console.log(recorderFile);
              var url = URL.createObjectURL(recorderFile)
              var videosreplay = _this.$refs.videosreplay;
              videosreplay.setAttribute("src", url);
              console.log('url', url)
              chunks = [];
              if (null != stopRecordCallback) {
                stopRecordCallback();
              }
            };
            _this.record()
          }
        });
      },
      record () {
        if (this.recordtype == "ING") {
          this.stopRecord(() => {
            console.log("结束录制");
            this.toggleReplayVideo()
          });
        }
        else if (this.recordtype == "BEGIN") {
          console.log("开始录制");
          this.startAudio();
          mediaRecorder.start();
          startTime = Date.now();
          this.recordtype = "ING";
        }
      },

      // 对录像时长进行记录
      startAudio () {
        this.timer = setInterval(() => {
          this.recordtime += 1000;
          if (this.recordtime == 1000000) {
            this.stopRecord();
          }
          this.second++;
          if (this.second >= 60) {
            this.second = 0;
            this.minute = this.minute + 1;
          }

          if (this.minute >= 60) {
            this.minute = 0;
            this.hour = this.hour + 1;
          }
          console.log(this.recordtime)
        }, 1000);
      },

      // 停止录像时终止录制器，关闭媒体流并清除时长记录定时器
      stopRecord (callback) {
        this.recordtype = "END";
        this.showReplay = true;
        stopRecordCallback = callback;
        clearInterval(this.timer);
        // 终止录制器
        mediaRecorder.stop();
        // 关闭媒体流
        MediaUtils.closeStream(mediaStream);
        var videosreplay = this.$refs.videosreplay;
        videosreplay.onended = () => {
          this.playtime = 0;
          this.replayVideo = false;
          clearInterval(this.playtimer);
        };
        videosreplay.onclick = () => {
          this.showReplay = !this.showReplay;
        };
      },
      // 回放
      toggleReplayVideo () {
        console.log('播放中...')
        this.replayVideo = !this.replayVideo;
        this.showReplay = false;
        var videosreplay = this.$refs.videosreplay;
        if (this.replayVideo) {
          videosreplay.play().catch(err => {
            this.$message.error(err.message);
            console.log(err);
          });
          this.playtimer = setInterval(() => {
            this.playtime += 1000;
          }, 1000);
        } else {
          videosreplay.pause();
          clearInterval(this.playtimer);
        }
      },
      // 下载视频
      download () {
        var url = URL.createObjectURL(recorderFile)
        console.log("URLLLLLL", url)
        const a = document.createElement("a");
        document.body.appendChild(a);
        a.style.display = "none";
        a.href = url;
        if (this.fileName) {
          a.download = this.fileName + ".mp4";
        } else {
          a.download = new Date() + ".mp4";
        }
        a.click();
        window.URL.revokeObjectURL(url);
      },
      // 下载或上传
      submit () {
        let that = this;
        console.log(recorderFile)
        // 下载
        this.download()
        let file = new File(
          [recorderFile],
          "msr-" + new Date().toISOString().replace(/:|\./g, "-") + ".mp4",
          {
            type: "video/mp4",
          }
        );
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        }
        console.log('file', file)
        const formdata = new FormData()
        formdata.append("file", file);
        // 传给后端
        // axios.post('/video', formdata, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } },) //请求头要为表单
        //   .then(response => {
        //     console.log('video', response.data);
        //     this.yy_score = parseInt(response.data.data + 0.5)
        //     that.progress = response.data.data * 1.0 / 23 * 100
        //   })
        //   .catch(function (error) {
        //     that.$message({
        //       message: error,
        //       type: 'error'
        //     });
        //     console.log(error);
        //   })
      },
    }
  }
  var MediaUtils = {
    /**
     * 获取用户媒体设备(处理兼容的问题)
     * @param videoEnable {boolean} - 是否启用摄像头
     * @param audioEnable {boolean} - 是否启用麦克风
     * @param callback {Function} - 处理回调
     */
    getUserMedia: function (videoEnable, audioEnable, callback) {
      navigator.getUserMedia =
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia ||
        window.getUserMedia;
      var constraints = { video: videoEnable, audio: audioEnable };
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function (stream) {
            callback(false, stream);
          })
        ["catch"](function (err) {
          callback(err);
        });
      } else if (navigator.getUserMedia) {
        navigator.getUserMedia(
          constraints,
          function (stream) {
            callback(false, stream);
          },
          function (err) {
            callback(err);
          }
        );
      } else {
        callback(new Error("Not support userMedia"));
      }
    },

    /**
     * 关闭媒体流
     * @param stream {MediaStream} - 需要关闭的流
     */
    closeStream: function (stream) {
      if (typeof stream.stop === "function") {
        stream.stop();
      } else {
        let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];

        for (let i = 0; i < trackList.length; i++) {
          let tracks = trackList[i];
          if (tracks && tracks.length > 0) {
            for (let j = 0; j < tracks.length; j++) {
              let track = tracks[j];
              if (typeof track.stop === "function") {
                track.stop();
              }
            }
          }
        }
      }
    },
  };
  var startTime, mediaRecorder, mediaStream, stopRecordCallback, recorderFile;
</script>

结果

录制

在这里插入图片描述

播放

在这里插入图片描述

下载

在这里插入图片描述

项目代码

https://gitee.com/yuan-hongting/video

weixin_47424753
关注
  • 8
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue实现类似微信按住发送语音包给后端，推荐使用插件js-audio-recorder
swagLi的博客
06-13 396
一、需求是点击发送按钮说话获取语音文件发送给后台、鼠标移除即发送，限制时长30s。
vue中上传视频或图片或图片和文字一起到后端的解决方法
12-14
vue中上传视频或图片或图片和文字一起到后端 1.上传图片或视频： 2.图片和文字一起传： 3预览上传的图片（通过监听change事件，解析上传的图片）： 预览本地文件也可以通过HTML5的FileReader 4.文件上传，也...
vue中使用video.js，且可以截图、录制和下载视频
weixin_44042792的博客
03-13 2368
1. 安装video.js。
推荐一个创新的Chrome屏幕录制工具：Screenity
最新发布
gitblog_00067的博客
05-11 392
推荐一个创新的Chrome屏幕录制工具：Screenity 项目地址:https://gitcode.com/alyssaxuu/screenity ???? 高级功能与自由的完美结合 —— 体验前所未有的屏幕录像新境界！ 1、项目介绍 Screenity 是一款专为Chrome浏览器打造的强大屏幕和摄像头录制工具。它不仅提供无限制的录音和注解功能，还拥有丰富的自定义选项，帮助你在教学、演示或反馈过程...
vue获取摄像头视频、拍照
idoits的博客
10-12 2489
vue获取摄像头视频、拍照
HTML5调用摄像头录制视频
細水、長流√的专栏
06-19 1653
HTML5调用摄像头录制视频 不支持ie，ie下不支持webrtc，无法使用navigator.getUserMedia调用摄像头 <!DOCTYPE html> <html> <head> <title>video recoder</title> <script src="fileSaver.js"></script> <meta http-equiv="Content-Type" co
微信JSSDK与录音相关的坑
weixin_30566111的博客
04-17 501
欢迎各位转载, 以让微信团队重视这些恼人的BUG. 请注明出处微信JSSDK与录音相关的坑 by lzl124631x 我的github repo audio.js是我在微信jssdk上封装的一层录音接口, 目的是: 兼顾Desktop和微信调试. 绕过微信JSSDK的BUG, 让录音操作更加Robust, 快速连按不易出错. 既支持回调函数, 又支持异步的promise模式. 欢迎...
Vue里调用本地摄像头进行拍照(简单记录)
qq_41497443的博客
10-19 2489
Vue里调用本地摄像头进行拍照(简单记录) 主要代码： <template> <div> <!--<el-input type="text" v-model="imgSrc" />--> <el-col :span="1.5"> <el-button @click="onTake" icon="el-icon-camera" size="s
vue调用本地摄像头实现拍照功能
10-14
主要介绍了vue调用本地摄像头实现拍照功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
10-18
主要为大家详细介绍了Vue2.0实现调用摄像头进行拍照功能，以及图片上传功能引用exif.js，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 录制视频并压缩视频文件的方法
10-18
主要介绍了vue 录制视频并压缩视频文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 莹石摄像头直播视频实例代码
10-18
本文通过实例代码给大家介绍了vue 莹石摄像头直播视频功能，文章还给大家提到了vue h5项目调用手机摄像头录像并上传的功能，需要的朋友可以参考下
前端调用麦克风获取实时音频流和录音并上传至后台
05-11
文件分为两个，一个是实时获取音频流的文件，另一个是录音并上传至后台的文件，建议都在服务器环境下打开，这两天从网上整理的，希望对大家有所启发。
Vue调用后端java接口的实例代码
10-16
今天小编就为大家分享一篇Vue调用后端java接口的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解Vue调用手机相机和相册以及上传
10-17
在本文中，我们将深入探讨如何使用Vue.js框架调用手机的相机和相册功能，并将选取的图片上传到服务器。Vue.js是一个轻量级的前端JavaScript框架，它提供了丰富的组件化和响应式设计，使得开发移动端应用变得简单易行...
Vue中如何进行屏幕录制与直播推流
it_xushixiong的博客
06-15 5945
本文介绍了在Vue中进行屏幕录制和直播推流的两种方法。使用WebRTC API可以轻松地实现屏幕录制和直播推流功能，而使用RecordRTC库可以提供更多的录制功能。使用Vue-RTMP库可以轻松地实现直播推流功能。需要注意的是，WebRTC API和RecordRTC库在不同的浏览器中可能有不同的兼容性问题。在使用这些API和库时，需要进行充分的测试和兼容性检查，以确保应用程序能够在各种浏览器和操作系统上正常运行。此外，屏幕录制和直播推流功能需要使用摄像头和麦克风等设备，需要用户授权才能使用。
三种方法实现在VUE前端播放海康摄像头的监控视频
qq_45275100的博客
03-26 2803
2.ffmpeg拉取流，使用http协议播放 （需要用到docker）3.ffmpeg拉取流，使用rtmp协议播放（需要用到docker）
VUE3+TS+VITE+webrtc-streamer实现实时视频播放（监控设备-rtsp，进来保你成）
2201_75875170的博客
11-10 7728
DOCTYPE "... is not valid JSON关键句查询很久，发现得到的答案与我的情况并不相符，然后觉得可能是编码出错了，后来仔细看代码，确实是下图中的代码出错了，没有指明请求的协议以及ip地址前面没加 `//`推流后如果显示不出来，可以尝试在mediamtx或者webrtc两个控制台使用ctrl+c去结束可能的组设的进程，正常情况下，webrtc中会打印非常多no frame，但此时是能够播放的。因为目前没有在项目现场，无法接入摄像头，所以我是使用。启动一个流媒体服务器，使用。
VUE3+javaCV实现长时间录制视频
2201_75875170的博客
11-11 347
1、传统html提供了对video组件的媒体流captureStream方法，vue3使用的ts所适配的HTMLELEMNT中的还没有提供直接对video组件提取媒体流的方法。2、将video重绘到canvas，HTMLELEMENT提供了对canvas的媒体流获取的方法，但是只适用于短时间录制。1、使用HTMLVideoElement的caputure捕捉video组件中正在播放的视频流。弊端：将video绘制到canvas，然后捕捉canvas的媒体流，适用于秒级的录制。
vue 网盘 视频 下载
09-14
Vue 网盘是一个基于Vue.js框架开发的网盘应用，主要用于用户存储和分享文件。在Vue 网盘中，用户可以上传、下载、删除和管理自己的文件。 对于视频下载功能，Vue 网盘可以提供相应的解决方案。首先，用户可以在网盘中上传视频文件，这些文件将被存储在服务器上。在用户想要下载视频时，可以通过在Vue 网盘界面中选择视频文件并点击下载按钮来实现。 当用户点击下载按钮后，Vue 网盘将会提供一个下载链接给用户。用户可以点击该链接，将视频文件从服务器上下载到本地设备中。下载链接可以通过生成独一无二的URL来保证安全性，并且用户可以选择设置下载链接的过期时间，以提高安全性。 此外，为了提高用户的下载体验，Vue 网盘还可以提供一些下载管理功能。例如，用户可以查看下载进度，暂停或取消下载任务，以及设置下载速度限制等。 总结起来，Vue 网盘可以通过提供上传和下载功能，方便用户进行文件的存储和分享。对于视频下载，用户可以在网盘中上传视频文件，并通过生成下载链接来实现下载功能。下载管理功能可以提高用户的下载体验。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值