Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Possible to enable webcam inclusion via iframe source URL? #26

Closed
BrianGilbert opened this issue Mar 5, 2017 · 3 comments
Closed

Possible to enable webcam inclusion via iframe source URL? #26

BrianGilbert opened this issue Mar 5, 2017 · 3 comments

Comments

@BrianGilbert
Copy link

BrianGilbert commented Mar 5, 2017 •
edited

I've had no luck finding webcams that will stream HLS or MPEG-DASH natively, the only options I've found so far are:

http://instant-webcam.com/
https://datarhei.github.io/restreamer/
@chrishamm
Copy link
Collaborator

How does the streaming within the iframe work? I couldn't get any examples from those two links.

@BrianGilbert
Copy link
Author

Instant webcam:

<html><head>
	<meta name="viewport" content="width=320, initial-scale=1, user-scalable=no">
	<title>Instant Webcam</title>
	<link rel="stylesheet" type="text/css" href="screen.css">
	<link rel="Shortcut Icon" href="InstantWebcam.png">
</head>
<body>
	<div id="videoContainer">
		
		<canvas id="videoCanvas" class="full" width="640" height="480">
			<p>
				Please use a browser that supports the Canvas Element, like
				<a href="http://www.google.com/chrome">Chrome</a>,
				<a href="http://www.mozilla.com/firefox/">Firefox</a>,
				<a href="http://www.apple.com/safari/">Safari</a> or Internet Explorer 10
			</p>
		</canvas>
		
		<div id="muted"></div>
		
		<div id="notice" style="display: none;">
			<div class="spinner"><div class="mask"><div class="maskedCircle"></div></div></div>
			<span id="noticeText">Connecting</span>
		</div>
		
		<div id="copy">
			<a href="http://instant-webcam.com/" title="Instant Webcam">
				<img alt="Instant Webcam" src="InstantWebcam.png">
			</a>
		</div>
		
		<div id="recordBox">
			<span id="record" title="Record MPG Video" class="available">
				<span id="recordDot">○</span>
				<span id="recordNotice">Record</span>
			</span>
			<span id="recordDisabled">— Please use Firefox or Chrome to record Video. Sorry :/</span>
			<span id="recordStats">(1.2mb)</span>
			<span id="recordLinkBox">
				— Download: <a href="#" id="recordLink">Recording.mpg (1.2mb)</a>
			</span>
		</div>
	</div>
	<script type="text/javascript" src="instacam.amalgamation.js"></script>

</body></html>

@chrishamm
Copy link
Collaborator

I'll add an option for this to v1.15b. However be aware that the content will be fixed at 16:9 because there seems to be no way to automatically stretch an iframe depending on its inner height.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@BrianGilbert @chrishamm