第15课：摄像头的使用

蒙娜丽宁

于 2020-09-22 12:25:06 发布

阅读量642

点赞数

分类专栏： Electron 开发入门文章标签：全栈 Electron 前端

本文链接：https://blog.csdn.net/nokiaguy/article/details/108729642

版权

Electron 开发入门专栏收录该内容

30 篇文章 14 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本教程介绍如何利用webkitGetUserMedia方法在Webkit内核浏览器中调用摄像头，展示了一个通过canvas标签捕获并保存摄像头图像的示例。用户点击按钮，图像将被保存为png格式。此外，文章提及了配套的答疑与交流服务，帮助读者更好地学习相关知识。

摘要由CSDN通过智能技术生成

本例利用 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"><

了解本专栏