search

Duet3D / DuetWebControl

A completely new web interface for the Duet electronics
GNU General Public License v3.0
409 stars 230 forks source link

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

Closed BrianGilbert closed 7 years ago

BrianGilbert commented 7 years ago

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 commented 7 years ago

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

BrianGilbert commented 7 years ago

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 commented 7 years ago

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.