javascript: webcam

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="geovindu,Geovin Du,涂聚文">
    <meta name="author" content="geovindu,Geovin Du,涂聚文">
<title>webcam</title>
  <script src="js/modernizr.custom.82437.js"></script>
 
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5-els.js"></script>
  <![endif]-->       
     
</head>
 
<body>
    <div id="screenshot" style="text-align:center;">
 
  <video class="videostream" autoplay></video>
  <img id="screenshot-img">
  <p><button class="capture-button">Capture video</button>
  <p><button id="screenshot-button" disabled>Take screenshot</button></p>
 
<canvas style="display:none;"></canvas>
    </div>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="bootstrap/4.4.1/js/bootstrap.bundle.min.js" ></script>
 
<script type="text/javascript">
     
function handleError(error) {
  console.error('navigator.getUserMedia error: ', error);
}
const constraints = {video: true}; 
     
const captureVideoButton = document.querySelector(
  "#screenshot .capture-button"
);
const screenshotButton = document.querySelector("#screenshot-button");
const img = document.querySelector("#screenshot img");
const video = document.querySelector("#screenshot video");
 
const canvas = document.createElement("canvas");
 
captureVideoButton.onclick = function () {
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(handleSuccess)
    .catch(handleError);
};
 
screenshotButton.onclick = video.onclick = function () {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext("2d").drawImage(video, 0, 0);
  // Other browsers will fall back to image/png
  img.src = canvas.toDataURL("image/webp");
};
 
function handleSuccess(stream) {
  screenshotButton.disabled = false;
  video.srcObject = stream;
}
</script>
</body>
</html>

 

from: https://www.html5rocks.com/en/tutorials/getusermedia/intro/　　

posted @   ®Geovin Du Dream Park™  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
·  javascript: Webcam
·  javascript: P5.js 画图形 处理图片 视频等
·  js调用摄像头进行录制、截取图片并保存至本地
·  js 如何调用浏览器摄像头api，MediaDevices.getUserMedia
·  H5播放的video视频，如何实现对视频截图？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2016-01-12 javascript: Jquery each loop with json array or object
2012-01-12 Javascript 地图经度纬度之间的距离的算法(轉)
2012-01-12 asp vbscript 检测客户端浏览器和操作系统(也可以易于升级到ASP.NET)
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示