首页 > 其他分享 >js 录制视频及拍照

js 录制视频及拍照

时间:2024-05-11 16:09:17浏览次数:16  
标签:拍照 mediaRecorder const 录制 canvas js video let document

<style>
    span {
      cursor: pointer;
    }

    .playvideo {
      position: relative;
      height: 500px;
    }

    video {
      width: 800px;
      height: 500px;
      border: 1px solid #000;
      object-fit: fill;
    }

    canvas {
      position: absolute;
      width: 800px;
      height: 500px;
      left: 1px;
      top: 1px;
    }

    .showimg img {
      width: 500px;
      height: 250px;
    }

    .showvideo video {
      width: 500px;
      height: 250px;
    }
  </style>
 <div>
    <span onclick="startRecording()">开始录像</span>
    <span onclick="stopRecording()">结束录像</span>
    <span onclick="photograph()">拍照</span>
  </div>

  <div style="display:flex">
    <div class="playvideo">
      <video></video>
      <canvas id="canvas" style="display: none"></canvas>
    </div>
    <div>
      <div class="showvideo">
      </div>
      <div class="showimg"></div>
    </div>
  </div>

  <script>
    function findNthIndex (str, searchChar, n) {
      let index = -1;
      for (let i = 0; i < n; i++) {
        index = str.indexOf(searchChar, index + 1);
        if (index === -1) {
          return -1;
        }
      }
      return index;
    }
    let mediaRecorder = null;
    let recordedChunks = [];
    const startRecording = () => {
      const options = { mimeType: 'video/webm;codecs=h264' };  //文件格式
      mediaRecorder = new MediaRecorder(window.stream, options);
      mediaRecorder.ondataavailable = function (e) {
        if (e.data.size > 0) {
          recordedChunks.push(e.data);
        }
      };

      mediaRecorder.onstop = function (e) {
        const blob = new Blob(recordedChunks, { type: 'video/mp4' });
        recordedChunks = [];
        const url = window.URL.createObjectURL(blob)
        //下载
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.style = 'display: none';
        a.href = url;
        a.download = 'recorded.mp4';
        a.click();
        window.URL.revokeObjectURL(url);
        // const index =findNthIndex(str,"/",3);
        // let newurl = str.slice(index, str.length-1)+".mp4";
        // console.log(newurl)
        //渲染
        let showvideo = document.querySelector(".showvideo");
        showvideo.innerHTML = "";
        const videoElement = document.createElement('video');
        videoElement.src = url;
        videoElement.preload="preload"
        videoElement.controls = true;
        showvideo.appendChild(videoElement);
      };
      mediaRecorder.start();
    };

    const stopRecording = () => {
      console.log("stopRecording")
      if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
      }
    };
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(function (stream) {
        window.stream = stream;
        // 使用视频流初始化一个 video 元素
        const video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = (event) => video.play();
      })
      .catch(function (err) {
        console.log('Error:', err);
      });
    function photograph () {
      let v =
        document.querySelector("video");
      let canvas = document.getElementById("canvas");
      canvas.width = 800;
      canvas.height = 600;
      canvas
        .getContext("2d")
        .drawImage(v, 0, 0, canvas.width, canvas.height);
      let data = canvas.toDataURL("image/jpeg", 0.8);
      let showimg = document.querySelector(".showimg");
      showimg.innerHTML = "";
      const img = document.createElement('img');
      showimg.appendChild(img);
      img.src = data;
      // console.log(data)
    }


  </script>

 

标签:拍照,mediaRecorder,const,录制,canvas,js,video,let,document
From: https://www.cnblogs.com/guozhongbo/p/18186673

相关文章

  • Fastjson反序列化漏洞2:BasicDataSource利用链-用于内网
    之前说的Fastjson的利用链,补充来了,没有偷懒(狗头)前情提要:BCEL:加载恶意类、Fastjson反序列化漏洞1:吹吹水Fastjson干了啥Fastjson就是处理json用的,可以将json转换成对象(自定义的一套序列化和反序列化)举个例子:下面这个json字符串经过JSON.parse(jsonString)处理可以得到com.test......
  • js 遍历数组取出字符串用逗号拼接
    var arr=[{"name":"hhh"},{"name":"dddd"}] //用jsfunction getTextByJs(){    var str= "";    for (var i=0;i<arr.length;i++){        str+=arr[i].name+ ",";    }    //去掉最后一个逗号(如......
  • js之模块导入与导出:export、export default、module.exports、exports
    前两者export、exportdefault可为一组,是es6的规范,和import匹配,import是es6中的语法标准;后两者module.exports、exports可为一组,是commonjs的规范,和require匹配,require是amd规范下的引入方式。当组合不适配时,当然就会报错了。module.exports、exports1,从使用方式来看,exports是mo......
  • 使用js有效括号匹配封装函数
    点击查看代码functionisValidParentheses(str){//定义一个栈,用于存储待匹配的左括号letstack=[];//定义一个对象,用于快速判断括号是否成对constpairs={')':'(','}':'{',']':'['};//遍历输入字符串for(let......
  • Error: Cannot find module 'C:\Program Files\nodejs\node_modules\npm\bin\no
     #参考:https://stackoverflow.com/questions/69541725/error-cannot-find-module-c-program-files-nodejs-node-modules-npm-bin-node-mod --- #问题描述在一直倒腾重新安装nodejs时报的一个这样的错,记录一下 在执行npm-v时报了如标题的错,见下图 --- #原因......
  • [idea]mvn install没有问题,idea build报错程序包com.alibaba.fastjson不存在
    现象:1、mvninstall没有问题2、ideabuild报错程序包com.alibaba.fastjson不存在3、File->Settings->Build,Execution,Deployment->Compiler自动编译选项也是勾选的解决:1、委托maven构建和运行,确实能执行;但是运行都要执行maveninstall,速度慢 -- 不推荐 2、在......
  • Mapbox GL JS access token 问题
    使用MapboxGLJS时出现如下错误Error:AvalidMapboxaccesstokenisrequiredtouseMapboxGLJS.Tocreateanaccountoranewaccesstoken,visithttps://account.mapbox.com/解决方法:(1)MapBox在内网使用时,accesstoken不能使用,导致局域网内地图服务不能使用,只需修......
  • js数组常用方法
    一、改变原数组的方法       1.push()末尾添加数据       2.pop()末尾出删除数据       3.unshift()头部添加数据       4.shift()头部删除数据       5.reverse()翻转数组       6.sort()排序       7.splice() 截取数组  ......
  • h5使用js拉起微信支付
    近期,业务需求对接了微信支付,做个总结。web网页想要拉起微信支付,有两种方法:H5下单支付,JSAPI支付。首先纯前端做不了微信支付,必须配合后端才能通过微信的下单请求。接下来说说这两种方法的区别。H5微信下单支付这种支付方式是用户在浏览器端打开网页,通过下单等操作,与后端交互......
  • Json转Go在线工具
    1、可以将Json字符串在线自动解析校验格式化为go的struct结构体(严格按照Golang标准执行生成struct结构体)2、提供将任意复杂,简单格式的Json字符串转换生成go的struct结构体3、支持Json格式错误提示,不会格式化不符合规范的Json字符串,以保证struct结构体的准确性4、支持选择是......