syphon

Syphon into the web browser

Yes apparently we can have a Syphon input into the web browser. It is a workaround done via Quicktime. So it has some limitations. The biggest limitation being that we can not use the Syphon input as a texture in WebGL. When I did this I prepared a Syphon client in Quartz Composer and converted it to a Quicktime file. Then I put it into my webpage like this:

<embed width="400px" height="300px" name="plugin" src="file:///Syphon%20Client%20QC.mov" type="video/quicktime">

It does seem that we can put CSS filters on the Quicktime element which I hadn’t expected (tested in Safari and Chrome). Like this:

<head>
<style>
.filtered {
-webkit-filter: hue-rotate(230deg)
saturate(300%)
blur(6px);
}
</style>
</head>
<body>
<embed class="filtered" width="400px" height="300px" name="plugin" src="Syphon%20Client%20QC.mov" type="video/quicktime">
</body>

I have also tested the awesome up-and-coming CSS custom filters feature but it does not work on videos or embedded content – yet. I have a hope that when it is implemented for the video tag it will also work for the embed tag. That would finally give us some control over a Syphon input transforming the geometry and style of it as we please.

So what is this all good for? Well basically I would like to use the web browser as a VJing tool. And for visualists Syphon is such a nice tool so this discovery is a good step in the right direction for creating a VJ tool using browser technology.

For anyone wondering this has nothing to do with streaming a Syphon source. It’s purely an example that is running on the local machine.

Share it:

2 Comments

  1. Jim Nevin

    UDART — very interested in this solution but having an issue, perhaps I misunderstand what you are accomplishing.

    My goal is to have a Quartz Composer Syphon server push images to a web browser embedded Syphon client. Then I will separately control the QC Syphon server with Kineme Network HTTP Javascript from the browser. Have you ever seen this done?

    You say you prepped a Syphon server as a QT Mov then embed it in the page as “Syphon%20Client%QC.mov” — umm, are you embedding the Syphon client or the Syphon server?

    I AM able to embed the Syphon Server QC as a Quicktime MOV in Chrome & Safari and display the imagery in the browser. But I am NOT able to get a QC Syphon client to recognize the embedded Syphon server or get images from it. And actually, I want the reverse — a Web browser embedded Syphon client that’s receiving images from a running QC Syphon server.

    Any suggestions?

    Much appreciated

    Jim Nevin
    jnevin@mindspring.com

  2. Udart (Author)

    Jim, I made a typo – what I accomplished was displaying an embedded syphon client in the browser – not a server. It is not as fast as ‘real’ Syphon should be though. The frame rate is lower.

Leave a Comment