Personal View site logo
Control your GH3 from a Web Browser - Now with video !
  • 156 Replies sorted by
  • @debaser There may be a way to do that without too much work, but it will be ugly :

    • you will have to use jpg+raw so we can access a jpg file of the last picture

    • i will try to make a small web page which allow to display the last taken picture and shoot a new one (it will require that you launch chrome in non secure mode, see the related post above)

    • You will then have to use ghostwin to make this window transparent
    • Finnaly you will use the java liveview behind it (you will have to align them well manually)

    The problem I have is that it requires going from recmode (to take the picture and have the liveview) to playmode (to diplay the last one) and it takes some time, so some delay must be included in the code. you will also only have 640x480 quality to work with on the PC screen for that superposition

    @fegato no, the quality of the stream is really too low : 10 fps, with 24kB jpegs

  • brilliant work. do you think is possible to use the video stream coming from gh3 for different purposes than just monitoring e.g.: using it in a broadcasting software just like a input source?

  • Hi, I don't know if it's too much to ask, but I make some stopmotion animation and I would love to use my GH3 and lenses in my next project, this software is a good step in that direction but it will be perfect if someone could add the option to get a 50% opacity layer of the previous taken picture over the liveview.... can someone do that?! please!

    Me and the stopmotion community would be the forever grateful for that!

  • @lenuisible

    "actually it depends on the modes the GH3 is in, it can be 132, 144 and 156. To know from where you should cut, you have to read the 32d byte, it give you the relative position of the starting of the JPG (it's either 64, 70 or 7C)."

    Thanks, good to know.

    "Did you code a live view player for iOS ?"

    Yes, I did. iOS is what I develop for most of the time, so the choice was obvious. Furthermore if stream would work during recording using iPhone as a focus support would be really cool.

    BTW, if someone is interested to play with it on his iDevice - let me know. The app is not polished, but seem to work stable (and way faster than Lumix Link iOS app).

    I haven't yet tried the Chrome app, will do. Are RAW files unsupported as in iOS app? Since for photos I mostly shoot RAW, it would make sense to me to invest the time making an app only if RAWs are supported. Maybe a hack could enable this...

  • @dtbow

    the header is 132 bytes long after that you have a JPEG image until the end of the packet.

    actually it depends on the modes the GH3 is in, it can be 132, 144 and 156. To know from where you should cut, you have to read the 32d byte, it give you the relative position of the starting of the JPG (it's either 64, 70 or 7C).

    Unfortunately the stream stops when in video recording mode.

    Yep, nothing we can do I'm afraid (apart from waiting an update or a hack)

    That is focus peaking on top of wifi is pretty useless

    agree, but funny

    I had to increase the UDP implementation's default buffer size to make it work (on iOS).

    Did you code a live view player for iOS ?

    When I asked you to test the above files, I was referencing to the BrowseJPG one (because you complained in another topic that you couldn't download the pictures on your MAC with Lumix Link).

  • BTW, the frame size is about 24-25k, make sure your buffers are big enough. I had to increase the UDP implementation's default buffer size to make it work (on iOS).

  • @lenuisible I got it running. The protocol GH3 is using to send data over UDP is actually quite simple: first 2 bytes of each packet is packet length (header + JPEG payload), the header is 132 bytes long after that you have a JPEG image until the end of the packet. So all what you need to do is to strip the first 132 bytes of each packet and there you have your JPEG. Your recording, actually, also contains the data you send over HTTP, not just the UDP stream. I had to do my own recording to find out what's happening over UDP.

    Unfortunately the stream stops when in video recording mode. That is focus peaking on top of wifi is pretty useless. It kind of works, but not very precise - it is based on 640x480 resolution JPEG: not just resolution is low, but also artifacts are there. When not in video recording mode you are better off using the magnification view, when in video recording mode there is no magnification view, but also no wifi stream.

  • OK @lenuisible I got it to work. I had two instances of Chrome running before and that is apparently what kept it from working before. Only photo files that are jpg are visible; the count of pictures displayed shows all including raw files, but thumbnails are only of jpg files. I guess raw files can't be downloaded this way. With this feature of showing thumbnails, the camera does not recover any more, even after terminating the WiFi connection at the camera; it gets hung-up needing a battery pull to get the camera working right again... Al

  • @dtbow yes, I'll add it to the first post when I go back home. I played with filters to try to do peaking, it's quite easy to alter the JPG files, what's more complicated is fine tuning the filters and don't kill the perfs. I played with some filters of this guy : http://www.jhlabs.com/ip/filters/index.html, and I try to reproduce what was said in this article : http://www.luminous-landscape.com/forum/index.php?topic=56246.0. The EdgeFilter does a pretty good job, but stacking other filters on top of it degrade the perf too much.
    BTW, could you try to uses the files above and follow the procedure to see if you manage to download the pictures on your MAC ?

    @disordinary I didn't manage to receive the stream with VLC, I think VLC only receive MJPEG over HTTP, or maybe it's looking for some info in the headers which are not there. The streamed resolution is 640x480 (640x360 when 16/9 is chosen)

    @aljimenez thanks for testing, are you sure your chrome is running in the unsecure mode ? You may have to close other chrome windows before launching it with the option, if it works, you should have a message looking like this (in your language) :
    image
    Could you enable the Javascript console on chrome and look at the error message ? If it says something about Null Origin, chrome is not in the unsecure mode. If it says something about gh3ip or gh3ipaddress I may have made a mistake somewhere.

    FYI the GH3 needs to be in "playmode" to get the pictures, and in "recmode" to be controlled. The browseJPG.html file enable "Playmode", so if you want to control the GH3 after using it, you have to click on the recmode button on the control web page

    chromeUnsecure.jpg
    1021 x 393 - 95K
  • Thanks for continuing developing this functionality @lenuisible. I downloaded the new control, but was unable to make it work and I needed to remove the battery every time. I used chrome with your instructions, but all I get back from the camera is ok and no thumbnails. I am still able to control the camera and take pictures, but as soon as I try to see the thumbnails, I get ok and the camera is no longer controllable.

  • I thought it was just a standard applet for opening a udp stream? Haven't tested it but I'm guessing that VLC can also open it.

    Focus peaking would be a pretty big ask I would have thought. What resolution is streamed? I doubt its 1080p.

  • @lenuisible

    could you possibly share the java source code too? Do you simply look for 0xFF 0xD8 to separate JPEGS from each other?

    The idea is to try to make focus peaking based on the stream data. No idea if it will work but worth the try.

  • A small update, you can now download the JPG files stored on the GH3 using Chrome and the attached files.

    • For security reasons, the web browsers doesn't like to parse content coming from other web sites, unless the requesting web page belongs to the same domain as the requested one.
    • To make this work with the GH3, you have to launch chrome with a specific parameter : you need to use the CLI (with Windows or Mac OS), and type "chrome --disable-web-security".
    • Download the attached "BrowseJPG.zip" file, and unzip it wherever you want
    • You can then launch (from this "unsecured" Chrome page) the file "controlBrowseJPG.html" to access the files stored on the GH3

    • you will be presented with the thumbnail pictures, if you click on one of them, you will download the full res jpg.

    • FYI, 3 versions of the files are present on the GH3 :

    Edit : I forgot to change the default value of the IP address of the GH3, which is set to 192.168.0.13 (the IP@ of my GH3).

    • You should be able to change it when you launch the file (ie just change it to 192.168.0.1 before you click on load)
    • If you want to change the default value, edit the "controlBrowseJPG.html" file, and on line 6, replace the value field with the IP address of your GH3 (192.168.0.1 if you're directly connected to the Wifi network of the GH3)
    BrowseJPG.zip
    2K
  • Thanks @lenuisible for your efforts!

    I confirm it worked for me in Chrome and Firefox but in IE10 streaming and shooting did not start. Perhaps some IE settings but it does not matter. I belive there will be a fully functional application one day. It doesn't have to be a web browser based. A standalone application seems fine and even better to me.

  • @maxr Thanks for confirming that it works !

    @taawp & @Vitaliy_Kiselev I'm starting to like Java :). To enable more advanced features, the program needs to be able to retrieve/parse and send XML files from/to the GH3, and it's a nightmare using browser because the GH3 doesn't use any "Access-Control-Allow-Origin:*" in its response header, and browser don't like that. If you're interested in the topic, you can read this : http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy
    I think I'm going to go one with Java for a Lumix Link like application for PC/MAC. A Web UI using JS will be better to develop specific apps. But If someone is willing to spend time on a live view player for the web, the theory is really simple :

    • create a local UDP socket on port X
    • send a GET HTTP like : http://@IP_GH3/cam.cgi?mode=startstream&value=X
    • retrieve the bytes stream, look for 0xFF 0xD8, cut the datagram packet from this 0xFF offset to the end (finishing with 0xFF 0xD9)
    • convert this into a JPG and display it
  • LIVE VIEW WORKING in OS 10.6.8

    ufff... sometimes would be nice to have a digital machete!!!

    though is supposed not to work and it is not "recorded" anywhere (that I was able to find), I managed to install java 1.7.0_21 (again minimum requirements are OS 10.7 or newer) in a OS 10.6.8

    case someone is interested, here's what I did:

    • download the JDK (java developent kit) from oracle
    • extract both pakages with pacifist, once the install is handicapped
    • now's the tricky part, create a new folder "1.7.0." and inside of which dump the contents of first package; inside of contents' plugin folder dump the second package, the plugin one
    • rename the folder to "1.7.0.jdk" and place it next to the old "1.6.0.jdk" home/System/Library/Java/JavaVirtualMachines
    • Open Java Preferences and under "General" move Java SE 7 to the top
    • As lenuisible explains, set gh3 on wifi> wifi function> new conection> remote shooting
    • select gh3's wifi network from airport, set password given by camera
    • start the control html file, press the "recmode" tab - gh3 reads "Under remote control"
    • then simply open "UDPServer.class" file; you can also fire the stream from a terminal window (which was my case) but it is far easier this way
    • back to firefox and control.html, press "StartStream" tab
    • watch wonderfully boring things anew :P

    again, THANKS LENUISIBLE for the terrific job you're doing!!!

    gashô

  • I really need to try this out for Astro Photography.

  • @taawp

    Chrome App can be good idea.

  • If we limit it to only Chrome browsers, it looks like a Chrome App can use chrome.socket.

  • @lenuisible

    Looking at google it seems that you can make UDP work with Flash (and it is more common thing than Java now).

  • @lenuisible excellent work so far !!

    this has lots of potential, I would love to see someone with some coding skills help you out.

    It would be really cool to have a bramper like function for time lapse, via a web interface to ramp the settings

    I would donate to the cause

  • @Vitaliy_Kiselev without some sort of gateway, I really don't think so.
    I would be happy to be proven wrong, but you'll have to point me to some page to start with. Remember that you need to create an UDP socket, and that you can't rely on RTP.

  • @lenuisible

    I forgot to add the raw quality, I will update this in the next version, but you can add it yourself adding this line : < OPTION VALUE="raw" >raw < /OPTION > at line 293 of the requests.html file

    donne and WORKING, thanks

    about JAVA JR7, minimum system requirements imply OS 10.7 or later, so right now I cannot test it, I'll try to kidnap the (very requested) iMac with OS 10.7
    all good

  • @lenuisible

    I suggest to check Javascript and canvas in HTML5, I think you could make it without Java.

  • Thanks guys for the kind words and for testing this,

    @aljimenez yep, this is another way to have the "java UDPServer" working, if you change the PATH like I explained in the first post, you will be able to run java without entering its complete path, so instead of "C:\Program Files (x86)\Java\jre7\bin\java" UDPServer you could just type java UDPServer.
    About the video preview during recording, as ou say it's impossible, but at least you can change the settings (focus, zoom, aperture ...). Maybe Panasonic will unlock this in a future firmware
    About accessing the pictures files stored on the GH3, I would prefer that someone else takes care of it...

    @disordinary I think creating an UDP socket (which is needed in our case) with a pure web solution is tricky, WebRTC needs RTP, which GH3 doesn't use.

    @maxr thanks for testing this on a MAC, it would be cool if you could try the live view, what you basically need is to launch java UDPServer from a terminal (for java installation look here : http://docs.oracle.com/javase/7/docs/webnotes/install/mac/mac-jre.html), you can look here to see how to do it : http://www.cs.princeton.edu/courses/archive/spr04/cos126/hello/mac.html.
    I forgot to add the raw quality, I will update this in the next version, but you can add it yourself adding this line : < OPTION VALUE="raw" >raw < /OPTION > at line 293 of the requests.html file