使用新约束调用 getUserMedia 会导致黑屏 (MediaStream.ended=true)

Tim*_*imo 5 javascript video android webrtc getusermedia

在我的 nexus4 (Android 4.4.4) 上,我试图在“面向用户”的摄像头和面向“环境”的摄像头之间切换

直接访问任何一个都有效。在它们之间切换 bij 再次调用navigator.getUserMedia()设置新约束失败。失败导致黑屏视频 & MediaStream.ended=true

为什么在我第二次调用 getUserMedia 时 MediaStream.ended=true?

在我看来,我为视频源的数量动态创建按钮。在这种情况下有两个。单击按钮将调用camera.getUserMedia()并传入媒体源:

    camera.getUserMedia = function(source){
        var constraints = {
            video: true,
            audio: false
        };
        if(source){
            constraints.video = {optional: [{
                sourceId: source.id
            }]};
        }
        navigator.getMedia(
            constraints,
            function(stream) {
                var vendorURL = window.URL || window.webkitURL;
                video.src = vendorURL.createObjectURL(stream);
                video.play();
                streaming = true;
            },
            function(err) {
                ...
            }
        );
    };
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

Tim*_*imo 0

我通过将流存储在相机对象上解决了这个问题,然后在将流绑定到视频元素之前我将对其调用 stop。但不太确定到底发生了什么(也许有人可以在评论中添加解释)。

    camera.getUserMedia = function(source){
        if(camera.stream){
            camera.stream.stop();
        }
        ...
        navigator.getMedia(
            constraints,
            function(stream) {
                camera.stream = stream;
                ...
            },
            function(err) {
                ...
            }
        );
    };
Run Code Online (Sandbox Code Playgroud)