Created
July 6, 2015 09:40
-
-
Save timlianov/20b960fdd50ec7062de7 to your computer and use it in GitHub Desktop.
jsmpeg_example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=320, initial-scale=1"/> | |
| <title>jsmpeg streaming</title> | |
| <style type="text/css"> | |
| body { | |
| background: #333; | |
| text-align: center; | |
| margin-top: 10%; | |
| } | |
| #videoCanvas { | |
| /* Always stretch the canvas to 640x480, regardless of its | |
| internal size. */ | |
| width: 1280px; | |
| height: 720px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- The Canvas size specified here is the "initial" internal resolution. jsmpeg will | |
| change this internal resolution to whatever the source provides. The size the | |
| canvas is displayed on the website is dictated by the CSS style. | |
| --> | |
| <canvas id="videoCanvas" 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> | |
| <script type="text/javascript" src="jsmpeg.js"></script> | |
| <script type="text/javascript"> | |
| // Setup the WebSocket connection and start the player | |
| var client = new WebSocket('ws://127.0.0.1:9998/'); | |
| var canvas = document.getElementById('videoCanvas'); | |
| var player = new jsmpeg(client, {canvas: canvas}); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment