使用vue如何调用手机摄像头进行拍摄和录像

于 2024-08-29 15:43:23 发布
阅读量880 收藏 1
点赞数 3
文章标签： 智能手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60504665/article/details/141680532
版权

首先我们需要注意如果要调用手机镜头必须要开启https请求，如果没有可以在当前服务器面板去申请ssl证书，这样的话我们就能调起手机摄像头了，废话也不多说了直接上demo, demo还有些不完善的东西，还请路过的各位大佬指教一下啦


<script setup>
import { showToast, showSuccessToast, showFailToast, showLoadingToast,Overlay ,Popup,Circle} from 'vant';
import { onBeforeMount, onMounted, reactive, ref } from 'vue'
const videoArr = ref([])
const odelSel = ref('')//当前使用的摄像头
const myInterval = ref(null)
const mediaStreamTrack = ref('') // 退出时关闭摄像头
const video_stream = ref('') // 视频stream
const recordedBlobs = ref([]) // 视频音频 blobs
const isRecord = ref(false) // 视频是否正在录制
const content = ref('按住拍摄，点击拍照')
let test = 'c'
const startStauts = ref(true)// 开始录制按钮样式
// video参数
const videoRef = ref(null);
// 画布参数（照片回显）
const cs = ref(null)
const acs = ref(null)
const css = ref(null)
const csss = ref(null)
const cssss = ref(null)
const csssss = ref(null)
const showss=ref(true)
// 回显画布宽高
const canWidth = ref('')
const canHeight = ref('')
const echo_Status = ref(false)
const canvas_echo = ref(null)
// 关闭摄像头
const closeStatus = ref(true)
// 切换按钮状态
const cutStatus = ref(false)
// 照片数量限制
const photoNum = ref([])
// 照片回显数组
const videoList = ref([])
const videoNum = ref(0)
const timeOutEvent = ref(null)
const returns = ref(false)
const imgStatus=ref(false)
const currentRate=ref(0)
const videoStatus=ref(false)
// 录制参数
const isRecording = ref(false)
const videoBlob = ref(null)
const shows=ref(false)
// 前置后置摄像头切换
const cameraStatu = ref(0)
const cameraStatus = ref('user'); 
// 预览内容
let contents = ref({});
const showCenter = ref(false)
onMounted(() => {
  let cedioele = document.getElementsByClassName('camera_video')[0]
  canWidth.value = cedioele.offsetWidth
  canHeight.value = cedioele.offsetHeight
  let canvasList = document.getElementsByClassName('canns')
  cameraStatus.value='user'
  startStream()
})
// 前置后置切换
const changeDevice =async () => {
  cameraStatus.value = cameraStatus.value === 'user' ? 'environment' : 'user';
  closeCamera()
  await startStream();
}
// ------------------------------摄像头开关按钮-------------------------------
// 开启摄像头事件
// const getCamera = () => {
// }
const startStream = async () => {
  console.log(cameraStatu.value);
  const constraints = {
      audio: true,
   video: { facingMode:cameraStatus.value}
  };
 await  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      // 摄像头开启成功
      startStauts.value = false
      mediaStreamTrack.value = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
      video_stream.value = stream;
      videoRef.value.srcObject = stream;
    })
    .catch((err) => {
    });
  }
