1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：weixin_47424753 分类：Toy博客 阅读(72) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue调用摄像头录制视频和音频并上传给后端或下载到本地。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

下载插件

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>

结果

录制

vue3实现录屏同时录制音频和视频合并轨道为一个文件,前端,vue.js,音视频,javascript

播放

vue3实现录屏同时录制音频和视频合并轨道为一个文件,前端,vue.js,音视频,javascript

下载

vue3实现录屏同时录制音频和视频合并轨道为一个文件,前端,vue.js,音视频,javascript

项目代码

https://gitee.com/yuan-hongting/video文章来源地址https://www.toymoban.com/news/detail-615417.html

到了这里，关于Vue调用摄像头录制视频和音频并上传给后端或下载到本地的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • untiy 录制网络摄像头视频并保存到本地文件

    untiy 录制网络摄像头视频并保存到本地文件

    网络摄像头使用的是海康威视的，关于如何使用Ump插件播放海康威视rtsp视频流，请参考我的这篇文章 内部有ump插件的下载链接 untiy接入 海康威视网络摄像头 录屏使用的插件是 AVPro movieCapture 4.6.3版， 插件和完整工程的下载链接放在本文的最后 录制摄像头的实现思想为 1 um

    2023年04月09日
    浏览(53)

  • C#使用OpenCv（OpenCVSharp）使用摄像头视频显示和录制及图片保存、本地视频显示

    本篇实例讲解基于OpenCvSharp实现了摄像头视频显示、录制及截图、视频保存，本地视频的显示功能。 目录 创建winform项目添加控件 NuGet安装opencvsharp  代码  运行效果 实例实现过程

    2024年02月15日
    浏览(48)
  • javacv基础02-调用本机摄像头并预览摄像头图像画面视频

    javacv基础02-调用本机摄像头并预览摄像头图像画面视频

    引入架包： 运行效果： 注意： 1、maven依赖后，会导致整个项目工程打包发布后的体积变得十分巨大 原因是ffmpeg和opencv两个依赖默认会把android，ios，linux，macos，windows以及各自不同cpu芯片下，86/64等所有版本的Jar会全部依赖进来，项目打包后体积剧增500M+ 解决方法也比较简单

    2024年02月11日
    浏览(60)
  • 摄像头的调用和视频识别

    摄像头的调用和视频识别

    创建视频捕捉对象：cv2.VideoCapture() 参数为视频设备的索引号，就一个摄像投的话写0默认； 或者是指定要读取视频的路径。 cv2.VideoWriter() 通过对视频中相邻两帧图像做差分运算来标记运动物体， 移动的物体在相邻帧中灰度会有差别，因此差值为0的是静态物体。 飘动的彩带也

    2024年02月11日
    浏览(44)
  • 使用OpenCV调用摄像头和读取视频图片

    使用OpenCV调用摄像头和读取视频图片

    要捕获视频，你需要创建一个 VideoCapture 对象。它的参数是设备索引的名称。设备索引就是指定哪个摄像头的数字。正常情况下，内部摄像头可以通过传入0来调用，传递1来选择外置的第二个相机，以此类推。在此之后，你可以逐帧捕获。但是在最后，不要忘记释放俘虏。 直

    2024年02月08日
    浏览(53)

  • JavaScript音视频，使用JavaScript如何在浏览器录制电脑摄像头画面为MP4视频文件并下载视频文件到本地

    本章介绍使用JavaScript如何在浏览器录制电脑摄像头画面为MP4视频文件并下载视频文件到本地。 1、使用navigator.mediaDevices.getUserMedia获取摄像头画面 2、将获取到的摄像头画面渲染到canvas画板上 3、将canvas转换为blob对象 4、通过document.createElement(‘a’)调用 href 方法获取此链接并触

    2024年02月02日
    浏览(84)
  • yolo v5代码运行图片、调用摄像头、视频

    yolo v5代码运行图片、调用摄像头、视频

    一、运行 1.视频 修改detect文件219行。 default=ROOT / \\\'data/images/3.mp4\\\' 2.调用摄像头 修改detect文件219行 3.图片 修改detect文件219行。 default=ROOT / \\\'data/images/3.jpg\\\' 二、库 Package Version absl-py 1.3.0 alabaster 0.7.12 applaunchservices 0.2.1 appnope 0.1.2 arrow 1.2.3 astroid 2.11.7 atomicwrites 1.4.0 attrs 22.1.0 autope

    2023年04月17日
    浏览(52)

  • JS PC端调用摄像头录视频截图上传文件

    创建 Catcher 类 直接在HTML文件中调用

    2024年02月10日
    浏览(51)
  • vue调用电脑端摄像头实时拍照

    vue调用电脑端摄像头实时拍照

    点击照相机拍照，弹出照相机拍照弹窗，点击拍照按钮，截取录像的帧，点击保存，提交数据给后台。 1.html模块 2.css模块 就是一个弹窗，这里就不进行展示了。 3.js模块

    2024年02月12日
    浏览(52)

  • Vue2调用电脑摄像头权限，并拍照

    电脑端需要调取用户摄像头进行拍照

    2024年02月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包