如何使用ReactJ将摄像头流到移动浏览器中？
如何使用ReactJ将摄像头流到移动浏览器中？
提问于 2020-01-03 13:13:00
我已经创建了一个简单的反应应用程序，在浏览器上流网络摄像头视频流。下面是指向github项目的链接：基本WebCam流线器
代码非常简单明了：
class AppStreamCam extends React.Component {
constructor(props) {
super(props);
this.streamCamVideo= this.streamCamVideo.bind(this)
}
streamCamVideo() {
var constraints = { audio: true, video: { width: 1280, height: 720 } };
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector("video");
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
}); // always check for errors at the end.
}
render() {
return (
<div>
<div id="container">
<video autoPlay={true} id="videoElement" controls></video>
</div>
<br/>
<button onClick={this.streamCamVideo}>Start streaming</button>
</div>
);
}
}这就是结果：
一旦，我点击按钮，摄像头打开并开始流到浏览器。
这是我的问题
当我打开手机上的铬，输入localServer地址，点击按钮，应用程序就会崩溃，因为显然是从pc浏览器运行应用程序代码的，这样它就可以打开pc摄像头了。
所以当我点击手机上的按钮时，我understandably得到了这个错误：
TypeError:无法读取未定义的属性“getUserMedia”
我的目标是点击我的移动浏览器的按钮，并开始在我的移动浏览器上播放pc摄像头，就像在pc上一样。
但是，我不知道从哪里开始。有什么帮助吗？
回答 1
Stack Overflow用户
发布于 2020-01-04 07:03:47
我已经解决了这个问题。
- 打开package.json并粘贴到脚本中
“开始”：“设置HTTPS=true&&react脚本启动”
这应该可以通过https提供应用程序。
- 如果这给出了这个错误：
响应应用程序错误:未能构造' WebSocket '：不安全的WebSocket连接可能不会从通过HTTPS加载的页面启动
打开
node_modules/react-dev-utils/webpackHotDevClient.js
并将此代码粘贴到连接的定义中：
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',这显然是一个尚未解决的反应错误。如果使用https协议，我们应该使用WebSockets over SSL/TLS (WSS)协议，而不是使用WebSockets (WS)。您可以了解更多关于它的信息，这里：
注意：这将不会流到你的个人电脑摄像头到你的手机，而是手机的相机。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59579227
复制相关文章
相似问题
腾讯云开发者
