本地摄像头

最新推荐文章于 2024-07-07 12:50:44 发布
弹琴弹琴
最新推荐文章于 2024-07-07 12:50:44 发布
阅读量624
点赞数 1
分类专栏： JavaScript点滴知识
JavaScript点滴知识专栏收录该内容
126 篇文章
订阅专栏
<html>
<head>
    <title>PC本地摄像头</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript">

        var audioSelect = null;
        var videoSelect = null;


        function gotSources(sourceInfos) {
            alert("Update Select list  and SourceInfos length:" + sourceInfos.length);

            // var audioSelect = document.querySelector('select#audioSource');
            //var videoSelect = document.querySelector('select#videoSource');

            audioSelect = document.getElementById('audioSource');
            videoSelect = document.getElementById('videoSource');

            for (var i = 0; i < sourceInfos.length; i++) {

                var sourceInfo = sourceInfos[i];
                var option = document.createElement('option');
                option.value = sourceInfo.id;
                // alert("sourceInfo:" + sourceInfo.id + "*" + sourceInfo.label + "*" + sourceInfo.kind + "*" + sourceInfo.toString());
                if (sourceInfo.kind == 'audio') {
                    //alert(">>:" + i + ">" + sourceInfo.label + "is a audio");
                    option.text = sourceInfo.label || 'microphone ' +
                            (audioSelect.length + 1);
                    audioSelect.appendChild(option);
                } else if (sourceInfo.kind == 'video') {
                    //alert(">>:" + i + ">" + sourceInfo.label + "is a video");
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                    videoSelect.appendChild(option);
                } else {
                    console.log('Some other kind of source: ', sourceInfo);
                }
            }
        }

        function showMediaStreamInVideoElement() {
            alert("Select changed ... showMediaStreamInVideoElement!");

            if (window.stream) {
                //videoElement.src = null;
                window.stream.stop();
            }

            audioSelect = document.getElementById('audioSource');
            videoSelect = document.getElementById('videoSource');

            var audioSource = audioSelect.value;
            var videoSource = videoSelect.value;

            var constraints = {
                audio: {
                    optional: [{
                        sourceId: audioSource
                    }]
                },
                video: {
                    optional: [{
                        sourceId: videoSource
                    }]
                }
            };
            alert("audioSource ='" + audioSource + "'");
            alert("videoSource ='" + videoSource + "'");
            alert("constraints='" + constraints.toString() + "'");

            //显示摄像头视频流
            // navigator.getUserMedia(constraints, successCallback, errorCallback);
            var canvas = document.getElementById("canvas"),
                    context = canvas.getContext("2d"),
                    video = document.getElementById("video"),
            //videoObj = {video: true,audio: true},
                    videoObj = constraints,
            errBack = function (error) {
                console.log("Video capture error:", error.code);
            };

            // Put video listeners into place
            if (navigator.getUserMedia) {
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = stream;
                    //audio.src = stream;
                }, errBack);
            } else if (navigator.webkitGetUserMedia) {//chrome
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream) || stream;
                    //audio.src = window.URL.createObjectURL(stream) || stream;
                }, errBack)
            }
            else if (navigator.mozGetUserMedia) {//firefox
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream) || stream;
                    //audio.src = window.URL.createObjectURL(stream) || stream;
                }, errBack)
            }
            else if (navigator.msGetUserMedia) {//IE
                navigator.msGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream) || stream;
                    //audio.src = window.URL.createObjectURL(stream) || stream;
                }, errBack)
            }

            video.play();

            // 触发拍照动作
            document.getElementById("snap").addEventListener("click", function () {
                context.drawImage(video, 0, 0, 640, 480);
            });
        }


        function loadLocalMediaAndUpdateSelectList() {
            alert("DOMContentLoaded....");

            //window.status = "Page is loaded"
            //加载设备的音频和视频数据
            if (typeof MediaStreamTrack === 'undefined' ||
                    typeof MediaStreamTrack.getSources === 'undefined') {
                alert('This browser does not support MediaStreamTrack.\n\nTry Chrome.');
            } else {
                alert('This browser support MediaStreamTrack good.\n\n');
                MediaStreamTrack.getSources(gotSources);
            }
        }

        //start here
        window.addEventListener("DOMContentLoaded", loadLocalMediaAndUpdateSelectList(), false);
    </script>

</head>
<body>

<div id="container">

    <div class="select">
        <label for="audioSource">Audio source: </label><select id="audioSource"></select>
    </div>

    <div class="select">
        <label for="videoSource">Video source: </label><select id="videoSource"
                                                               onchange="showMediaStreamInVideoElement()"></select>
    </div>

    <div>
        <label>视频</label>
        <video id="video" width="640" height="480" autoplay></video>
        <br>
        <label>音频</label>
        <audio id="audio" width="320" height="240" controls="controls" autoplay></audio>
        <br>
        <button id="snap">点击拍照</button>
        <br>
        <canvas id="canvas" width="640" height="480"></canvas>
    </div>

</div>
</body>
</html>