Блог

Я разрабатываю приложение на Blazor / HTML / JavaScript. Я пытаюсь подключить веб-камеру пользователя к потоку, к которому я могу получить доступ по идентификатору, потому что это серверное приложение, и запрос отправляется, затем, когда пользователь разрешает, выдается обратный вызов. Поэтому я не могу использовать

 .then(function (stream) {
            vid.srcObject = stream;
 })
  

поскольку на данный момент видеоэлемент не существует, и сервер должен его создать, поэтому мне нужно «задержать» этот поток там на несколько мгновений, пока сервер не сможет создать для него видеоэлемент. Я пытался создать BlobURL, но события видеоэлемента никогда не срабатывают, или я получаю ошибки, такие как «Медиа-ресурс, указанный атрибутом src или назначенным объектом поставщика мультимедиа, не подходит».

 navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia;


if (navigator.getUserMedia) {
    var video = document.getElementById("video1");

    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(function (stream) {         
            console.log("got stream ="   stream);
            return stream;
        })
        .then(stream => new Response(stream))
        .then(response => response.blob())
        .then(blob => window.URL.createObjectURL(blob))
        .then(function (url) {              
            console.log("got url ="   url);
            var vid = document.getElementById("video1");
                        
            vid.src = url; // No errors, onloadstart only, no other events
            vid.load();
          
            vid.oncanplay = function (e) {
                console.log("oncanplay");  // Does not fire
            };
            vid.onloadstart = function (e) {
                console.log("onloadstart");   // Fires but thats it
            };
            vid.onloadedmetadata = function (e) {
                console.log("onloadedmetadata");    // Does not fire
            };
            document.getElementById("video1").oncanplaythrough = function (e) {
                console.log("oncanplaythrough");  // Does not fire
            };
            document.getElementById("video1").onloadeddata = function (e) {
                console.log("onloadeddata");   // Does not fire
                // vid.play();
            };  
        })
        .catch(function (err) {
            console.log("got error ="   err);
            return err;
        });



 }
  

Поскольку эти видеоэлементы создаются динамически, я должен заставить его работать с потоком или URL-адресом большого двоичного объекта, потому что сервер обрабатывает все. (Способ Блейзора).