Web Cam停止将视频渲染到画布JavaScript

我有一个网络摄像头应用程序，它可以拍照，然后我会将照片从图像数据base64上传到数据库，但突然它停止了工作，我在线学习了一个例子

我尝试使用其他方法获取用户媒体，但由于某些原因，它与之后拍摄的图片不兼容，我看到它打开了我的相机，因为我看到网络摄像头亮起，但没有视频

当我查看控制台时，我看到以下内容（请参阅添加的图像） ---

（功能（）{
var宽度=500；
变量高度=800；流量
var=false；
var-video=null；
var=null；
var=null；
var startbutton=null；
函数启动（）{
//定义元素
video=document.getElementById（'video-still'）；
canvas=document.getElementById（'canvas'）；
photo=document.getElementById（'photo'）；
上传=document.getElementById（“上传”）；
startbutton=document.getElementById（'startbutton'）；
navigator.getMedia=（navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia）；
//检查getUserMediaF
如果（！navigator.getMedia）{
//没有用户媒体出口
log（“已获取用户媒体”）；
返回；
}
navigator.getMedia({
视频：没错，
音频：错误/
}，getMediaSuccess，getMediaError）；
函数getMediaSuccess（流）{
if（navigator.mozGetUserMedia）{
video.mozSrcObject=流；
}否则{
var vendorURL=window.URL | | window.webkitURL；
video.src=vendorURL.createObjectURL（流）；
//将流分配给#视频静止
}
video.play（）；
}
函数getMediaError（错误）{
log（“发生错误！”+错误）；
}
video.addEventListener（'canplay'，函数（事件）{
如果（！流）{
高度=video.videoHeight/（video.videoWidth/宽度）；
如果（isNaN（高度））{
高度=宽度/（4/3）；
}
//设置#视频静止元素的一些属性
video.setAttribute（'width'，width）；
video.setAttribute（'height'，height）；
canvas.setAttribute（'width'，width）；
canvas.setAttribute（'height'，height）；
//将流媒体设置为true
流=真；
}
}，假）；
//将单击事件添加到#开始按钮
startbutton.addEventListener（'click'，函数（事件）{
event.preventDefault（）；
takepicture（）；//拍照
}，假）；
clearphoto（）；
}
函数clearphoto（）{
//充满灰色
var context=canvas.getContext（'2d'）；
context.fillStyle=“#AAA”；
context.fillRect（0,0，canvas.width，canvas.height）；
//将#photo的数据url设置为画布上的图像
var data=canvas.toDataURL（'image/jpg'）；
photo.setAttribute（'src'，数据）；
//var ImgClear=“”；
document.getElementById（“TextArea1”）.innerText=ImgClear；
}
函数takepicture（）{
var context=canvas.getContext（'2d'）；
//警报（canvas.getContext）；
if（宽度和高度）{
画布宽度=269；
高度=292；
drawImage（视频，0,0269292）；
var data=canvas.toDataURL（'image/jpg'）；
//photo.setAttribute（'src'，数据）；
document.getElementById（“上载”）.setAttribute（'src'，“”）；
var file=document.querySelector（“#”）.files[0]=”；
上传的.setAttribute（'src'，数据）；
var phto=document.getElementById（'Photo'）；
var x=document.getElementById（“上传”）.getAttribute（“src”）；
document.getElementById（“TextArea1”）.innerText=x；
}
否则{
clearphoto（）；
}
}
window.addEventListener（'load'，startup，false）；
})();
HTML代码：
视频流不可用，请使用Chrome等不同浏览器。


拍照

---

我做错了什么，它在浏览器发生任何变化之前就已经工作了？我正在使用chrome

JavaScript控制台中是否有任何消息，比如说需要用户手势或https？控制台中没有类似的消息我只看到了3个错误我将向问题添加详细信息Hi@gman我添加了2个图像，精确显示了我在控制台中看到的错误。createObjectUrl在2013年被弃用并在chrome中删除71-|这里的答案是：成功了！感谢@synthetxa在JavaScript控制台中是否有任何消息，如say需要用户

