如何将iPad摄像头视频传输至MacBook的MAMP本地服务器video标签

Hey there! Let's walk through how to get your iPad's camera feed streaming to your MacBook's MAMP-hosted video tag—even across rooms without any cables. I'll cover a couple of practical approaches, starting with the most straightforward options.

First: Get Your Network Setup Right #

Before diving into streaming, you need to make sure your MacBook and iPad can communicate over the network:

• Find your MacBook's local IP address: Open Terminal and run ipconfig getifaddr en0 (this works for WiFi connections; use en1 if you're on Ethernet). You'll get something like 192.168.1.105—this is the address your iPad will use to reach your MAMP server instead of localhost.
• Test MAMP accessibility from iPad: Open Safari on your iPad and navigate to http://[your-mac-ip]:8888. If you see your MAMP welcome page, great—your server is reachable. If not, check MAMP's settings:
  • Open MAMP > Preferences > Ports, confirm Apache is set to 8888.
  • Ensure your Mac's firewall allows incoming connections on port 8888 (go to System Settings > Network > Firewall > Options, add Apache or port 8888).

Option 1: HTTP Live Streaming (HLS) – Stable, Broad Compatibility #

HLS is a reliable streaming protocol that works well across browsers and devices. Here's how to set it up:

Step 1: Add RTMP Support to Your Mac #

MAMP doesn't natively support RTMP (the protocol used to push video to a server), so we'll use Nginx with the RTMP module to handle streaming:

• Install Homebrew if you don't have it: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
• Install Nginx with RTMP: brew install nginx-full --with-rtmp-module
• Edit the Nginx config file (/usr/local/etc/nginx/nginx.conf) and add this at the bottom:

  rtmp {
      server {
          listen 1935;
          chunk_size 4096;
  
          application live {
              live on;
              hls on;
              hls_path /Applications/MAMP/htdocs/stream;
              hls_fragment 5s;
              hls_playlist_length 20s;
          }
      }
  }
  

• Create the stream directory in MAMP's htdocs: mkdir /Applications/MAMP/htdocs/stream
• Restart Nginx: brew services restart nginx

Step 2: Push iPad Camera Feed to RTMP Server #

If your iPad app is a native iOS app:

• Use AVFoundation to capture the camera feed, then use a library like librtmp or HaishinKit to push the stream to rtmp://[your-mac-ip]:1935/live/ipadfeed
• Make sure your app requests camera and network permissions in Info.plist (add NSCameraUsageDescription and NSAppTransportSecurity with NSAllowsArbitraryLoads enabled for non-HTTPS connections)

If your iPad app is a web app (Safari):

• Use navigator.mediaDevices.getUserMedia({video: true, audio: false}) to get the camera stream
• Use a library like rtmp.js to push the stream to the RTMP endpoint mentioned above

Step 3: Embed the Stream in Your MAMP Page #

In your MAMP-hosted HTML page, add a video tag that references the HLS playlist:

<video id="ipadStream" controls autoplay muted></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('ipadStream');
  const hls = new Hls();
  hls.loadSource('http://[your-mac-ip]:8888/stream/ipadfeed.m3u8');
  hls.attachMedia(video);
</script>

Note: We use hls.js because native HLS support in desktop Safari works, but it adds better fallback for other browsers.

Option 2: WebRTC – Low-Latency Peer-to-Peer #

If you want near-real-time streaming (no delay from HLS slicing), WebRTC is the way to go. It connects your iPad and MacBook directly, with a simple signaling server to coordinate the connection:

Step 1: Set Up a Signaling Server (Node.js) #

• Create a new folder in your MAMP htdocs (e.g., signaling-server)
• Initialize a Node.js project: npm init -y
• Install Socket.io: npm install socket.io
• Create a server.js file:

  const http = require('http');
  const server = http.createServer();
  const io = require('socket.io')(server, {
    cors: { origin: "*" }
  });
  
  io.on('connection', (socket) => {
    socket.on('offer', (data) => socket.broadcast.emit('offer', data));
    socket.on('answer', (data) => socket.broadcast.emit('answer', data));
    socket.on('ice-candidate', (data) => socket.broadcast.emit('ice-candidate', data));
  });
  
  server.listen(3000, () => console.log('Signaling server running on port 3000'));
  

• Run the server: node server.js (keep this terminal window open)

Step 2: iPad Web App Code #

In your iPad's web app, add this to connect and send the camera stream:

const socket = io('http://[your-mac-ip]:3000');
let peerConnection;

navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => {
    peerConnection = new RTCPeerConnection();
    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
    
    peerConnection.createOffer()
      .then(offer => peerConnection.setLocalDescription(offer))
      .then(() => socket.emit('offer', peerConnection.localDescription));
    
    peerConnection.onicecandidate = (event) => {
      if (event.candidate) socket.emit('ice-candidate', event.candidate);
    };
  });

socket.on('answer', (answer) => {
  peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
});

socket.on('ice-candidate', (candidate) => {
  peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
});

Step 3: MAMP Web Page Code #

In your MAMP HTML page, add this to receive and display the stream:

const socket = io('http://[your-mac-ip]:3000');
let peerConnection;
const video = document.getElementById('ipadStream');

socket.on('offer', (offer) => {
  peerConnection = new RTCPeerConnection();
  
  peerConnection.ontrack = (event) => {
    video.srcObject = event.streams[0];
  };
  
  peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
    .then(() => peerConnection.createAnswer())
    .then(answer => peerConnection.setLocalDescription(answer))
    .then(() => socket.emit('answer', peerConnection.localDescription));
  
  peerConnection.onicecandidate = (event) => {
    if (event.candidate) socket.emit('ice-candidate', event.candidate);
  };
});

socket.on('ice-candidate', (candidate) => {
  peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
});

Troubleshooting Tips #

• Firewall issues: Make sure your Mac allows incoming connections on ports 1935 (RTMP) and 3000 (signaling server) – add them in System Settings > Network > Firewall > Options.
• Permission errors: Double-check that your iPad app has camera access (Settings > [Your App] > Camera) and that your web pages request media permissions.
• Network drops: If you're across rooms, ensure your WiFi signal is strong enough – consider using a mesh WiFi system if you have spotty coverage.

内容的提问来源于stack exchange，提问作者seikida