使用WebRTC捕获用户的图像

时间:2015-11-04 21:03:49

标签: image webrtc capture

我正在构建一个需要通过浏览器访问用户视频的软件,我正在使用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/时,该页面似乎不会要求麦克风或视频访问,因此我无法捕获用户的媒体。我使用谷歌浏览器。你能帮助我并告诉我问题出在哪里并且可以解决吗?

提前致谢。

1 个答案:

答案 0 :(得分:0)

您在JS代码的一行中使用了错误的括号,您需要替换以下行:

var videoArea = document.querySelector("video");

由:

$(".ibox-tools").append('<input type="button" value="new button"/>');