// 关闭摄像头
const closeCamera = () => {
  if (!videoRef.value.srcObject) return;
  let stream = videoRef.value.srcObject;
  let tracks = stream.getTracks();
  tracks.forEach(track => {
    track.stop();
  });
  videoRef.value.srcObject = null;
  startStauts.value = true
  closeStatus.value = true;
}
// ==========================点击拍照============================
const shoot = () => {
  if (startStauts.value == true) {
    showFailToast('请打开摄像头');
  } else {
    if (videoList.value.length < 5) {
      videoList.value.push({
        val: videoRef.value,
        id: videoNum.value++,
        type: 1
      })
      test = test += 's'
      photoNum.value.push(test)
      setTimeout(() => {
        // 大的
          let sc = cs.value[videoList.value.length - 1].getContext('2d');
          const dpr = window.devicePixelRatio || 1;
          const rect = cs.value[videoList.value.length - 1].getBoundingClientRect();  
          cs.value[videoList.value.length - 1].width = rect.width * dpr;
          cs.value[videoList.value.length - 1].height = rect.height * dpr;
          sc.scale(dpr, dpr)
          sc.drawImage(videoList.value[videoList.value.length - 1].val, 0, 0, 400,400);
// 小的
let ssc = acs.value[videoList.value.length - 1].getContext('2d');
          const dprs = window.devicePixelRatio || 1;
          const rects = acs.value[videoList.value.length - 1].getBoundingClientRect();  
          acs.value[videoList.value.length - 1].width = rects.width * dprs;
          acs.value[videoList.value.length - 1].height = rects.height * dprs;
          ssc.scale(dprs, dprs)
          ssc.drawImage(videoList.value[videoList.value.length - 1].val, 0, 0,50,50);
      }, 700)
    } else {
      showFailToast('照片已达上限');
    }
  }
}
// 检测点击按钮事件定时器
let times = null;
const imgUrls=ref('')
const imgUrlss=ref('')
function echo_btn(index) {
  console.log(index);
  shows.value=true
  showss.value=false
  console.log(videoList.value);
  if (videoList.value[index].type == 1) {
  imgStatus.value=true
  videoStatus.value=false
    echo_Status.value = true
    closeStatus.value = true
    cutStatus.value = true
    startStauts.value = false
    const image = cs.value[index].toDataURL("image/png",1.0);
    contents = {
      index: videoNum.value++,
      type: 1,
      url: image,
    }
    imgUrls.value=contents.url
    
    showCenter.value = true
    console.log(contents);
  } else {
videoStatus.value=true
imgStatus.value=false
    echo_Status.value = true
    closeStatus.value = true
    cutStatus.value = true
    startStauts.value = false
    contents = {
      index: videoNum.value++,
      type: 2,
      url: videoList.value[index].val
    }
    console.log(contents);
    imgUrlss.value=contents.url
    showCenter.value = true
  }
}
// 用户是否长按 false 点击、ture 长按
let userStatus = ref(false);
const currentNum = ref(0)
// 手指点击触发
const photosStart = () => {
  console.log(videoList.value.length);
  if (startStauts.value == true) {
    showFailToast('请打开摄像头');
  } else {
    // 判断是否超过5个
    if (videoList.value.length > 5) {
      showFailToast("最多录制5个文件!");
      return;
    }
    times = setTimeout(() => {
      userStatus.value = true;
      pressEvenet();
    }, 500);
  }

};
// 长按录像
let mediaRecorder = null;
let inte = null;
let eouts = null;
let stops = false;
const pressEvenet = () => {
  console.log(videoList.value);
  if (videoList.value.length < 5) {
    currentNum.value = 0;
    let chunks = [];
    stops = true;
    mediaRecorder = new MediaRecorder(video_stream.value, {
      mimeType: "video/webm;codecs=vp9",
    });
    mediaRecorder.ondataavailable = (event) => {
      if (event.data && event.data.size > 0) {
        chunks.push(event.data);
      }
    };
    mediaRecorder.onstop = () => {
      const blob = new Blob(chunks, { type: "video/webm" });
      const url = URL.createObjectURL(blob);
      console.log(url);
      videoList.value.push({
        val: url,
        id: videoNum.value++,
        type: 2
      })
      chunks = [];
    };
    mediaRecorder.start();
    inte = setInterval(() => {
      currentNum.value++;
      if (currentNum.value >= 100) {
        showDeleteButton()
      }
    }, 100);
    eouts = setTimeout(() => {
      clearInterval(inte);
      currentNum.value=0
      currentRate.value=0
      showSuccessToast("录制完成");
      mediaRecorder.stop();
      stops = false;
    }, 10000);
  } else {
    showFailToast("最多录制5个文件!");
  }

};
const showDeleteButton = () => {
  currentNum.value = 0
  currentRate.value=0
  // 判断是否超过5个
  if (videoList.value.length > 5) {
    showFailToast("最多录制5个文件!");
    return;
  }
  clearTimeout(times);
  pressStop();
}

// 停止录制事件
const pressStop = () => {
  if (stops) {
    mediaRecorder.stop();
    showSuccessToast("录制完成");
    stops = false;
    clearInterval(inte);
    clearTimeout(eouts);
  }
};

function close(index) {
  console.log(666);
  videoList.value.splice(index, 1)
if(videoList.value.length==1){
  imgStatus.value=false
}
}
function guan(){
  shows.value=false
  showss.value=true
}







</script>

