我正在开发一个系统,其中一部分是WebRTC视频(或音频)调用。该解决方案包含基于getUserMedia和RTCPeerConnection API-s支持的相当多的业务逻辑。特别是因为Firefox和Chrome以不同的方式实现了一些API(例如MediaStream#getAudioTracks
总是在Firefox上返回[])。
双方有一个正在运行的音频 - 音频呼叫(双方都被要求并允许音频流(访问麦克风))。一方希望将呼叫升级为视频视频。发生某些UI交互 - 升级启动器的对话框,用于确认他的操作并向接收器升级提供,双方允许摄像机访问。最终应该建立视频 - 视频通话。
如何检查MediaStream实例是否处于这样的状态:如果附加到<video>
元素src
,那么是否会播放正确的信号(视频,音频)?
最基本的测试是检查RTCPeerConnection#onstreamadded
是否被调用。问题在于,有时使用MediaStream
实例调用回调,但在将其附加到<video>
元素时,不会显示任何内容。很可能这是我的错误,这是测试应该告诉我的。
在RTCPeerConnection
或MediaStream
对象上是否有一些好的属性或回调可以告诉我何时正确设置了通信并且数据是通过流来的?
答案 0 :(得分:0)
视频元素是否显示黑色背景并且在src属性中包含blob?
如果是这样,请注意视频元素在FF中也必须区别对待。在Chrome中,自动播放代码(例如<video src="blobIsHere" autoplay></video>
)足以启动视频。在FF中,您需要调用.play() - 元素的方法。此外,必须在FF中以不同方式创建视频元素。看起来应该是这样的:
var el = document.getElementById('my-video');
if(el.mozSrcObject !== undefined) {
el.mozSrcObject = remoteStream;
el.play();
}
如果您想添加Firefox支持,我建议您使用adapter.js。
要检查连接是否已建立,您可以阅读ICE状态,即:
con.onaddstream = function(e){
if(e.srcElement.iceConnectionState === 'connected' &&
e.srcElement.iceGatheringState === 'complete') {
// attach to video-element
}
};
另一个原因可能是只有视频发送过。要找出远程客户端正在流式传输什么类型的媒体,您必须检查远程SDP中的子字符串:'a = recvonly'。如果它存在,则只传输音频。例如:
con.onaddstream = function(e){
if (e.target.remoteDescription.sdp.indexOf('a=recvonly') > -1) {
// video and audio
}
else {
// only audio
}
}
注意:我刚刚发现了这一点,因为我正在尝试做类似的事情。我不确定这是否100%安全,是否适合所有情况(仅限音频和视频/音频/视频),但值得一试。