我会直播我的相机 Google Nest Cam Battery（新）。为此我使用 WebRTC。这是 Google Nest Cam 支持的协议。它可以在 Android、PC 上运行，但不能在 iPhone 上运行。我尝试了 RTCPeerConnection - Simplepeer。但我无法在 iPhone 上直播。
我使用的代码：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Camera - T-Construction</title>
</head>
<body style="background-color: #D3D3D3;">
<center><br><br><h2 style="color: black;">Voici la vue en direct de votre construction</h2><br><br>
<video id="webCamVideo" controls autoplay playsinline loop width="80%" /></center><br>
<?php
$client_id = 'CLIENTID';
$client_secret = 'CLIENTSECRET';
$project_id = 'PROJECTID';
$refresh_token = 'REFRESHTOKEN';
require 'dbcon.php';
$ids = 1;
$devicestat = $con -> prepare("select deviceid from clients where id = ?");
$devicestat -> bindParam(1, $ids);
$devicestat -> execute();
$devicedon = $devicestat -> fetchall();
$deviceid = $devicedon[0]["deviceid"];
$auth_url = "https://www.googleapis.com/oauth2/v4/token";
$auth_data = array(
'client_id' => $client_id,
'client_secret' => $client_secret,
'refresh_token' => $refresh_token,
'grant_type' => 'refresh_token'
);
$auth_curl = curl_init($auth_url);
curl_setopt($auth_curl, CURLOPT_POST, true);
curl_setopt($auth_curl, CURLOPT_POSTFIELDS, http_build_query($auth_data));
curl_setopt($auth_curl, CURLOPT_RETURNTRANSFER, true);
$auth_response = curl_exec($auth_curl);
curl_close($auth_curl);
$auth_data = json_decode($auth_response, true);
//i get the access token for get the stream after
if (isset($auth_data['access_token'])) {
$access_token = $auth_data['access_token'];
$_COOKIE["acto"] = $access_token;
}
?>
<script src="simplepeer.min.js"></script>
<script type="text/javascript">
const configuration = {
iceServers: [
{
urls: [
'stun:stun1.l.google.com:19302',
'stun:stun2.l.google.com:19302',
],
},
],
iceCandidatePoolSize: 10,
};
let peerConnection = null;
let remoteStream = null;
async function startFeed() {
peerConnection = new RTCPeerConnection(configuration);
const token = '<?php echo($_COOKIE["acto"]); ?>';
const projectid = "<?php echo($project_id); ?>";
const deviceid = "<?php echo($deviceid); ?>";
remoteStream = new MediaStream();
const videoElement = document.querySelector('#webCamVideo');
if (videoElement) {
videoElement.srcObject = remoteStream;
}
// Watch for new tracks from remote stream; add to video stream
peerConnection.ontrack = event => {
event.streams[0].getTracks().forEach(track => {
remoteStream.addTrack(track);
});
};
// Data Channel Required by the SDM API.
if (peerConnection.createDataChannel) {
peerConnection.createDataChannel("dataSendChannel");
}
try {
// Create the offer.
const offer = await peerConnection.createOffer({
offerToReceiveAudio: true,
offerToReceiveVideo: true
});
await peerConnection.setLocalDescription(offer);
// Safari doesn't respect the parameter requests of createOffer above, so let's fudge the offer ourselves! I mnot sure how to do
let offerSdp = offer.sdp;
offerSdp = offerSdp.replace('a=sendrecv', 'a=recvonly');
// Now, send request for SDP connection
const url = "https://smartdevicemanagement.googleapis.com/v1/enterprises/" + projectid + "/devices/" + deviceid + ":executeCommand";
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
body: JSON.stringify({
"command": "sdm.devices.commands.CameraLiveStream.GenerateWebRtcStream",
"params": {
"offerSdp": offerSdp
}
})
};
const response = await fetch(url, options);
// Process the response.
const data = await response.json();
let answerSdp = data.results.answerSdp;
// Now start the feed using the answer
const answer = new RTCSessionDescription({ type: 'answer', sdp: answerSdp });
await peerConnection.setRemoteDescription(answer);
} catch (error) {
console.error("Error starting feed:", error);
}
}
// Call startFeed when the page is loaded.
window.addEventListener('load', startFeed);
</script>
<button onclick="startVideo()">Démarrer la vidéo</button>
<script>
function startVideo(){
let canvas = document.createElement('canvas');
let video = document.getElementById('webCamVideo');
canvas.width = 768;
canvas.height = 432;
let ctx = canvas.getContext('2d');
ctx.drawImage( video, 0, 0, canvas.width, canvas.height );
var image = new Image();
image.src = canvas.toDataURL('image/jpeg'); // Convertir le canvas en format d'image
document.body.appendChild(image);
}
</script>
</body>
</html>
我需要你的帮助。 我该如何解决这个问题？ 谢谢。
我也遇到了完全相同的问题。我找到一个修好了它的人。他的回应如下：“解决方案：在创建报价之前移动 addTransiever - rtcPeerConnection 应该在创建报价之前了解传输器。”
您可以看到，在实施他的更改后，我的相机现在可以在 iPhone 上查看：https://mountaintopcondos.com/powdermonkey.html