第15课:摄像头的使用

本例利用 webkitGetUserMedia 方法调用本机的摄像头拍照,该方法是基于 Webkit 内核浏览器专用的。下面先看一下效果。

1240

点击页面右下角的按钮,会弹出一个保存对话框,可以将摄像头当前的图像保存成一个 png 格式的图像。

下面先看一下本例的实现代码。

  • index.html
<html>
  <head>
    <title>拍照</title>
    <link href="index.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="event.js"></script>
  </head>
  <body>
          <!--用于实时显示摄像头拍到的影像-->
      <canvas width="800" height="600"></canvas>
         <!--真正的播放摄像头排到的影像-->
      <video autoplay></video>
          <!-- 保存按钮 -->
      <div id="takePhoto" onclick="takePhot
蒙娜丽宁 CSDN认证博客专家 公众号:极客起源 达芬奇 UM
更多精彩内容请关注微信公众号:「极客起源」,东北大学计算机专业硕士。UnityMarvel创始人,企业内训讲师、IT畅销书作者,CSDN学院讲师,拥有多年软件开发经验和培训经验。主要著作包括《Python从菜鸟到高手》、《Python爬虫技术:深入理解原理、技术与开发》,培训企业学员数千人。制作在线课程数千小时。更多视频课程,请访问我的B站:https://space.bilibili.com/477001733
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值