<script type="text/javascript">
        (function () {


            var width = 500; 
            var height = 800; stream



            var streaming = false;



            var video = null;
            var canvas = null;
            var photo = null;
            var startbutton = null;

            function startup() {
                // Define elements 
                video = document.getElementById('video-still');
                canvas = document.getElementById('canvas');
                photo = document.getElementById('photo');
                uploaded = document.getElementById("uploaded");
                startbutton = document.getElementById('startbutton');
                navigator.getMedia = (navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia);

                // Check for getUserMediaF
                if (!navigator.getMedia) {
                    // No user media exit
                    console.log("Has get user media");
                    return;
                }


                navigator.getMedia({
                    video: true,    
                    audio: false    /
                }, getMediaSuccess, getMediaError); 


                function getMediaSuccess(stream) {

                    if (navigator.mozGetUserMedia) {
                        video.mozSrcObject = stream; 
                    } else {
                        var vendorURL = window.URL || window.webkitURL;
                        video.src = vendorURL.createObjectURL(stream);
                        // Assign the stream to #video-still
                    }
                    video.play(); 
                }


                function getMediaError(error) {
                    console.log("An error occured! " + error);
                }


                video.addEventListener('canplay', function (event) {

                    if (!streaming) {

                        height = video.videoHeight / (video.videoWidth / width);



                        if (isNaN(height)) {
                            height = width / (4 / 3);
                        }

                        // Set some attributes of the #video-still element
                        video.setAttribute('width', width);
                        video.setAttribute('height', height);
                        canvas.setAttribute('width', width);
                        canvas.setAttribute('height', height);
                        // Set streaming to true
                        streaming = true;
                    }
                }, false);

                // Add click event to #startbutton
                startbutton.addEventListener('click', function (event) {
                    event.preventDefault();
                    takepicture(); // Take a picture
                }, false);

                clearphoto();
            }


            function clearphoto() {
                // Fill with a gray
                var context = canvas.getContext('2d');
                context.fillStyle = "#AAA";
                context.fillRect(0, 0, canvas.width, canvas.height);
                // Set the data url of #photo to the image on the canvas
                var data = canvas.toDataURL('image/jpg');
                photo.setAttribute('src', data);
                //  var ImgClear = "";
                document.getElementById("TextArea1").innerText = ImgClear;

            }



            function takepicture() {
                var context = canvas.getContext('2d');
                // alert(canvas.getContext);
                if (width && height) {
                    canvas.width = 269;
                    canvas.height = 292;

                    context.drawImage(video, 0, 0, 269, 292);
                    var data = canvas.toDataURL('image/jpg');
                    //  photo.setAttribute('src', data);
                    document.getElementById("uploaded").setAttribute('src', "");
                    var file = document.querySelector('#<%=UploadPic.ClientID %>').files[0] = "";
                    uploaded.setAttribute('src', data);
                    var phto = document.getElementById('Photo');
                    var x = document.getElementById("uploaded").getAttribute("src");
                    document.getElementById("TextArea1").innerText = x;

                }

                else {
                    clearphoto();
                }
            }

            window.addEventListener('load', startup, false);
        })();
    </script>


HTML CODE: 
<table>
            <tr>
                <td>
                    <canvas style="visibility: hidden; width: 0px; height: 0px" id="canvas"></canvas>
                </td>

            </tr>
        </table>

 <div class="camera" style="text-align: center; margin: auto">

                                    <video style="border-radius: 25px;" id="video-still">
                                        Video stream not available Please use diffrent browser like Chrome.
                                    </video>
                                    <br />

                                </div>
 <asp:Image ID="uploaded" ImageUrl="~/images/logo.jpg" Visible="true" runat="server" Style="border-radius: 25px; height: 376px; width: 430px" /></td>
 <button id="startbutton" runat="server" class="btn" onclick="btnTakePic_Click">Take photo</button>