Remote Webview
Last updated
Last updated
Remote Webview is a feature that displays the contents of a webpage in a floating, resizable, and 16:9 aspect ratio window within MixEffect. It's designed to be used with VDO.Ninja (or similar service) for viewing a video stream online.
You can use Remote Webview to display your ATEM switcher's Multiview right inside MixEffect on your iPhone or iPad. This allows you to step away from your desk while still being able to monitor and switch your video production.
iOS or iPadOS
VDO.ninja
macOS users should note that there's an incompatibility rendering VDO.ninja video streams when MixEffect is running on macOS. As a result, Remote Webview will not work until this bug has been fixed.
To get started with Remote Webview, perform the following steps:
Connect to a switcher.
Go to the Auxiliary section.
Tap the Remote Webview button in the upper-right corner.
Enter the URL to a webpage you wish to remotely view within MixEffect. See the section on VDO.Ninja for more information.
Tap Connect to preview the webpage.
Tap Done to dismiss the sheet and open the Remote Webview in a floating window.
If you have already set up your ATEM switcher to output to VDO.Ninja, continue reading. Otherwise, go to the Setting up Your ATEM to Output its HDMI Out Signal section first.
When you tap Connect in the Remote Webview sheet, MixEffect will try to load the webpage URL that you entered. The screenshots below show what a sample VDO.Ninja page would look like:
Tap on the large play button to start receiving the signal from the computer streaming the video.
NOTE: If you are using MixEffect on the iPhone, iOS will automatically play the video fullscreen. Tap the screen and tap the X button or pinch the screen to exit out of fullscreen mode.
The screenshot above shows the preview of VDO.Ninja output.
Tap Done to dismiss the sheet and reveal it again as a floating window in MixEffect. Tap Disconnect if you do not want the floating window to be displayed when you dismiss the Remote Webview sheet.
The Remote Webview floating window has the following components:
Webview Preview: The contents of the URL you specified in the Remote Webview sheet.
Drag Handle: Tap and drag the window around the screen.
Menu: Additional options for controlling the Remote Webview.
The floating window sits on top of MixEffect. You can drag it around the screen.
Resizing the Floating Window
You can resize the Remote Webview floating window with the standard pinch out magnification gesture. Start the magnification gesture with one finger on the drag handle, as performing the gesture within the preview may cause the video to go fullscreen.
Picture in Picture
You can also use the iOS Picture in Picture button to display the video in PIP mode. Note that the Remote Webview floating window will remain visible on iPadOS and say This video is playing in Picture in Picture.
NOTE: The PIP will disappear if you send MixEffect to the background, since it requires an active switcher connection.
Remote Webview Menu
The following actions are available in the Remote Webview Menu:
Edit: Displays the Remote Webview sheet.
Minimize or Maximize: Toggles between the minimized state and the current size of the Remote Webview floating window.
Auxiliary: Opens the Auxiliary section of MixEffect.
Copy URL: Copies the current URL of the Remote Webview.
Close: Closes the floating window.
Press Command-Shift-K anywhere in MixEffect to display the Remote Webview floating window whenever you are connected to a switcher. If no URL has been specified, the Edit Remote Webview sheet will appear.
From the Auxiliary section, you can press Command-K to bring up the Remote Webview editing sheet.
Here are several methods on how to send the signal from the HDMI Out port of your ATEM switcher to VDO.Ninja so you can pull it into MixEffect's Remote Webview.
USB Capture Card
ATEM Mini
NDI
Blackmagic UltraStudio Mini Recorder
A USB Capture Card takes an HDMI input and outputs the signal via USB. To the computer, it appears as a webcam input, similar to how the ATEM Mini broadcasts itself to your Mac or PC. USB Capture Cards come in a variety of form factors, with prices ranging from $20 to $200.
Plug one end of an HDMI cable into the HDMI Out port on your ATEM switcher.
Plug the other end of the HDMI cable into the USB Capture Card.
Plug the USB end of the USB Capture Card into your computer.
Continue following the instructions on using VDO.Ninja.
If you have a spare ATEM Mini lying around after upgrading to the ATEM Mini Extreme, you can use the Mini as a webcam output for your Extreme.
Plug one end of an HDMI cable into the HDMI Out port on your ATEM Mini Extreme.
Plug the other end of the HDMI cable into Input 1 on your ATEM Mini.
Plug the USB cable from the ATEM Mini into your computer.
Continue following the instructions on using VDO.Ninja.
If you have an NDI encoder box like a BirdDog Mini, you can convert the HDMI Out signal into NDI, read it on your computer, and use it as a virtual input to VDO.Ninja.
Instructions below are provided if you are using a Mac. You'll need to install the following software for this to work:
Plug one end of an HDMI cable into the HDMI Out port on your switcher.
Plug the other end of the HDMI cable into HDMI In port on your BirdDog Mini.
Configure your BirdDog Mini to encode the HDMI signal into NDI.
On the Mac, configure NDISyphon to publish the BirdDog Mini's NDI signal to Syphon.
Open Syphon Virtual Webcam and confirm you can see the signal from the BirdDog Mini.
Continue following the instructions on using VDO.Ninja.
If you have an older Blackmagic UltraStudio Mini Recorder, you can
Instructions below are provided if you are using a Mac. You'll need to install the following software for this to work:
Intel Mac computer.
Plug one end of an HDMI cable into the HDMI Out port on your switcher.
Plug the other end of the HDMI cable into HDMI In port on the Mini Recorder.
Plug the Thunderbolt 2 cable in the Mini Record and your Mac.
On the Mac, configure Black Syphon to publish the output from the Mini Recorder into Syphon.
Open Syphon Virtual Webcam and confirm you can see the signal from the Mini Recorder.
Continue following the instructions on using VDO.Ninja.
Now that the signal from your ATEM is coming into your computer, let's get it onto VDO.Ninja so you can receive it in MixEffect. VDO.Ninja is a free, peer-to-peer forwarding service and technology that brings video directly into a web browser window.
Follow these steps to publish your video to VDO.Ninja:
Open the Chrome web browser to VDO.Ninja.
In the screen that appears, tap Add your Camera to OBS. If prompted, allow your vdo.ninja to access your camera and microphone.
For Video Source, choose the name of your capture device, such as USB Video, Blackmagic Design, or Syphon Virtual Webcam.
For Audio Source, choose the name of your capture device, such as USB Digital Audio, Blackmagic Design, or Syphon Virtual Webcam.
Enter an optional, but highly recommended, password.
Tap Start.
In the screen that appears, click on the paperclip icon at the top to copy the viewing URL.
Keep this window open as long as you want to broadcast the video feed.
The format of the publish feed VDO.Ninja will be something like this:
Where ABC is the password you set in step 5 and XYZ is the unique VDO.Ninja identifier for your video stream.
The viewing URL for this stream will have the following format:
IMPORTANT NOTE: Anyone who has the viewing URL will be able to view your video stream. This is why it's important to assign a password to your video stream.
