Веб-камера перестала рендерить видео на холст JavaScript

Question

У меня было приложение веб-камеры, которое делало снимки, и затем я переносил изображение из базы данных изображений 64 в базу данных, но вдруг оно перестало работать, я последовал примеру онлайн здесь

Я пытался использовать другие методы для получения пользовательских носителей, но по какой-то причине он не совместим с последующим захватом изображений. Я вижу, что он открыл мою камеру, потому что я вижу свет веб-камеры, но нет видео.

Когда я смотрю на консоль, я вижу следующее (см. Добавленные изображения) ---

<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>

Что я здесь не так делаю, это работало до того, как что-то изменилось в браузерах? Я использую хром