Question

我正在使用webrtc开发一个Web应用程序，作为第一个教程，我只是想通过getUserMedia访问我的相机和麦克风。

这是我的代码：

index.html：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
        <a href="#" class="navbar-brand">Demo WebRTC</a>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h2>Réccéption</h2>
                <video id="receiver-video" width="100%" height="400px" src=""></video>
            </div>

            <div class="col-sm-6">
                <h2>Envoi</h2>
                <video id="emitter-video" width="100%" height="400px" src=""></video>
                <p><button id="start">Démarrer la conversation</button></p>
            </div>
        </div>

    </div>


    <script src="app.js" charset="utf-8"></script>


    </body>


</html>

app.js

document.querySelector('#start').addEventListener('click', function function_name(e) {

    navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

    navigator.getUserMedia({
        video: true,
        audio: true
    }, function(stream){

        let emitterVideo = document.querySelector('#emitter-video')
        emitterVideo.src = window.URL.createObjectURL(stream)
        emitterVideo.play()
    }, function() {})
})

使用此代码，我可以访问相机和麦克风，并在FireFox中播放视频，但是当我在Chrome中打开它时，我无法播放视频，并且会出现以下错误控制台：

Uncaught (in promise) DOMException: Failed to load because no supported source was found.
Promise (async)
(anonymous) @ app.js:15

我使用的是Chrome版本60.0.3112.90。

Answer 1

我猜你正在使用的教程并不是最新的。不建议使用window.URL.createObjectURL。

代替

的意思

emitterVideo.src = window.URL.createObjectURL(stream)

你应该使用srcObject赋值

emitterVideo.srcObject = stream

如果您想坚持使用该教程，还有另一种选择。我假设您只是在浏览器中打开index.html。例如，如果您通过python -m SimpleHTTPServer 8000提供服务，它也会有效。

修改：createObjectURL

上的一些more information

URL.createObjectURL（stream）是一个黑客。停止使用它。正在努力将其删除。

直接使用video.srcObject = stream。它是标准的，并且实施得很好。

本地资源的分配首先应该不是URL，而是了解WebRTC如何工作的红色鲱鱼。

如何在Chrome中使用getUserMedia对象播放视频

1 个答案: