catchCameraControl.github.io/index.html at main · MiniMilkfish/catchCameraControl.github.io · GitHub

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>开启摄像头、位置权限测试</title>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <p id="x"></p>
    <p>
        <button onclick="openMedia()">打开</button>
        <button onclick="closeMedia()">关闭</button>
        <button onclick="drawMedia()">截取</button>
    </p>
    <div style="margin-left: 42%;">
        <video id="video" class="bg" style="width: 300px;border-radius: 300px"></video>
        <canvas id="qr-canvas" style="width: 300px;border-radius: 300px"></canvas>
    </div>
</body>

</html>
<script type="text/javascript">
    var video = document.querySelector('video');
    var text = document.getElementById('text');
    var canvas1 = document.getElementById('qr-canvas');
    var context1 = canvas1.getContext('2d');
    var mediaStreamTrack;
    var x = document.getElementById("x");

    // 一堆兼容代码
    window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }
    if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            return new Promise(function (resolve, reject) {
                getUserMedia.call(navigator, constraints, resolve, reject);
            });
        }
    }

    window.onload = function () {
        openMedia();

        getGeolocation();
    }

    //摄像头调用配置
    var mediaOpts = {
        audio: false,
        video: true,
        video: { facingMode: "environment" },// 或者 "user"
        video: { width: 600, height: 600 }
        // video: { facingMode: { exact: "environment" } }// 或者 "user"
    }

    // 回调
    function successFunc(stream) {
        mediaStreamTrack = stream;
        video = document.querySelector('video');
        if ("srcObject" in video) {
            video.srcObject = stream
        } else {
            video.src = window.URL && window.URL.createObjectURL(stream) || stream
        }
        video.play();
    }
    function errorFunc(err) {
        alert(err.name);
    }

    // 正式启动摄像头
    function openMedia() {
        navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
    }

    //关闭摄像头
    function closeMedia() {
        mediaStreamTrack.getVideoTracks().forEach(function (track) {
            track.stop();
            context1.clearRect(0, 0, context1.width, context1.height);//清除画布
        });
    }

    //截取视频
    function drawMedia() {
        canvas1.setAttribute("width", video.videoWidth);
        canvas1.setAttribute("height", video.videoHeight);
        context1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    }

    function getGeolocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function () {
                $.getScript('http://pv.sohu.com/cityjson?ie=utf-8', function () {
                    x.innerHTML = '城市：' + returnCitySN.cname;
                });
            }, function (error) {
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        x.innerHTML = "用户拒绝对获取地理位置的请求。";
                        break;
                    case error.POSITION_UNAVAILABLE:
                        x.innerHTML = "位置信息是不可用的。";
                        break;
                    case error.TIMEOUT:
                        x.innerHTML = "请求用户地理位置超时。";
                        break;
                    case error.UNKNOWN_ERROR:
                        x.innerHTML = "未知错误。";
                        break;
                }
            });
        } else {
            x.innerHTML = "该浏览器不支持定位功能！";
        }
    }
</script>