使用WebRTC抓取用户图像
Use WebRTC to capture user's image
我正在构建一个需要通过我使用 WebRTC 的浏览器访问用户视频的软件。
在我的工作目录中存在:
package.json
{
"name": "intro-webrtc",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "4.x",
"ejs": "2.x"
}
}
server.js
var express = require('express');
var app = express() ;
console.log('server started');
app.get('/',function(req,res){
res.render('index.ejs') ;
})
app.listen(3000)
查看/index.ejs
<!doctype html>
<html lang="en">
<head>
<title> Introduction to WebRTC </title>
</head>
<body>
<video autoplay></video>
<script>
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = {audio: true, video: true}
var videoArea = document.querySelector{"video"};
navigator.getUserMedia(constraints, onSuccess, onError);
function onSuccess(stream) {
console.log("Sucess! We have a stream!");
videoArea.src = window.URL.createObjectURL(stream);
videoArea.play() ;
}
function onError(error) {
console.log("Error with getUserMedia: ", error);
}
</script>
</body>
</html>
尝试访问 http://localhost:3000/ 时,该页面似乎没有要求访问麦克风或视频,因此我没有捕获用户的媒体。我使用 Google Chrome。你能帮我告诉我问题出在哪里吗?可以解决吗?
提前致谢。
你在你的JS代码中使用了错误的括号,你需要替换下面一行:
var videoArea = document.querySelector{"video"};
作者:
var videoArea = document.querySelector("video");
我正在构建一个需要通过我使用 WebRTC 的浏览器访问用户视频的软件。
在我的工作目录中存在: package.json
{
"name": "intro-webrtc",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "4.x",
"ejs": "2.x"
}
}
server.js
var express = require('express');
var app = express() ;
console.log('server started');
app.get('/',function(req,res){
res.render('index.ejs') ;
})
app.listen(3000)
查看/index.ejs
<!doctype html>
<html lang="en">
<head>
<title> Introduction to WebRTC </title>
</head>
<body>
<video autoplay></video>
<script>
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = {audio: true, video: true}
var videoArea = document.querySelector{"video"};
navigator.getUserMedia(constraints, onSuccess, onError);
function onSuccess(stream) {
console.log("Sucess! We have a stream!");
videoArea.src = window.URL.createObjectURL(stream);
videoArea.play() ;
}
function onError(error) {
console.log("Error with getUserMedia: ", error);
}
</script>
</body>
</html>
尝试访问 http://localhost:3000/ 时,该页面似乎没有要求访问麦克风或视频,因此我没有捕获用户的媒体。我使用 Google Chrome。你能帮我告诉我问题出在哪里吗?可以解决吗?
提前致谢。
你在你的JS代码中使用了错误的括号,你需要替换下面一行:
var videoArea = document.querySelector{"video"};
作者:
var videoArea = document.querySelector("video");