Doing a Split Screen Interview with Periscope

chukon
No comments yet

I do a weekly #Periscope names #TechScopeTuesday where I interview people from the college I work at and the surrounding community. I was frustrated with the results of doing an interview with the limited screen width and also dealing with the background, etc. After much research I came up with a solution to do a split screen interview that works pretty well. So, I thought I would share how I do it.

Screen Shot 2016-01-13 at 9.03.56 AM

Prerequisites & steps

  1. Create an account and a room at https://appear.in.
  2. Claim your room
  3. Copy Link to room
  4. Paste link in an iframe using html code below, modify host name, email and url’s and save as index.html
  5. Upload to your website
  6. Browse to new web page using Firefox web browser
  7. Use Phone stand, start up a Periscope broadcast and point back camera to web page.
  8. You will have to move and resize webpage to fit into Periscope view
  9. Setup time to interview someone. Use the below text and tailor to your needs.****************************************************
    SEND TO GUEST BEFORE SESSION
    Remote access from where you are located! You need a computer with Firefox web browser & camera OR an app that runs on an iPhone or Droid phone . You can get link to download app at https://appear.in/– Go to: [URL of new webpage] from computer or phone    (If you use your phone use cellular or fast wifi)– Click “Enter” button

    — Using Computer? allow access to your camera and mic

    — Using Phone? Make sure the app is installed first. If so, then allow appear.in app to launch and use your phones camera and microphone.

    — You should see your face and hear your voice once connected

    Go to above URL 10 minutes before session starts on [Date/Time]

    See you then!

    The below code can be used to create the webpage to host your split screen interview

  10. ***********************HTML CODE BELOW***************************** 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
  
  <style>
.enjoy-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 530x;
  position: relative;
  margin: -40px;
  padding: 20px;
  overflow: hidden;
  border: none;
  font: normal 18px/1 "Times New Roman", Times, serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: #005a84;
  -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,2,1) ;
  box-shadow: 0px 0px 0px 0 rgba(0,0,2,1) ;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
}
a {
    color: #ffffff;
}
  </style>
</head><body style="background-color: rgb(0, 90, 132);">
<center>
<iframe src="https://appear.in/nameofyourrooom" frameborder="0" height="440" width="530"></iframe>
</center>

<center>
<div class="enjoy-css">Host: Your Name<br>
<a href="mailto:youremail@email.com">youremail@email.com</a><br>
<br>
<img style="width: 315px; height: 35px;" alt="website url src="yourlogo.jpg"><br>
<a href="Website URL">Website url</a>
</div>
</center>

</body></html>
  11. Day of Interview. Fire up webpage (using code above) about 15 minutes before Periscope starts.
  12. Place phone in stand in front of webpage.
  13. Start Periscope app and place webpage to fill up phone screen.
  14. Wait for guest enter webpage as well and test audio.
  15. Title your Periscope and start broadcasting! Example: https://www.youtube.com/watch?v=LYsNZvYrgfs
    Screen Shot 2016-01-13 at 9.07.42 AM