<template>
  <div style="width:100%;height:100%;background-color:#4c4c4c;z-index:999999" v-show="shows">
    <div style="display:flex;padding-left:95%;background-color:white;cursor:pointer" @click="guan">X</div>
    <van-popup v-model:show="showCenter" style="width:100% ;margin-top:50px">
      <img :src="imgUrls" alt="" v-if="imgStatus" style="width:96%;height:auto;position:absolute;margin-left:auto">
      <video :src="contents.url" v-if="videoStatus" controls autoplay
        :style="{ width: '100%', height: 'auto' }"></video>
    </van-popup>
    </div>
  <div class="camera_box" v-show="showss">
    <!-- 成像区域 -->
    <div class="image_box">
      <!-- <vue-camera ref="camera"></vue-camera> -->
      <video ref="videoRef" autoplay width="100%" height="100%" class="camera_video" style="width:100%;height:100%" ></video>
    </div>
    <!-- 图片预览列表 -->
    <div class="image_list">
      <!-- 加按钮 -->
      <div class="add_btn">
        <img src="../src/assets/adds.png" alt="">
      </div>
      <!-- 列表 -->
      <div class="list">
        <!-- 大的 -->
        <div class="list_item" @click.stop.prevent="echo_btn(index)" v-for="(item, index) in videoList" :key="item.id" style="visibility:hidden;position:fixed">
          <canvas class="canns" ref="cs" width="400" height="400"></canvas>
          <div class="clack" v-if="item.type == 2">
            <video :src="item.val" style="width:100% ;height:100%"></video>
          </div>
          <div class="close_btn">
          </div>
        </div>
<!-- 小的 -->
<div class="list_item" @click.stop.prevent="echo_btn(index)" v-for="(item, index) in videoList" :key="item.id">
  <canvas class="canns" ref="acs" width="50" height="50"></canvas>
  <div class="clack" v-if="item.type == 2">
    <video :src="item.val" style="width:100% ;height:100%"></video>
  </div>
  <div class="close_btn">
  </div>
</div>







      </div>
      <!-- 减按钮 -->
      <div class="add_btn" @click.stop.prevent="close(index)">
   <img src="../src/assets/jian.png" alt="">
      </div>
    </div>
<div style="display:flex;align-items:center;justify-content:space-around;margin-top:40px">
  <div> <img src="../src/assets/left.png" alt="" style="width:20px;height:20px"></div>
        <!-- 拍摄操作区域 -->
        <div class="btn_boxs">
          <!-- 图片按钮 -->
          <input type="file" id="file">
          <label for="file" class="image_go">
            <div><van-icon name="photo-o" size="24px" color="#FA9923" /></div>
          </label>
          <!-- 拍摄按钮 -->
          <div class="pach_box" @click.stop.prevent="shoot" @touchstart="photosStart" @touchend="showDeleteButton">
            <van-button plain class="pach_btn">
<div class="addback"></div>
            </van-button>
          </div>
          <!-- 前置后置切换 -->
          <div class="camera_go" ><van-icon name="photograph" size="24px" color="#FA9923" /></div>
          <div class="pach_boxs">
            <van-circle v-model:current-rate="currentRate" :rate="currentNum" :speed="100" :text="text" size="76"
              color="#FA9923" stroke-width="100" />
          </div>
        </div>
  <div> <img src="../src/assets/right.png" @click='changeDevice' alt="" style="width:20px;height:20px"></div>




</div>

    <div class="message"><b>{{ content }}</b></div>

  </div>
</template>

<style scoped>
.close_btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 0;
  height: 0;
  border-top: 16px solid #EEEEEE;
  border-left: 16px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close_btn>img {
  width: 8px;
  height: 8px;
  position: absolute;
  top: -13px;
  right: 1px;
}

