当前位置:首页 / 网页制作 / HTML/Xhtml教程 / H5的video标签操作摄像头
H5的video标签操作摄像头
芯晴素材特效 分类:HTML/Xhtml教程 发布日期:2018-05-09

这次给大家带来H5的video标签操作摄像头,H5的video标签操作摄像头注意事项有哪些,下面就是实战案例,一起来看一下。

详解HTML5 使用video标签实现选择摄像头功能

1. html

1
2
3
4
5
6
7
8
9
10
11
12
// jquery reference 
// <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
//
  <input type="hidden" name="imgValue" id="imgValue" />
  <button id="btnOpen1" class="btn btn-default" type="button" >Open WebCam</button>
  <select id="videoSource" ></select>
  <p id="vdoOne" style="display:none">
    <video id="video" style="margin-top:15px;margin-bottom:15px;" width="300" autoplay></video>
    <canvas id="canvasPreview" style="margin-top:15px;" width="300" height="224"></canvas>
    <canvas id="canvasUpload" style="display:none;" width='300' height='224'></canvas>
    <button id="snap" class="btn btn-default" type="button">Snap Photo</button>
  </p>

2. javascript

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script> 
//// Elements for taking the snapshot
    var canvasPreview = document.getElementById('canvasPreview');
    var canvasUpload = document.getElementById('canvasUpload');
    var contextPreview = canvasPreview.getContext('2d');
    var contextUpload = canvasUpload.getContext('2d');
    //#################### Video Source #######################3
    var videoElement = document.querySelector('video');
    var videoSelect = document.querySelector('select#videoSource');
    navigator.mediaDevices.enumerateDevices()
      .then(gotDevices).then(getStream).catch(handleError);
    videoSelect.onchange = getStream; 
    function gotDevices(deviceInfos) {
      for (var i = 0; i < deviceInfos.length; ++i) {
        var deviceInfo = deviceInfos[i];
        var option = document.createElement('option');
        option.value = deviceInfo.deviceId;
        if (deviceInfo.kind === 'videoinput') {
          option.text = deviceInfo.label ||
            'camera ' +
            (videoSelect.length + 1);
          videoSelect.appendChild(option);
        else {
          console.log('Found ome other kind of source/device: ', deviceInfo);
        }
      }
    }
    var _streamCopy = null;
    function getStream() {
      if (_streamCopy != null) {
        try {
          _streamCopy.stop(); // if this method doesn't exist, the catch will be executed.
        catch (e) {
          _streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream
        }
      }      
      var constraints = {
        audio:false,
        video: {
          optional: [
            {
              sourceId: videoSelect.value
            }
          ]
        }
      };      
      navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
    }
    function gotStream(stream) {
      _streamCopy = stream; // make stream available to console
      videoElement.srcObject = stream;
    }
    function handleError(error) {
      alert(error.name + ": " + error.message);
    }
    //######################## End Video Source ################# 
    // Get access to the camera!
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        videoElement.src = window.URL.createObjectURL(stream);
        videoElement.play();
      });
    else {
      document.getElementById("pnlVideo1").style.display = "none";
    }
    //// Trigger photo take
    document.getElementById("snap").addEventListener("click",
      function() {
        contextPreview.drawImage(videoElement, 0, 0, 300, 224);
        contextUpload.drawImage(videoElement, 0, 0, 300, 224);
        document.getElementById("video").style.display = "none";
        document.getElementById("snap").style.display = "none";
        document.getElementById("canvasPreview").style.display = "block";
        var image = document.getElementById("canvasUpload").toDataURL("image/jpeg");
        image = image.replace('data:image/jpeg;base64,''');
        $("#imgValue").val(image);   
        alert("image value :" + image);
      }); 
    //// Trigger photo take
    document.getElementById("btnOpen1").addEventListener("click",
      function() {
        document.getElementById("vdoOne").style.display = "block";
        document.getElementById("video").style.display = "block";
        document.getElementById("snap").style.display = "block";
        document.getElementById("canvasPreview").style.display = "none";
      });
        
</script>

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

跟随鼠标的JS时钟

2012-12-31   浏览:8182

jQuery图片新闻组图幻灯切换网页下载

2017-03-13   浏览:368

CSS3鼠标滑过渐变颜色旋转图标特效

2017-03-09   浏览:309

jq hover鼠标滑过动画导航条

2017-03-17   浏览:479

jQ带日期区间日期选择插件

2017-03-14   浏览:392

跟随鼠标的幻影文字效果

2013-01-08   浏览:9057

强制打开QQ聊天窗口的代码

2013-01-03   浏览:8432

内容倾斜幻灯片Tilted Items

2017-02-27   浏览:460

回到顶端插件ScrollUp

2017-03-18   浏览:374

html5仿手机QQ拆红包游戏网页下载

2017-03-13   浏览:491

网易时尚图片循环特效

2017-03-09   浏览:193

css3高版本浏览器下垂直文字放大镜效

2017-03-09   浏览:165