phoboslab / jsmpeg

MPEG1 Video Decoder in JavaScript
MIT License
6.38k stars 1.43k forks source link

Want Image From JSMPG.js #251

Open prasannappt opened 6 years ago

prasannappt commented 6 years ago

Hi All,

  Am displaying live stream video in canvas tag using Jsmpg.js. My Problem is, I don't know how to get the image from that canvas tag, for your reference my code 
<form id="form1" runat="server">
        <canvas style="border:1px solid #000000; width:900px" id="canvas"></canvas>
        <img id="img" src="" style="border-style:dotted;"/>

    <script>
        var client = new WebSocket('ws://localhost:8089');
        var canvas = document.querySelector('canvas');
        var img = document.getElementById('img');

        var player = new jsmpeg(client, {
            canvas: canvas,
            autoplay: true,
            loop: true
        });

        img.src = player.canvas.toDataURL('image/jpeg');
    </script>
    </form>

Am using this JS

please give me a solution, am stuck with past one week.

Thanks

zhpaul33 commented 6 years ago

Hi. You need this option enabled - preserveDrawingBuffer: true

and here is my javascript code for save image on rightclick on it - function saveimage(){ var link = document.getElementById('link'); link.setAttribute('download', 'cam.png'); link.setAttribute('href', document.getElementById('canvas').toDataURL('image/png').replace("image/png", "image/octet-stream")); link.click(); } and in html - `

`