如何将网络摄像头捕获的图像传递到HTML文件输入

Question

我有一个网络摄像头捕获代码，捕获将其传递给html图像元素的代码。

我尝试将文件传递给fileinput元素，但出现错误消息：

  

“此输入元素接受文件名，只能以编程方式将其设置为空字符串。”

代码：

<div class="placeholder" onclick="Show()">
    <img id="photo" alt="The screen capture will appear in this box."  class="img-circle" src="/fin/assets/img/placeholder-man.png" style="height: 150px;"> 
    <!-- <div class="image-circle" style="background-image: url(/fin/assets/img/placeholder-man.png); height: 150px;"> -->
    <canvas id="canvas" width="150" height="150" class="hidden"></canvas>
    <!-- </div> -->
</div>

<div class="pull-right" id="pix" style="display: none; ">
    <video id="video" style="height: 150px;" autoplay></video><br>
    <a href="#" id="snap" class="btn btn-sm btn-danger">Snap Photo</a>
</div>


<script>
    passport = document.getElementById('passport');
    photo = document.getElementById('photo');
    function Show(){
        // alert('bmvnvnvb');
        var x = document.getElementById('pix');
        x.style.display='inline-block';
        Snap()
    }
    // Put event listeners into place
    function Snap(){
        // window.addEventListener("DOMContentLoaded", function() {

        // Grab elements, create settings, etc.
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        var mediaConfig =  { video: true };
        var errBack = function(e) {
            console.log('An error has occurred!', e)
        };

        // Put video listeners into place
        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
                //video.src = window.URL.createObjectURL(stream);
                video.srcObject = stream;
                video.play();
            });
        }

        /* Legacy code below! */
        else if(navigator.getUserMedia) { // Standard
            navigator.getUserMedia(mediaConfig, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(mediaConfig, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
            } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
            navigator.mozGetUserMedia(mediaConfig, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        // Trigger photo take
        document.getElementById('snap').addEventListener('click', function() {
            context.drawImage(video, 0, 0, 150, 150);
            var data = canvas.toDataURL('image/png');
            photo.setAttribute('src', data);
            passport.value=data;
            var x = document.getElementById('pix');
            x.style.display='none';
            passport.class='img-circle';
        });
        // }, false);
    }
</script>

我的目的是为用户提供两种通过网络摄像头或上载护照的方法，如果通过网络摄像头获取文件名，则文件名应通过fileinput元素传递；如果通过上传图像将其传递至图片元素。