Streaming Workshop

Description

Week 11: October 29 – November 4

We will overview the artistic and technical requirements for live broadcasted Internet streaming. This includes all stages of the process, including: media creation, peer-to-peer interaction, sequencing, encoding, embedding, the video player, video-on-demand format, live broadcasting, recording, and archiving. We will discuss how each final project will be prepared and distributed into our broadcast at the end of the semester.  Location: B1-14

Assignments

Due Next Week:  Thursday, November 5

1 – Project Hyperessay #2: Technical Realization

Provide a technical description with any sketches, drawings, photographs you have done, which help articulate the technical elements of the work, as well as any specific software and/or hardware that is required at this stage of the project. Also include a technical description of how your project will be incorporated into the broadcast. See the Project Hyperessay Assignment page for more details.

Outline

Student Feedback

Please remember to go online and complete the student feedback. There are still 2 students who haven’t completed the form.

OSStv Overview

We will review the following streaming technologies in order to organize our broadcast event over OSStv. This will involve each final project’s integration into a single broadcast channel, which will run for the duration of our final session (approximately 2 – 3 hours) on Thursday November 12th in B1-14.

The OSStv broadcast will take place via YouTube Live in my account located at: https://www.youtube.com/user/randallpacker/live. Viewers will be able to watch the streaming broadcast as well as comment in the YouTube chat. We will promote this page from a Facebook Event page.

While each project uses different techniques and a unique platform, such as Periscope.tv, Skype, Adobe Connect, Max/MSP, and pre-recorded video, the following is a summary description of each of the software tools we are using and how they can be consolidated into the broadcast. Together we will strategize on creating seamless continuity between each project.

Periscope.tv

IMG_7326
Broadcast feed via Periscope.tv with comments

This app enables live broadcasting from a mobile phone to a global audience. Integrated with Twitter, the broadcaster can either prompt followers, or simply broadcast to any user who is online and selects the broadcast for viewing.

While Periscope.tv can only be broadcast from a mobile device, it can be viewed in a Web browser using Periscope Streams, a browser-based aggregator of Periscope.tv broadcasts.

Screenshot 2015-10-22 10.21.22
Periscope Streams via http://onperiscope.com/

They is also an aggregate Meerkat Streams as well. Meerkat is another broadcast app similar to Periscope.tv.

Screenshot 2015-10-22 10.24.23
Meerkat Streams via: http://www.meerkatstreams.com/

After researching Periscope Streams, it is not clear though how one’s stream ends up on these Web-based feeds, since I was unable to find mine when I was broadcasting. If anyone wants to experiment with this please do.

Reflector

Screenshot 2015-10-26 13.33.13
Screenshot of Reflector displaying a live feed from an iPhone camera, including the controls.

Reflector is a wireless mirroring and streaming receiver that works with with Google Cast, AirPlay and AirParrot 2. Mirror your mobile screen to the laptop or desktop screen wirelessly. You can also send your screens directly to YouTube for others to watch live. Everything you do on your device can be wirelessly sent to Reflector. AirPlay is an Apple protocol for wirelessly streaming from a mobile device to the Mac.

In order to establish a link between the phone and Reflector on the Mac/iOS, install Reflect, open the application, turn on the phone, swipe up, click on the AirPlay button, set it to your computer, and be sure mirroring is turned on. (see below).

IMG_7485IMG_7486

Quicktime

Screenshot 2015-10-26 13.48.50
Quicktime displaying live feed from iPhone displaying the NY Times online.

Quicktime has a feature to display a live iOS device if it is plugged into via the lightening cable to a laptop or desktop computer. To do this, open Quicktime and create a new Movie recording, and then select the iOS device from the drop down menu just to the right of the record button. You can then record the live feed from the device by clicking on the record button. Just be sure you click on the Quicktime file so that the control bar disappears.

Screenshot 2015-10-26 13.50.42
iPhone device is selected as the “Camera” in a Quicktime movie record file

Wirecast Pro

Screenshot 2015-10-27 15.14.26Telestream’s Wirecast Pro is a software-based broadcast studio. You can create multiple layers of titles and graphics, pre-recorded video and audio, live camera feeds, live microphones, live desktop images (both local and remote), and sequence all of the above in order to broadcast to YouTube Live or other streaming sites.

Wirecast Pro uses the broadcast paradigm of “preview” and “live,” so you can setup a layering of media and then go live when you are ready to bring the material into the live broadcast. This will allow us to have all media, cameras, mics, desktops, etc., preset and then cut to each project seamlessly when the previous one is finished. We will essentially be using Wirecast Pro to engineer the broadcast, and each student project will constitute a program broadcast over OSStv to YouTube live.

You may want to consider superimposing a Webcam and/or microphone over your broadcast, particularly to add a live element if the project is pre-recorded.

Wirecast Desktop Presenter

Screenshot 2015-10-26 13.57.01
Desktop Presenter streaming a Chrome window

Desktop Presenter is an app from Wirecast Pro that can be downloaded for free or Android or Mac iOS. It allows you to stream your desktop or a specific app or window on your desktop to Wirecast Pro remotely from another computer. Any projects that are created on the desktop can this way be incorporated into the broadcast by streaming your work to the main computer running Wirecast Pro.

Wirecast Cam

IMG_7488
Wirecast Cam broadcasting app with controls on the right side

Wirecast Cam allows you to broadcast your iPhone camera directly to Wirecast Pro as an additional live camera feed. It has controls for the flashlight, front or back cameras, settings to control resolution, and mic audio.

Strategies for incorporating projects into the broadcast

