displaying live webcam data in a HTML webapp

StackOverflow https://stackoverflow.com/questions/23355989

Question

I want to display data from my webcam live in my web app. Here is my code.Using this code I am able to see my live data that is coming from my web cam. 

<!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>

Suppose I have a webapp with 4 pages.I want to display this webcam data in one of the div in my third page.How can I do that.Do I need to change anything in this?
video.src = window.URL.createObjectURL(stream);

Was it helpful?

Solution

All you have to do is make sure your video source HTML element is inside the div in which you want the video to be displayed.

Also, the Javascript accessing element should be executed inside that page(which it seems you are already doing) but other than that, simply setting video src for that document element will play that media stream inside that element and that element can be anywhere inside that page.

EDIT:

Since you want other computers to grab another computer's stream, you will have to have a signalling server do a peer connection between them. If they are all on the same network, it should be rather simple(no need for STUN or TURN ICE servers for NAT traversal).

If they are not on the same network, you will need to at least need to utilize STUN servers for the connection.

Here are a couple tutorials to get you started.

OTHER TIPS

You can use this library http://cbrandolino.github.io/camvas/

It is open source library to stream webcam content to a canvas element. Has a demo on its website.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top