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.
Prerequisites & steps
- Create an account and a room at https://appear.in.
- Claim your room
- Copy Link to room
- Paste link in an iframe using html code below, modify host name, email and url’s and save as index.html
- Upload to your website
- Browse to new web page using Firefox web browser
- Use Phone stand, start up a Periscope broadcast and point back camera to web page.
- You will have to move and resize webpage to fit into Periscope view
- 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
- ***********************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>
- Day of Interview. Fire up webpage (using code above) about 15 minutes before Periscope starts.
- Place phone in stand in front of webpage.
- Start Periscope app and place webpage to fill up phone screen.
- Wait for guest enter webpage as well and test audio.
- Title your Periscope and start broadcasting! Example: https://www.youtube.com/watch?v=LYsNZvYrgfs