• vue制作拍照、录像功能

    使用vue制作出来相机的功能：照相、录视频

    废话不多说，直接上代码！

    布局：

    1. <template>
    2.   <div>
    3.     <video ref="video" autoplay>video>
    4.     <canvas ref="canvas" width="64" height="48">canvas>
    5.     <div class="footer">
    6.       <div class="font"><b>{{ content }}b>div>
    7.       <div class="but">
    8.         <input type="file" id="file">
    9.         <label for="file"><img src="../assets/img.png" alt="">label>
    10.         
    11.         <div @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="showDeleteButton()" class="lick">
    12.           <p class="li">p>
    13.         div>
    14.         
    15.         <img @click='changeDevice' src="../assets/look.png" alt="">
    16.       div>
    17.     div>
    18.     <div>
    19.       <button @click="getCamera" style="margin-right: 10px;">开启摄像头button>
    20.       <button @click="closeCamera">关闭摄像头button>
    21.     div>
    22.     <a id="downLoadLink" style="display: none;">a>
    23.     
    24.   div>
    25. template>

    CSS样式：

    1. <style scoped>
    2. video {
    3.   width: 100%;
    4.   height: 60vh;
    5.   background-color: black;
    6. }
    7.  
    8. #file {
    9.   display: none;
    10. }
    11.  
    12. .font {
    13.   width: 100%;
    14.   text-align: center;
    15.   font-size: 15px;
    16.   color: #667E6E;
    17.   margin-bottom: 20px;
    18. }
    19.  
    20. .footer {
    21.   width: 90%;
    22.   height: 23vh;
    23.   margin-left: 5%;
    24.   position: fixed;
    25.   bottom: 0;
    26.   z-index: 10;
    27.   background-color: white;
    28. }
    29.  
    30. .but {
    31.   display: flex;
    32.   justify-content: space-around;
    33. }
    34.  
    35. .lick {
    36.   width: 70px;
    37.   height: 70px;
    38.   line-height: 70px;
    39.   border-radius: 50%;
    40.   background-color: #E6E6E6;
    41.   /* text-align: center; */
    42. }
    43.  
    44. .li {
    45.   width: 30px;
    46.   height: 30px;
    47.   line-height: 30px;
    48.   background-color: #B7B7B7;
    49.   border-radius: 50%;
    50.   margin: 20px 0 0 20px;
    51. }
    52.  
    53. input {
    54.   width: 50px;
    55. }
    56.  
    57. img {
    58.   width: 40px;
    59.   height: 40px;
    60.   margin-top: 15px;
    61. }
    62. style>

    脚本：

    1. <script>
    2. export default {
    3.   data() {
    4.     return {
    5.       videoArr: [],//所有的摄像头,也可以加入音频设备
    6.       modelSel: '',//当前使用的摄像头
    7.       myInterval: null,
    8.       mediaStreamTrack: {}, // 退出时关闭摄像头
    9.       video_stream: '', // 视频stream
    10.       recordedBlobs: [], // 视频音频 blobs
    11.       isRecord: false, // 视频是否正在录制
    12.       content: '按住拍摄，点击拍照'
    13.     }
    14.   },
    15.   created() {
    16.     this.changeDevice();
    17.   },
    18.   mounted() {
    19.     this.getCamera();
    20.   },
    21.   methods: {
    22.     getCamera() {
    23.       // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
    24.       if (navigator.mediaDevices === undefined) {
    25.         navigator.mediaDevices = {};
    26.       }
    27.       navigator.mediaDevices
    28.         .getUserMedia({
    29.           video: true,
    30.         })
    31.         .then((stream) => {
    32.           // 摄像头开启成功
    33.           this.mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
    34.           this.video_stream = stream;
    35.           this.$refs.video.srcObject = stream;
    36.           this.$refs.video.play();
    37.         })
    38.         .catch(err => {
    39.           console.log(err);
    40.         });
    41.     },
    42.     //长按事件（起始） 返回按钮--------------------------------------------------------------------------------------------
    43.     gtouchstart() {
    44.       var self = this;
    45.       this.timeOutEvent = setTimeout(function () {
    46.         self.longPress();
    47.       }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
    48.       return false;
    49.     },
    50.     //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    51.     showDeleteButton() {
    52.       clearTimeout(this.timeOutEvent); //清除定时器
    53.       if (this.timeOutEvent != 0) {    //这里写要执行的内容（如onclick事件）点击未长按
    54.         this.returns = true
    55.         setTimeout(() => {
    56.           this.uploadImg()
    57.         }, 100);
    58.       } else { //长按后松开要执行的内容
    59.         this.returns = false
    60.         this.stop()
    61.         this.content = '按住拍摄，点击拍照'
    62.       }
    63.       return false;
    64.     },
    65.     //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    66.     gtouchmove() {
    67.       clearTimeout(this.timeOutEvent); //清除定时器
    68.       this.timeOutEvent = 0;
    69.       console.log("移动");
    70.     },
    71.     //真正长按后应该执行的内容
    72.     longPress() { //执行长按要执行的内容，如弹出菜单
    73.       this.timeOutEvent = 0;
    74.       this.returns = true
    75.       this.record();
    76.       this.content = '视频录制中'
    77.       console.log("长按");
    78.     },
    79.     // 拍照--------------------------------------------------------------------------------------------------------------------
    80.     uploadImg() {
    81.       let ctx = this.$refs['canvas'].getContext('2d');
    82.       ctx.drawImage(this.$refs['video'], 0, 0, 64, 48);
    83.       // let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7);
    84.       console.log(this.$refs['canvas']);
    85.     },
    86.     closeCamera() {
    87.       if (!this.$refs['video'].srcObject) return;
    88.       let stream = this.$refs['video'].srcObject;
    89.       let tracks = stream.getTracks();
    90.       tracks.forEach(track => {
    91.         track.stop();
    92.       });
    93.       this.$refs['video'].srcObject = null;
    94.     },
    95.     changeDevice() {
    96.       navigator.mediaDevices.enumerateDevices().then((devices) => {
    97.         this.videoArr = [];
    98.         devices.forEach((device) => {
    99.           //音频是audioautput  摄像头videoinput
    100.           if (device.kind == 'videoinput') {
    101.             this.videoArr.push({
    102.               'label': device.label,
    103.               'id': device.deviceId
    104.             })
    105.           }
    106.         });
    107.       })
    108.     },
    109.     setCurrentDevice(val) {
    110.       const videoConstraints = {};
    111.       if (val === '') {
    112.         videoConstraints.facingMode = 'environment';
    113.       } else {
    114.         videoConstraints.deviceId = { exact: val };
    115.       }
    116.       var constraints = {
    117.         video: videoConstraints,
    118.       };
    119.       this.getUserMedia(constraints);
    120.     },
    121.     getUserMedia(constraints, success, error) {
    122.       if (navigator.mediaDevices.getUserMedia) {
    123.         //最新的标准API
    124.         navigator.mediaDevices.getUserMedia(constraints).then(success => {
    125.           // 摄像头开启成功
    126.           this.$refs['video'].srcObject = success
    127.           // 实时拍照效果
    128.           this.$refs['video'].play()
    129.         }).catch(error);
    130.  
    131.       } else if (navigator.webkitGetUserMedia) {
    132.         //webkit核心浏览器
    133.         navigator.webkitGetUserMedia(constraints, success, error)
    134.       } else if (navigator.mozGetUserMedia) {
    135.         //firfox浏览器
    136.         navigator.mozGetUserMedia(constraints, success, error);
    137.       } else if (navigator.getUserMedia) {
    138.         //旧版API
    139.         navigator.getUserMedia(constraints, success, error);
    140.       }
    141.     },
    142.     // 视频录制----------------------------------------------------------------------------------------------------------------------
    143.     record() {
    144.       console.log('record');
    145.       this.isRecord = !this.isRecord;
    146.       let mediaRecorder;
    147.       let options;
    148.       this.recordedBlobs = [];
    149.       if (typeof MediaRecorder.isTypeSupported === 'function') {
    150.         // 根据浏览器来设置编码参数
    151.         if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
    152.           options = {
    153.             MimeType: 'video/webm;codecs=h264',
    154.           };
    155.         } else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) {
    156.           options = {
    157.             MimeType: 'video/webm;codecs=h264',
    158.           };
    159.         } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    160.           options = {
    161.             MimeType: 'video/webm;codecs=vp8',
    162.           };
    163.         }
    164.         mediaRecorder = new MediaRecorder(this.video_stream, options);
    165.       } else {
    166.         // console.log('isTypeSupported is not supported, using default codecs for browser');
    167.         console.log('当前不支持isTypeSupported，使用浏览器的默认编解码器');
    168.         mediaRecorder = new MediaRecorder(this.video_stream);
    169.       }
    170.       mediaRecorder.start();
    171.       // 视频录制监听事件
    172.       mediaRecorder.ondataavailable = e => {
    173.         console.log(e);
    174.         // 录制的视频数据有效
    175.         if (e.data && e.data.size > 0) {
    176.           this.recordedBlobs.push(e.data);
    177.         }
    178.       };
    179.       // 停止录像后增加下载视频功能，将视频流转为mp4格式
    180.       mediaRecorder.onstop = () => {
    181.         const blob = new Blob(this.recordedBlobs, { type: 'video/mp4' });
    182.         this.recordedBlobs = [];
    183.         // 将视频链接转换完可以用于在浏览器上预览的本地视频
    184.         const videoUrl = window.URL.createObjectURL(blob);
    185.         // 设置下载链接
    186.         document.getElementById('downLoadLink').href = videoUrl;
    187.         // 设置下载mp4格式视频
    188.         document.getElementById('downLoadLink').download = 'media.mp4';
    189.         document.getElementById('downLoadLink').innerHTML = 'DownLoad video file';
    190.         // 生成随机数字
    191.         const rand = Math.floor((Math.random() * 1000000));
    192.         // 生成视频名
    193.         const name = `video${rand}.mp4`;
    194.  
    195.         // setAttribute() 方法添加指定的属性，并为其赋指定的值
    196.         document.getElementById('downLoadLink').setAttribute('download', name);
    197.         document.getElementById('downLoadLink').setAttribute('name', name);
    198.  
    199.         // 0.5s后自动下载视频
    200.         setTimeout(() => {
    201.           document.getElementById('downLoadLink').click();
    202.         }, 500);
    203.       };
    204.     },
    205.     // 停止录制----------------------------------------------------------------------------------------------------------------------
    206.     stop() {
    207.       this.isRecord = !this.isRecord;
    208.       if (!this.$refs.video.srcObject) return;
    209.       const stream = this.$refs.video.srcObject;
    210.       const tracks = stream.getTracks();
    211.       // 关闭摄像头和音频
    212.       tracks.forEach(track => {
    213.         track.stop();
    214.       });
    215.     },
    216.   }
    217. }
    218. script>

  • 相关阅读:
    虚拟机安装Kali Linux操作系统
    《算法竞赛进阶指南》破坏正方形
    水溶性，非反应性，含有游离羧酸功能----cy染料 近红外荧光亲水CY7 COOH；Sulfo-CY5/CY7 COOH
    Java学习笔记3.10.2 异常处理 - 异常捕获
    网段与广播域
    【开源】嵌入式微服务框架MAES
    Tomcat 开启远程调试
    Google Hacking搜索
    网站打不开的九个因素
    Python 自动化: eip、cen监控数据对接到 grafana
  • 原文地址：https://blog.csdn.net/dxn16638400024/article/details/134428707