打开客户端本地应用,获取摄像头(可切换)

HTML

<div id="bo">
    <div align="center" >
        <input type="hidden" name="imgValue" id="imgValue" />
        <button id="btnOpen1" class="btn btn-default" type="button" >
        <!-- href为注册表的值 -->
            <a href="aClient://" onclick="return luzhi()">录制视频</a></button>
        <span>选择摄像头:<select id="videoSource"></select></span>
    </div>

    <div id="vdoOne" align="center" style="width: 1300px;height: 750px;margin: 10px 17%">
        <video id="video" controls autoplay style="width: 100%; height:100%; object-fit: fill"></video>
    </div>
    <canvas id="canvasPreview" style="margin-top:15px;" width="1" height="1"></canvas>
    <canvas id="canvasUpload" style="display:none;" width='1' height='1'></canvas>
</div>

JS

 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');
    var funId=$("#funId").val();
    $("#afunId").val(funId);
    //#################### 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);
    }

结束

以上为获取摄像头,如果摄像头自带话筒,话筒跟随摄像头走

以下为html根据注册表打开本地文件

…

• 待补充