在 webrtc 中使用 MediaDevices.getUserMedia() 切换相机

Posted 2023-04-17

【中文标题】在 webrtc 中使用 MediaDevices.getUserMedia() 切换相机

【英文标题】：switch camera using MediaDevices.getUserMedia() in webrtc

【发布时间】：2017-04-14 22:22:34

【问题描述】：

我正在尝试使用 navigator.MediaDevices.getUserMedia() webrtc 在通话期间切换设备摄像头。此功能在桌面浏览器上运行良好，但在 mozilla android 上无法运行。 这是我正在使用的代码。

var front=false;

var myConstraints =   video:  facingMode: (front? "user" : "environment") ; 
navigator.mediaDevices.getUserMedia(myConstraints).then(function(stream) 

对此有什么想法吗？？

【问题讨论】：

更详细的问题可能会有所帮助 - 你能提供更多信息吗？

我已经建立了一个呼叫系统，它工作正常。现在我想包含一个切换相机的功能。切换在桌面火狐浏览器上工作正常，但在安卓火狐浏览器中不工作。它给出错误“内部错误启动视频失败”。这是代码 document.getElementById('flip-button').onclick = function() var myConstraints = video: facesMode: (front?"user" : "environment") ; navigator.mediaDevices.getUserMedia(myConstraints).then(func‌​ tion(stream)

你好@john 你能解决你的问题吗？

【参考方案1】：

手机硬件通常不允许同时打开前置和后置摄像头。在获取另一个摄像头之前，将您的代码更改为 stop() 现有流。

有关工作示例，请参阅 my answer to a similar question。

【讨论】：

非常感谢您的帮助。我正在使用停止（）；我正在使用 simplepeer.js 库和 pusher.js 作为对等连接通道。我的相机现在可以在移动设备和台式机上切换，但仍然存在一些问题。当我在发送端切换相机时，接收端相机挂起。我应该重新协商通话吗？另外请定义stream和window.stream之间的区别。这是我在 pastebin 上的代码 请查看代码。 pastebin.com/bW0wa9F7

这是一个不同的问题。见***.com/a/35515536/918910

谢谢，我正在处理你给我的链接。现在我遇到了接收端没有接收到流的问题。我正在从发送者到接收者的信号中发送 user_id,user_name,stream 以便接收者可以用新发送的流替换他当前的流，user_id 和 user_name 正在接收但流对象是空的。这就是我正在做的jsfiddle.net/1so8n164

stop() 在MediaStream 上已弃用，现在在MediaStreamTrack 上。但是，我尝试过stream.getTracks().forEach(track => track.stop()); 无济于事。我无法切换。我可以从新页面中选择一个，但不能getUserMedia 更改为另一个本地流。

我已经尝试了jsfiddle 中提供的代码。我必须删除exact 并直接设置face。但是，您得到的只是前后摄像头的黑色矩形。我正在使用带有 Android 6.0.1 + 最新 Chrome v55.0.2883.91 的三星 Galaxy S2。尽管大多数线程都提到在开始另一个流之前停止上一个流，但这看起来并不是真正的问题。

【参考方案2】：

使用最新版本的adapter.js，看看是否发生NotReadableerror，似乎Android版Chrome无法通过使用stream.getVideoTracks()[0].stop()释放前置摄像头硬件切换到后置；我认为这可能是一个错误

【参考方案3】：

Webcam.set(
        width: 490,
        height: 450,
        image_format: 'jpeg',
        jpeg_quality: 90,
        constraints: 
                    facingMode: 
                                  exact: 'environment'
                                  

                   
    );

此代码适用于所有浏览器。

constraints: facingMode:  exact: 'environment'  

上面一行负责打开后置摄像头，设置约束：null 打开前置摄像头。您还可以通过实现“切换相机”按钮方法来调整此代码

【讨论】：

不知道这个修复对我有什么作用！网络摄像头未在 UC 浏览器中打开。而这个为我打开了前置摄像头（仅限 UC）！