Here are some ideas for using the above technologies for our broadcast. This is not an exhaustive list and together we can experiment and find the best methods that work for each project:

  • If the project involves a live feed from the mobile device, such as Periscope.tv, transmit the feed to the desktop via Quicktime or Reflector and then redirect it via Wiredcast Pro remotely through Desktop Presenter. In order to do this, we must be on the same ADM wireless network such as NTUSecure.
  • If the project involves a live feed from the mobile device, such as Periscope.tv or another app, but is not accessible to the ADM network, then record it to Quicktime if your laptop is within reach of the cable. We will then broadcast your project from the recorded file.
  • If you are using your iPhone with Periscope.tv and it is out of reach of your laptop you need to save the recording to your photo gallery and then transfer it to your camera. We will then load it into Wirecast Pro as pre-recorded video.
  •  If you are using an app other than Periscope, and you are out of range of your camera, you need to be within the NTUSecure network for your final presentation, even if you project tests were outside of the network.
  • If you are processing or manipulating live media on your desktop, such as in Max MSP, you can use Desktop Presenter to transmit the live feed to Wirecast Pro. I would have like to use a capture card for this but unfortunately we don’t have one at ADM.

YouTube Live

Screenshot 2015-10-27 15.17.18
YouTube Live broadcast page with chat to the right

If you have a YouTube account you can now broadcast on YouTube live. For our broadcast, we will be using my account, but if you are interested in setting this up for yourself, here is an introduction to streaming via YouTube live. It is possible to stream directly to your own YouTube live page, which in my case is: https://www.youtube.com/user/randallpacker/live or you can embed the stream into a page on your Website. Here is information about embedding the YouTube stream and other best practices: https://support.google.com/youtube/topic/2853698?hl=en&ref_topic=6136989.

Broadcasting from Wirecast Pro

Screenshot 2015-10-27 15.19.27Wirecast Pro allows you to stream directly to your YouTube account. By clicking “Stream” in the upper left hand corner you can start the broadcast to YouTube LIve. Note in the upper right hand corner that Wirecast displays information related to the bandwidth and cpu, important for maintaining a quality broadcast. It is good to know that your upload speed should be at least twice as fast as the bandwidth of the broadcast. We will experiment with various bandwidths so you can see how this works. In the settings below, you can set the encoding to a specific resolution, such as 240p or as high as 1080p, as well as authenticate the broadcast by connecting Wirecast to your YouTube account. For our purposes, 480p will probably be the maximum bandwidth with our Internet connect in ADM.

Screenshot 2015-10-26 14.33.01

Within Wirecast, you can also title your broadcast event, indicate the start and stop time, choose a category, etc. Together we will decide on a title, such as OSStv: Streaming Projects, or something a bit more creative.

Screenshot 2015-10-26 14.33.18

As mentioned, we will be using my YouTube live feed, which is located at: https://www.youtube.com/user/randallpacker/live. Although our configuration will take place in Wirecast Pro, you can also change the configuration on the YouTube live dashboard: https://www.youtube.com/live_dashboard. You would want to do this if you broadcasting directly from your iPhone or using a hardware encoder.

Screenshot 2015-10-26 14.34.54

YouTube Embed in WordPress

Screenshot 2015-10-27 15.30.42
An embedded YouTube live video at: http://oss.adm.ntu.edu.sg/2015-dm3012/osstv/

Although we are going to use the YouTube Live page with chat, you can also embed the broadcast into any Web page. I have applied the following embed code to the osstv page. The code following contains parameters for autoplay, autoloop, hide controls, etc:

<iframe width=”400″ height=”225″ src=”https://www.youtube.com/embed/GZ6-DwPV42E?modestbranding=1&autoplay=1&controls=0&autohide=1&disablekb=1&hd=1″ frameborder=”0″ allowfullscreen></iframe>

In this case the live video is presented without any distractions of the control bar and plays automatically as soon as the page is launched. We could broadcast our event this way, including a sidebar with a Twitter feed, but I think the chat capability in YouTube is our best solution. But we can discuss!

Integrating Projects into the Broadcast

We will now discuss each individual student project and explore how we can to incorporate each one into the broadcast. This is an opportunity to creatively think through new possibilities, new ways of presenting each work. You might have new ideas that you want to consider based on the streaming workshop.

For next week, Project Hyperessay #2: Technical Realization is due, and I want everyone to include in your statement how you are going to incorporate your final project into the broadcast.

Organizing the Broadcast

In order to prepare for our broadcast, there are a number of things we will want to do. I would like each of you to volunteer of one of the following tasks:

  • Broadcast Director: This will be my role, to run Wirecast Pro and oversee all switching and software configurations.
  • Broadcast Coordinator: Oversee the scheduling, create a list of works and their requirements, gather materials, and any other logistics associated with the broadcast.
  • Technical Director: help organize and assist with all technical aspects of the broadcast. Insure we are setup in B1-14, and that all student computers, mobile devices, and projects are ready to go. Troubleshoot any issue prior to and during the broadcast.
  • Social Media: setup an Event page in Facebook, organizing any media required, configuring the event page, ensuring that everyone shares and invites their friends, and moderating discussion in the Facebook event page leading up to the broadcast.
  • Graphic Design: design a logo for the event that will be used on the Facebook event page. Additional graphics used in Wirecast Pro, as well as titling for each project. Since Wirecast Pro will be located on my computer, the graphic designer will work with me to incorporate graphics and titling into the software.
  • ????: Is there anything I haven’t thought of?

Review Next Week’s Assignment