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
var stop = function() {
  var stream = video.srcObject;
  var tracks = stream.getTracks();
 
  for (var i = 0; i < tracks.length; i++) {
    var track = tracks[i];
    track.stop();
  }
 
  video.srcObject = null;
}
 
var start = function(){
    var video = document.getElementById('video'),
     vendorUrl = window.URL || window.webkitURL;
 
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        }).catch(function (error) {
          console.log("Something went wrong!");
        });
    }
}
$(function() {
    start();
});

　　

?
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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>html5-js-live-cam</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
              <h5 class="card-header h5 text-center">HTML 5 & JS live Cam</h5>
              <div class="card-body">
                <div class="booth">
                    <video id="video" width="100%" height="100%" autoplay></video>
                </div>
                <div class="text-right">
                    <a href="#!" class="btn btn-danger" onClick="stop()">Stop Cam</a>
                    <a href="#!" class="btn btn-success" onClick="start()">Start Cam</a>
                </div>
              </div>
            </div>
             
        </div>
    </iv>
</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" ></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

　　

posted @   ®Geovin Du Dream Park™  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
·  javascript: webcam
·  javascript: P5.js 画图形 处理图片 视频等
·  js 视频录制
·  js实现浏览器录屏
·  js-audio-recorder 插件实现web端录音
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
< 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
点击右上角即可分享
微信分享提示