使用oembed端点获取instagram的视频媒体源 [英] Get instagram's video media source using oembed endpoints
问题描述
我有一段(jQuery)ajax代码已经愉快地工作了大约9个月，直到最后两周左右.
I have a piece of (jQuery) ajax code that has been happily working for about 9 months until the last couple of weeks or so.
此代码使用Instagram的嵌入端点，使我可以获取媒体来源(图片或视频)脱离普通的Instagram链接(如http://instagram.com/p/BUG/)，无论用户是谁，无需都需要access_token.
This code uses Instagram's embedding endpoints that allows me to get the media source (image or video) out of a normal Instagram link like http://instagram.com/p/BUG/ regardless the user and without needing an access_token.
简化示例:
var URL = "http://api.instagram.com/oembed?url=http://instagram.com/p/BUG/";
$(document).ready(function () {
$.ajax({
url: URL,
dataType: "jsonp",
cache: false,
success: function (response) {
console.log(response.url);
},
error: function () {
console.log("couldn't process the instagram url");
}
});
});
在上面的代码中，response.url将返回完整的媒体URL源，如:
In the code above, response.url would return the full media URL source like :
http://photos-a.ak.instagram.com/xxxx/1234_123456123_123456_n.jpg // image or
http://distilleryvesper3-15.ak.instagram.com/b0c957463548362858_101.mp4 // video
然后，我可以使用返回的URL将媒体文件嵌入到我的网页中.
Then I could use the returned URL to embed the media file in my webpage.
注意:
由于此想法是使用媒体端点来获取所有Instagram链接的URL源，而不论用户是谁不是一个选择.
Since the idea is to get the URL source of any Instagram link regardless the user, using media endpoints is not an option.
Instagram的突出端点使您可以获取json响应，直到最后两周都具有以下结构:
Instagram's oembed endpoints allows you to GET a json response, which until the last couple of weeks had this structure :
{
"provider_url" : "http:\/\/instagram.com\/",
"media_id" : "123456789_123456789",
"title" : "the title",
"url" : "http:\/\/photos-a.ak.instagram.com\/hphotos-ak-xfp1\/12345678_123456789012345_1234567890_n.jpg",
"author_name" : "{the user name}",
"height" : 640,
"width" : 640,
"version" : "1.0",
"author_url" : "http:\/\/instagram.com\/{the user name}",
"author_id" : 123456789,
"type" : "photo",
"provider_name" : "Instagram"
}
您可能会注意到，我的ajax代码对属性名称url特别感兴趣，该属性名称包含完整媒体的URL.
As you may noticed, my ajax code was particularly interested in the property name url, which contains the full media's URL.
通知，此json响应(如今天)仍然适用于Instagram图片，但是，如果原始Instagram的链接是视频，让我们使用真实的例如: http://instagram.com/p/mOFsFhAp4f/(CocaCola(c))json响应不再返回任何url键.
Notice that this json response (as today) is still valid for Instagram images, however, if the original Instagram's link is a video, let's use a real example : http://instagram.com/p/mOFsFhAp4f/ (CocaCola(c)) the json response doesn't return any url key anymore.
似乎在引入网络嵌入 Instagram之后已决定仅在视频的(嵌入)json响应中用html属性替换键url，该属性包含要嵌入的iframe，如:
It seems that after the introduction of web embeds Instagram has decided to replace the key url by a html property in their (oembed) json response for videos only, which contains the iframe to embed like :
{
...
"html" : "\u003ciframe src=\"http:\/\/instagram.com\/p\/BUG\/embed\" width=\"616\" height=\"716\" frameborder=\"0\" scrolling=\"no\" allowtransparency=\"true\"\u003e\u003c\/iframe\u003e",
...
}
...，当然，由于response.url未定义，这破坏了我的代码.
... and of course, that breaks my code since response.url is undefined.
Instagram json响应中的更改后，如何获取完整视频的URL?
不幸的是，我在Instagram的开发人员站点中找不到任何适当的文档或更改日志(他们的API不错，但文档却很差.)
Unfortunately I couldn't find any proper documentation or a change log in Instagram's developers site (they have a great API but poor documentation.)
请注意，该问题是关于Instagram API(v1)嵌入端点的，而不是有关jQuery或ajax的问题.
Please notice that the question is about Instagram API (v1) embedding endpoints rather than a jQuery or ajax question.
我正在寻找(可能是一个未记录的)Instagram的API选项，端点，预埋或其他内容(不需要access_token)，使我能够检索到媒体视频的直接链接(最好是在json响应之后)不管用户是什么，还是不愿意考虑一个不太hacky的解决方法，都无法从普通的Instagram链接中删除.
I am looking for (an undocumented perhaps) Instagram's API option, endpoint, oembed or else (that doesn't require access_token) that allows me to retrieve the direct link to the media video (after a json response preferably) out of a normal Instagram link regardless the user ...or willing to consider a not too hacky workaround.
推荐答案
更新 [2015年3月]:有关此解决方案的扩展和更新版本，请访问 http://www.picssel.com/build-a-simple-instagram-api-case -study/
UPDATE [March 2015] : For an extended and updated version of this solution, please visit http://www.picssel.com/build-a-simple-instagram-api-case-study/
@ProllyGeek的答案提供了一种很好的解决方法，可以抓取Instagram视频页面(当之无愧的赏金)，但是它依赖于 whateverorigin.org 第三方服务，除非该服务最终变得不可用，否则它将正常运行.
@ProllyGeek's answer provided a good workaround to scrape the Instagram video page (well deserved bounty), however it relies on the whateverorigin.org third-party service, which will work fine unless the service eventually becomes unavailable.
由于在生产环境中发生了最新的情况，因此我不得不寻找一种更可靠的替代方法，因此我决定使用php的
Since the latest already happened to me in a production environment, I had to look for a more reliable alternative so I decided to use php's file_get_contents to scrape the video link from an own-hosted PHP module.
我基本上遵循@ProllyGeek提出的相同逻辑，但将其翻译成PHP:
I basically followed the same logic proposed by @ProllyGeek but translated to PHP so:
getVideoLink.php 模块:
<?php
header('Content-Type: text/html; charset=utf-8');
function clean_input($data){
$data = trim($data);
$data = stripslashes($data);
$data = strip_tags($data);
$data = htmlspecialchars($data);
return $data;
};
$instalink = clean_input( $_GET['instalink'] );
if (!empty($instalink)) {
$response = clean_input( @ file_get_contents( $instalink ) );
$start_position = strpos( $response ,'video_url":"' ); // the start position
$start_positionlength = strlen('video_url":"'); // string length to trim before
$end_position = strpos($response ,'","usertags'); // the end position
$mp4_link = substr( $response, ( $start_position + $start_positionlength ), ( $end_position - ( $start_position + $start_positionlength ) ) );
echo $mp4_link;
};
?>
当然，您可能需要手动分析响应以了解所需内容.
Of course, you may need to analyze the response manually to know what you are looking for.
然后从我的主页对PHP模块进行AJAX调用:
Then the AJAX call to the PHP module from my main page :
var instaLink = "http://instagram.com/p/mOFsFhAp4f/"; // the Coca Cola video link
jQuery(document).ready(function ($) {
$.ajax({
url: "getVideoLink.php?instalink="+instaLink,
dataType : "html",
cache : false,
success : function (data) {
console.log(data); // returns http://distilleryvesper3-15.ak.instagram.com/b0ce80e6b91111e3a16a122b8b9af17f_101.mp4
},
error : function () {
console.log("error in ajax");
}
});
}); // ready
假定您的主机支持php以使用此方法.
It's assumed your host supports php to use this method.
编辑 [2014年11月19日]
EDIT [November 19, 2014]
我修改了 getVideoLink.php 模块(现在为 getInstaLinkJSON.php )，以实际从特定Instagram媒体链接获取 JSON 信息.就像http://instagram.com/p/mOFsFhAp4f/
I have modified the getVideoLink.php module (now getInstaLinkJSON.php) to actually get the JSON information from an specific Instagram media link like http://instagram.com/p/mOFsFhAp4f/
这不仅比抓取视频的URL有用，而且还可以用于图像.
This is much more useful than just scraping the video's URL and can be used for images too.
新的 getInstaLinkJSON.php 代码:
<?php
function clean_input($data){
$data = trim($data);
$data = strip_tags($data);
return $data;
};
// clean user input
function clean_input_all($data){
$data = trim($data);
$data = stripslashes($data);
$data = strip_tags($data);
$data = htmlspecialchars($data);
return $data;
};
$instaLink = clean_input_all( $_GET['instaLink'] );
if( !empty($instaLink) ){
header('Content-Type: application/json; charset=utf-8');
$response = clean_input( @ file_get_contents($instaLink) );
$response_length = strlen($response);
$start_position = strpos( $response ,'window._sharedData = ' ); // the start position
$start_positionlength = strlen('window._sharedData = '); // string length to trim before
$trimmed = trim( substr($response, ( $start_position + $start_positionlength ) ) ); // trim extra spaces and carriage returns
$jsondata = substr( $trimmed, 0, -1); // remove extra ";" added at the end of the javascript variable
echo $jsondata;
} elseif( empty($instaLink) ) {
die(); //only accepts instaLink as parameter
}
?>
我正在清理用户的输入和file_get_contents()响应，但是我没有从最后一个字符中删除斜杠或 HTML字符，因为我将返回 JSON 响应.
I am sanitizing both the user's input and the file_get_contents() response, however I am not stripping slashes or HTML characters from the last since I will be returning a JSON response.
然后调用AJAX:
var instaLink = "http://instagram.com/p/mOFsFhAp4f/"; // demo
jQuery.ajax({
url: "getInstaLinkJSON.php?instalink=" + instaLink,
dataType : "json", // important!!!
cache : false,
success : function ( response ) {
console.log( response ); // returns json
var media = response.entry_data.DesktopPPage[0].media;
// get the video URL
// media.is_video : returns true/false
if( media.is_video ){
console.log( media.video_url ); // returns http://distilleryvesper3-15.ak.instagram.com/b0ce80e6b91111e3a16a122b8b9af17f_101.mp4
}
},
error : function () {
console.log("error in ajax");
}
});
编辑 [2020年5月20日]
EDIT [May 20, 2020]
当前正在使用PHP
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
function clean_input($data){
$data = trim($data);
$data = strip_tags($data);
return $data;
};
// clean user input
function clean_input_all($data){
$data = trim($data);
$data = stripslashes($data);
$data = strip_tags($data);
$data = htmlspecialchars($data);
return $data;
};
$instaLink = clean_input_all( $_GET['instaLink'] );
if( !empty($instaLink) ){
header('Content-Type: application/json; charset=utf-8');
$response = clean_input( @ file_get_contents($instaLink) );
$response_length = strlen($response);
$start_position = strpos( $response ,'window._sharedData = ' ); // the start position
$start_positionlength = strlen('window._sharedData = '); // string length to trim before
$trimmed = trim( substr($response, ( $start_position + $start_positionlength ) ) ); // trim extra spaces and carriage returns
$jsondata = substr( $trimmed, 0, -1); // remove extra ";" added at the end of the javascript variable
$jsondata = explode('window.__initialDataLoaded', $jsondata);
echo substr(trim($jsondata[0]), 0, -1);
} elseif( empty($instaLink) ) {
die(); //only accepts instaLink as parameter
}
?>
这篇关于使用oembed端点获取instagram的视频媒体源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
