Question

我正在使用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;
        });



 }

由于这些视频元素是动态创建的，因此我必须使它与流或blob url一起使用，因为服务器可以处理所有内容。（炽烈的方式）

网络摄像头到BlobURL进行视频播放

0 个答案: