H5的video标签操作摄像头


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来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>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

阅读剩余部分

相关阅读 >>

h5移动端页面点击input重复弹出键盘的实现方法

几种关于html 5 的动态效果制作方法

iis的mime未注册mp4类型,导致无法识别vidoe标签的解决办法

html5的集合

html5剪切板功能的实现

h5如何做出碎片式的图片切换

html5 canvas画布的宽高为什么写在<canvas>标签里的详细介绍

html5初窥之简介

html5中垂直上下居中的解决方案

h5完成多图片上传的实例详解

更多相关阅读请进入《video》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...