.clack {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.clack>img {
  width: 100%;
  height: 100%;
}

.canvas_echo {
  position: absolute;
  top: 0;
  left: 0;
}

.camera_box {

}

.success_btn {
  padding: 10px;
}

.start_live {
  padding: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.end_live {
  padding: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.cut_live {
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
}

.image_box {
  width: 100%;
  height: 60vh;
  position: relative;
  border-radius: 0 0 10px 10px;
  border: 1px solid #EEEEEE;
}

.live_window {
  width: 100%;

}

.back_btn {
  width: 20px;
  height: 20px;
  border: 50%;
  opacity: 0.5;
}

.btn_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  font-size: 1rem;
}

.image_list {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn_boxs {

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.image_go {
  width: 20%;
}

.camera_go {
  width: 20%;
  display: flex;
  justify-content: right;
}



.pach_boxs {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pach_icon {
  width: 80%;
  height: 80%;
}

.pach_btn {
  width: 70px;
  height: 65px;
  border-radius: 50%;
  background-color: #e6e6e6;
  display: flex;
  justify-content: center;
  margin-top: -5px;
  align-items: center;
}

.pach_img {
  width: 40px;
  height: 40px;
}
.addback{
  width: 20px;
  height: 20px;
  background-color: rgba(205, 205, 205, 1);
  border-radius: 50%;
}

.add_btn {
  width: 30px;
  height: 30px;
  background-color: #FA9A24;
  display: flex;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-left: 10px;
}

.add_btn>img {
  width: 12px;
  height: 12px;
}

.list {
  display: flex;
  align-items: center;
}

.list_item {
  width: 50px;
  height: 50px;
  background-color: #EEEEEE;
  margin-left: 10px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

#file {
  display: none;
}

.message {
  margin-top: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

那维莱特
关注
vue 调用移动录像_vue H5项目调用手机摄像头录像并上传
weixin_39614094的博客
12-20 954
上传文件input.file{position: relative;-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;z-index: 2;}.wrapper{color: #fff;background-color: #31b0d5;border-color: #269abc;margin-top: 5px;margin-bottom: 5p...
vue中如何调用ios摄像头_如何使用Vue2.0调用摄像头进行拍照
weixin_42466857的博客
12-30 489
这次给大家带来如何使用Vue2.0调用摄像头进行拍照，使用Vue2.0调用摄像头进行拍照的注意事项有哪些，下面就是实战案例，一起来看一下。import {Exif} from './exif.js'export default {data () {return {headerImage:'',picValue:''}},mounted () {},methods: {upload (e) {let...
vue2项目 H5页面调用摄像头拍照
weixin_53322542的博客
11-14 1334
【代码】vue2项目 H5页面调用摄像头拍照。
vue调用本地摄像头实现拍照功能
10-14
主要介绍了vue调用本地摄像头实现拍照功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue项目调用摄像头实现拍照功能
最新发布
Web_Notes的博客
02-21 3527
该 API 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。1.因为我是使用微信二维码扫码预览，一直无法进入navigator.mediaDevices .getUserMedia()方法，无法打开摄像头，后面采用网址的方式预览，换了其他浏览器才可以。
vue实现调用手机拍照、录像功能
m0_64590669的博客
11-17 5919
vue实现调用手机拍照、录像功能
在Vue中调用手机摄像头拍照
用作学习记录
11-24 1658
在Vue中调用手机摄像头拍照
vue中如何调用ios摄像头_vue 调用摄像头并实现拍照功能
weixin_42639633的博客
01-30 1676
页面结构效果预览 打开摄像头关闭摄像头拍照js部分export default {data() {return {videoWidth: 250,videoHeight: 350,imgSrc: "",thisCancas: null,thisContext: null,thisVideo: null,openVideo:false};},mounted(){//this.getComp...
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
10-18
主要为大家详细介绍了Vue2.0实现调用摄像头进行拍照功能，以及图片上传功能引用exif.js，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
IE+Flash+vue项目调用摄像头拍照
12-14
代码是vue的项目，先用npm install初始化，再用npm run dev指令即可
Vue3中调用摄像头并拍照
weixin_70243424的博客
07-24 2252
【代码】Vue3中调用摄像头并拍照。
vue调用摄像头拍照
weixin_46194350的博客
02-16 518
vue中调用本地摄像头拍照生成base64的图像
vue 调用摄像头拍照以及获取相片本地路径(实测有效)
aaoug3690的博客
04-01 1783
在学习这个的时候有一点前提：这是针对手机功能的，所以最重要的是要用手机进行实时调试 包含图片的增加和删除功能 <template> <div> <!--照片区域--> <div v-for="(urls, index) in imgs " style="float: left; mar...
vue H5页面调用手机相机拍照/图片上传
wwf1225的博客
12-20 1245
拍照
html调起苹果手机摄像头_HTML5 调用手机摄像头拍照
weixin_39980002的博客
12-21 822
一、getUserMedia API简介getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。getUserMedia API最初是navigator.getUserMedia，目前已被最新Web标准废除，变更为navigator.mediaDevices.getUserMedia(...
vue 调用手机摄像头
03-31
要调用手机摄像头，需要使用 HTML5 中的 getUserMedia API。在 Vue 中可以使用 vue-web-cam 插件来方便地调用摄像头。安装 vue-web-cam 插件后，可以在模板中使用以下代码调用摄像头： ```html <template> <div> <webcam :autoplay="true" :mirror="false" :playsinline="true"></webcam> </div> </template> ``` 其中，autoplay 表示是否自动播放视频，mirror 表示是否镜像显示摄像头画面，playsinline 表示是否在页面内播放视频。 在 JavaScript 中，可以使用以下代码获取摄像头视频流： ```javascript import Webcam from 'vue-web-cam'; // ... export default { components: { Webcam }, methods: { startCamera() { navigator.mediaDevices.getUserMedia({ video: true }) .then((stream) => { this.$refs.webcam.srcObject = stream; }) .catch((error) => { console.log(error); }); } } } // ... <template> <div> <button @click="startCamera">Start Camera</button> <webcam ref="webcam"></webcam> </div> </template> ``` 在以上代码中，通过调用 getUserMedia 方法获取视频流并将其赋值给 Webcam 组件的 srcObject 属性。需要注意的是，在手机浏览器中，需要先触发用户的交互行为（如点击按钮）才能调用摄像头。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值