个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在使用 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。
最佳答案
我猜您使用的教程不是最新的。不鼓励使用 window.URL.createObjectURL。
意思代替
emitterVideo.src = window.URL.createObjectURL(stream)
你应该使用 srcObject 赋值
emitterVideo.srcObject = stream
如果您想坚持使用本教程，还有另一种选择。我假设您只是在浏览器中打开您的index.html。例如，如果您通过 python -m SimpleHTTPServer 8000 提供它，它也可以工作。
编辑:一些more information在 createObjectURL
URL.createObjectURL(stream) is a hack. Stop using it. Efforts are underway to remove it.
Use video.srcObject = stream directly instead. It is standard and well-implemented.
This assignment of a local resource should never have been a URL in the first place and is a red herring to understanding how WebRTC works.
关于javascript - 如何在 Chrome 中使用 getUserMedia 对象获取播放视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45663380/
29
4
0
我们正在尝试制作视频 session 应用程序。在 Windows 上运行该应用程序进行测试时，视频打开得很好，但是当我们在物理设备(Android 手机)上运行它时，出现以下错误并且视频不显示。 E
我知道有几篇关于此的帖子，但我的问题不同。 在 Mozilla developer guide for getUserMedia 之后，我可以看到使用:navigator.getUserMedia()
我正在使用“facingMode”约束来在两个摄像头之间切换，但我不能完全确定用户端是否有一个“环境”摄像头(后置摄像头)。计算 enumerateDevices 函数返回的 promise 的“视频
这是我的问题。 我正在制作一个使用 JS-OCR 拍照并检测单词的小应用程序。它运作良好，但我只能使用前置摄像头。我的想法是只使用后置摄像头，没有必要切换摄像头。 我正在阅读 getUserMedia
我正在为相机和麦克风运行 getUserMedia， navigator.mediaDevices .getUserMedia({audio:true, video: true)
我在使用 getUserMedia 创建的预览视频时遇到问题。视频会连接，但只显示第一帧或第二帧，并在它们之间快速切换。使用 ImageCapture 时，我仍然可以获取相机所面对的画面，但预览窗口停
我有以下限制，这些限制在桌面上的 Chrome 上运行良好(模拟移动分辨率) const constraints = { audio: false, video: {
例如，假设我有 然后我开始流式传输视频: async function startVideo() { const video = document.querySelector("#video
我尝试使用 cordova + crosswalk 显示来 self 的手机摄像头的视频，并且可以从 getUserMedia() 获取视频流，但是当流显示在 html5 视频标签上时，它显示黑屏。
有什么方法可以使用HTML5的getUserMedia()从特定麦克风(而不是默认麦克风)获取音频输入？ 最佳答案 恐怕您将需要使用getSources API，该API到目前为止还没有得到很好的支持
我正在使用getUserMedia api捕获屏幕并记录来自chrome扩展程序的音频(两者一起)。 api捕获屏幕，记录视频，但不捕获音频。 Chrome版本:55 没有捕获音频的任何原因。 API
我使用“前沿”HTML5/WebRTC API 编写了一个 Web 应用程序(请参阅下面的代码)。这适用于 Chrome v20(启用了 MediaStream 标志)和最新的 FF Nightly
我在网上找到了一些代码来访问我的网络摄像头。它访问网络摄像头，但不显示它所看到的内容。我知道这是正常的，因为文档中没有 html，但我想知道如何显示结果。我找到的代码是: var constraint
我正在尝试通过 webRTC 和 GetUserMedia 共享计算机的音频，但我不知道是否可以获取此流。 在 Linux 和 Firefox 上，当我请求具有以下约束的 GetUserMedia 时
我正在使用 getusermedia() 将网络摄像头用于在线应用程序。我使用的是罗技 C615 网络摄像头(即插即用)，效果很好。 getusermedia() 将仅适用于即插即用网络摄像头，还是也
我无法在 Google Chrome (v21) 中显示视频流 代码 window.addEventListener('DOMContentLoaded', function() { n
如何在 javascript 中获取流对象的当前流时间？ navigator.mediaDevices.getUserMedia(约束) .then(函数(流){ console.log("在此处获取
我一直在为我的下一个项目尝试使用 webRTC 创建视频聊天，但测试很困难。我有这个简单的代码来访问相机: navigator.getUserMedia = navigator.get
我正在使用 HTML 媒体捕获和 getUserMedia 方法。它不适用于 Chrome，我收到失败时的警报。 这是我使用的示例代码: if (navigator.getUserMedia) {
我知道 iOS 不支持 getUserMedia()。有没有办法绕过它，在 iOS 和 Android 移动浏览器上流式传输视频或从视频流中捕获图像？ 最佳答案 我建议查看 Video 元素“srcO
我是一名优秀的程序员,十分优秀！