WebRTC 视频看不到答案

【问题标题】：WebRTC video not being able to seeWebRTC 视频看不到
【发布时间】：2014-04-16 05:24:46
【问题描述】：

如何在 Chrome 和 Mozilla 等浏览器中启用 WebRTC 视频（以及音频）查看。

我使用的代码是这样的

HTML：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title> WebRTC</title>

        </head>
        <body>
        <video id="peer2-to-peer1" autoplay controls style="width:40%;"></video>

            <script src="script.js"></script>
        </body>
    </html>

javascript 文件：

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

    if (navigator.getUserMedia) {

        navigator.getUserMedia({

          audio: true
        }, function(localMediaStream) {alert('in');
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Do something with the video here.
      };
   }, onError);
    } else {
        alert('getUserMedia is not supported in this browser.');
    }

    function onSuccess() {
        alert('Successful!');
    }

    function onError() {
        alert('There has been a problem retrieving the streams - did you allow access?');
    }

但是，

我收到一个错误，因为没有调用 onSuccess 函数。

链接：

http://www.creativebloq.com/javascript/get-started-webrtc-1132857

【问题讨论】：

标签： webrtc

【解决方案1】：

第一个问题是您的getUserMedia 上不需要视频。您的参数建议您的通话中只需要音频而不需要 video: true 参数。是的，onSuccess 永远不会被调用，但这并不重要，因为您在函数调用本身内部有回调。要调用onSucess，您的语法类似于：

getUserMedia({"audio": true, "video": true}, onSuccess, onFailure);

其次，让onSuccess 带一个参数，这将是媒体流。如果您希望它对媒体流执行任何操作，则需要将流 src 附加到 onSuccess 函数中的视频 src 对象。

【讨论】：

【解决方案2】：

你叫这个而不是onSuccess()：

function(localMediaStream) {alert('in');
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(localMediaStream);
  video.onloadedmetadata = function(e) {
     // Do something with the video here.
  };

}

onSuccess() 根本就没有被调用过。

此外，还需要从 Web 服务器加载文件（例如，在 localhost 上运行服务器）。正如教程所述，无法访问本地硬盘上的 html 文件。

【讨论】：

我在 chrome(36 版) 中仍然一无所获，在 chrome(34) 中调用了错误函数。
你能发布你得到的错误吗（如果你的浏览器控制台中有）？您是否从服务器获取文件？只用浏览器打开文件是行不通的。
我们正在将文件存储在本地机器中......我正在关注链接：creativebloq.com/javascript/get-started-webrtc-1132857
有必要从服务器获取文件，所以让服务器在本地主机上运行并让文件可以在那里访问。当您将文件仅放在硬盘上时（例如 file:///C:/...），它将无法正常工作。

【解决方案3】：

DEMO

HTML：

<html>
<head>
    <title>Record and Play Simple Messages</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <p>Demo for GetUserMedia()</p>
    <video id="localStream"></video>
    <script type="text/javascript" type="javascript" src="./js/script.js" ></script>
</body>
</html>

JS：

var video = document.querySelector('video');

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

window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

function errorCallback(error) {
    console.log('An error occurred: ' + error.code);
}

if (navigator.getUserMedia) {
    navigator.getUserMedia({video: true, audio: true}, function(stream){
        if (video.mozSrcObject !== undefined) {
            video.mozSrcObject = stream;
        } else {
            video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
        }
        video.play();
    }, errorCallback);
} else {
    console.log('getUserMedia() not supported in this browser.');
}

【讨论】：