如何在Chrome中使用getUserMedia对象播放视频
我正在使用webrtc作为第一个教程的web应用程序,我只是试图通过getUserMedia访问我的相机和麦克风。如何在Chrome中使用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。
我猜你正在使用的教程不是最新的。不鼓励使用window.URL.createObjectURL
。
含义而非
emitterVideo.src = window.URL.createObjectURL(stream)
你应该使用srcObject分配
emitterVideo.srcObject = stream
如果您想与教程坚持不过,还有另一种选择。我假设你只是在浏览器中打开你的index.html。例如,如果你想通过python -m SimpleHTTPServer 8000
提供服务,那么它也可以工作。
编辑:上createObjectURL
URL.createObjectURL(流)一些more information是一劈。停止使用它。正在努力将其删除。
直接使用video.srcObject = stream代替。这是标准和良好实施。
本地资源的分配不应该是第一个URL,并且是了解WebRTC如何工作的红色鲱鱼。
非常感谢WPP,它运行得非常好。 我想问一些问题,我想开发一个应用程序,使用STUN服务器来连接两个对等端,或者一个HTTPS服务器,我想知道的是,是否有任何可用的教程展示了开发一个点对点从头开始应用? –
嗨,这里有很多教程,但我会推荐这一个:https://deepstreamhub.com/tutorials/protocols/webrtc-intro/ – wpp
非常感谢您的帮助,我使用本教程了解使用webrtc的基础知识,我使用deepstreamhub服务器来完成教程,现在我想要做的是使用STUN服务器连接两台真实计算机,并且我找不到任何实际应用程序的教程,能否请您提供给我用资源来连接两台电脑? –
您使用HTTP还是HTTPS? –