在 HTML webapp 中显示实时网络摄像头数据答案

【问题标题】：displaying live webcam data in a HTML webapp在 HTML webapp 中显示实时网络摄像头数据
【发布时间】：2014-04-29 05:12:40
【问题描述】：

我想在我的网络应用程序中实时显示来自我的网络摄像头的数据。这是我的代码。使用此代码，我可以看到来自网络摄像头的实时数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>

<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}
</style>
</head>

<body>
<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script>
        var video = document.querySelector("#videoElement");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    alert("error");
}
</script>
</body>
</html>

假设我有一个有 4 个页面的 web 应用程序。我想在我的第三页的一个 div 中显示此网络摄像头数据。我该怎么做。我需要更改其中的任何内容吗？
video.src = window.URL.createObjectURL(stream);

【问题讨论】：

您的意思是，在一个独特的页面上，您只想做同样的事情？将您的 JS 移动到该页面并确保它抓取正确的 html 元素。
我只在同一个页面写js。

标签： javascript html webcam webrtc getusermedia

【解决方案1】：

您所要做的就是确保您的视频源 HTML 元素位于您希望显示视频的 div 中。

此外，Javascript 访问元素应该在该页面内执行（您似乎已经在这样做了），但除此之外，只需为该文档元素设置 video src 即可在该元素内播放该媒体流，该元素可以是该页面内的任何位置。

编辑：

由于您希望其他计算机获取另一台计算机的流，因此您必须让信号服务器在它们之间建立对等连接。如果它们都在同一个网络上，那应该是相当简单的（不需要 STUN 或 TURN ICE 服务器来进行 NAT 穿越）。

如果它们不在同一个网络上，您至少需要使用 STUN 服务器进行连接。

这里有一个 couple tutorials 可以帮助您入门。

【讨论】：

我想从同一网络下的其他计算机访问它。
啊，那么您将不得不进行对等连接。我会修改我的答案

【解决方案2】：

你可以使用这个库http://cbrandolino.github.io/camvas/

它是将网络摄像头内容流式传输到画布元素的开源库。在其网站上有一个演示。

【讨论】：