Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
2 posts Page 1 of 1
Dear Couchfellows,

I've recently come across Daily, a developer-friendly audio/video livestreaming service, and would like to show how to implement it, Couch-style. I've found Daily very useful as they have a pre-built video chat element you can place in your front end, complete with audio/video controls, text chat, and optional screensharing. If you need more control, you can build your own custom element by digging into Daily's front end JS library.

I mostly use the pre-built option, because it's so good and flexible as-is! I'll plan on coming back to this post with more examples as I become more familiar with the service. In the meantime, here are some basic use-cases that I've found particularly useful. Please feel free to share any examples or comments of your own! :)

Note: In the examples below, I'll be using my <cms:curl /> tag (inspired by @KK's <cms:zapier /> tag), which encapsulates some of PHP's curl functions. Of course, feel free to write your own curl requests via <cms:php> if you feel more at home there. :geek:

- - - - - - -

Create a public room
You can create a room manually via Daily's dashboard: https://dashboard.daily.co/rooms/create.

Or you can create rooms programmatically. To get an API key, you'll need to create a Daily account and copy it from your dashboard.
Code: Select all
// in couch/config.php
define( DAILY_API_KEY, 'your-secret-daily-key-goes-here' );

- - - - - - -

// Capture some room options in a Couch array
<cms:capture into='room_options' is_json='1'>
  {
    "name" : "getting-started-public-webinar",
    "privacy": "public",
    "properties" : {
          "start_audio_off" : true,
          "start_video_off" : true
    }
  }
</cms:capture>

// Make a curl POST request to Daily's API and save it into a Couch variable named 'response'
<cms:curl
  url="https://api.daily.co/v1/rooms/"
  headers="Content-Type: application/json | Authorization: Bearer <cms:php>echo(DAILY_API_KEY);</cms:php>"
  method='post'
  data="<cms:show room_options as_json='1' />"
  into='response'
  is_json='1'
/>

// Persist room info to the database for later use
<cms:db_persist
  _masterpage='daily_rooms.php'
  _mode='create'
  _auto_title='0'
  k_page_title=response.name
  k_page_name=response.name
  room_id=response.id
  room_url=response.url
  expiry=response.config.exp
/>

// Response output
<cms:show response.id />
<cms:show response.name />

987b5eb5-d116-4a4e-8e2c-14fcb5710966
getting-started-public-webinar


Displaying a room
Daily has a pre-built video chat box, which you can embed into your projects easily via JavaScript, given a room name (we persisted one to the database in the above example).
Code: Select all
// Include Daily JS
<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>

// Let's assume we've chosen to output the room name in the URL (https://your-site.com/meetings.php?room_name=getting-started-public-webinar)
<cms:set room_name="<cms:gpc 'room_name' method='get' />" />

// Display the daily room matching that name
<cms:pages masterpage='daily_rooms.php' page_name=room_name>

  // Place an empty div to populate later via JS
  <div id="daily_video></div>

  // Create the call frame using Daily's JS library
  <script>
    callFrame = window.DailyIframe.createFrame(
      document.getElementById('daily_video'),
      {
        iframeStyle: {
          position: 'relative',
          border: '1px solid black',
          width: '100%',
          height: '70vh'
        },
        showLeaveButton: true,
        showFullscreenButton: true
      });
      callFrame.join({
        url: "<cms:show room_url />"
      });
  </script>
</cms:pages>


daily-prebuilt.png
daily-prebuilt.png (104.25 KiB) Viewed 144 times

I recommend digging into their API documentation if you're interested. Considering Couch's flexibility, this just scratches the surface of what we can do. More interesting ways of using the service could include private meeting rooms for logged in Couch extended-users, creating and managing rooms and user tokens in the admin panel, and crafting audio-only interfaces similar to the Clubhouse app.

- - - - - - -

I hope this can be of use to some fellow Couchers!
Must say this is very interesting!
2 posts Page 1 of 1
cron