【vue】pc调用摄像头并实现截图demo完整代码

小码助力助你前行

已于 2022-07-15 15:10:30 修改

阅读量466

点赞数

分类专栏： vue js 文章标签： vue.js 前端 javascript

于 2022-07-15 15:07:41 首次发布

本文链接：https://blog.csdn.net/weixin_42575720/article/details/125805064

版权

效果图

左侧摄像头，右侧截取的图像

完整代码

html：

<template>
  <div class="myLive">
    <div class="top_button">
      <!--开启摄像头-->
      <Button
        v-if="isCameraFlag"
        type="primary"
        ghost
        @click="callCamera"
        style="margin-right: 10px"
        >开启摄像头</Button
      >
      <!--关闭摄像头-->
      <Button
        v-else
        type="danger"
        ghost
        @click="closeCamera"
        style="margin-right: 10px"
        >关闭摄像头</Button