ブイキューブトップ
03-6845-0775平日10:00〜18:00受付
無料ガイド
お問い合わせ

Agora.io SDKを利用したライブコマースサンプル(WebRTC版)

公開日:

※2020年の記事です。

 

2018年頃からEC市場でライブコマースをよく見かけるようになりました。
ライブコマースの開発を希望するお客様が増えてきた為、簡易なサンプルを実装しました。
サンプルの方針として、フレームワークを使用すると移植しにくさがあると思いますので、各言語ベタでコーディングしています。

Githubに公開しています

開発環境

macOS Mojave 10.14.1
VisualStudioCode 1.29.1
Chrome 72.0.3626.121
AgoraVideoSDK for Web 2.8.0
PHP 5.5.26
MySQL 5.5.42

機能一覧

・ライブ作成
・ライブ配信(Web SDK)
・ライブ視聴(Web SDK)
・チャット(Signaling SDK)
・ハート送信(Signaling SDK)
・延べ視聴人数/ハート数のリアルタイム表示
・同時視聴数の記録(RESTFull API)

実装のポイント

同時視聴数の記録

実装の手法は様々です。要件に合わせて異なってきます。
今回は、Channelに接続している人＝視聴しているとしてagora.ioが提供しているRESTFull APIを利用しています。

https://docs.agora.io/en/Agora%20Platform/dashboard_restful_communication?platform=All%20Platforms

put_live_count.php
        $channelName = BASE_CHANNEL_NAME . $_GET['live_id'];
            $url = sprintf("%s/%s/%s/%s/%s",REST_API_URL,"channel","user",APP_ID,$channelName);
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_URL, $url);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
            curl_setopt($ch, CURLOPT_USERPWD, REST_API_USER . ":" . REST_API_PASS);
            curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
            $json = curl_exec($ch);
            curl_close($ch);
            $data = json_decode($json, true);
            $count = 0;
            if($data['success'] && isset($data['data']['audience_total'])){
                $count = $data['data']['audience_total'];
            }
            $sql = sprintf("insert into session (live_id,count,created_at) value(%s,%s,now())",$pdo->quote($_GET['live_id']),$pdo->quote($count));
            $pdo->query($sql);
そのほか、最新の実装例・サンプルコード記事はこちら
ガイドブックダウンロード
ビデオ通話・ライブ配信API/SDK「Agora」

【最新版】超低遅延API/SDK「Agora」ガイドブック

通話・配信遅延30-200ms！100万人の視聴対応！未経験者から専門家まで、誰でも読みやすいAgoraのガイドブックをダウンロードしませんか。

無料ダウンロード
ブイキューブ

執筆者ブイキューブ

Agoraの日本総代理店として、配信/通話SDKの提供だけでなく、導入支援から行い幅広いコミュニケーションサービスに携わっている。
関連記事

2022年05月13日

Agora.io Dashboard RESTful APIの利用例
  • 実装例・サンプルコード
  • Agora
Agora.ioではSDKの他に、ユーザーの入室制限や、チャネルの利用状況を確認できるDashboard RESTful APIがあります。 公式ドキュメント(英文) システム組み込みにおいて利用頻度の高い機能をピックアップします。

2023年03月10日

ライブコマースシステムで必要な開発項目
  • Agora
  • 実践
  • ライブ配信
アジア圏ではライブコマース(Live EC)で顧客とのエンゲージメントが高まる傾向にあります。物販であったり、オークションであったり、オンラインゲームを絡めて楽しみながらショッピングができる事例もでています。又、ライブコマース視聴者の5割強が商品を購入したというレポートもあります。物販ではありませんが、占いやオンラインサロンもライブコマースと同様の機能が必要となります。 このブログではライブコマースシステムで必要となる機能一覧と実装方法、活用できるSDKやライブラリについて解説します。

2023年02月22日

ライブコマース：オンラインショッピングの未来が到来
  • Agora
  • 基礎知識
  • ライブ配信
※この投稿は、Agoraの日本総代理店であるブイキューブが、Agoraブログを翻訳した記事です。 ※一部、日本向けに調整しています。 eコマースの世界で、ライブコマースという新しいトレンドが起こっています。ライブコマースとは、ライブ配信される映像の中で顧客が買い物をする、新しいオンラインショッピングの形です。この新しいオンラインショッピングは、アジアではすでに大人気で、アメリカでも波及し始めています。この記事では、ライブコマースとは何か、そしてそれがあなたのビジネスにとってどのような意味を持つのかを探ります。

2024年08月29日

ライブ映像配信のユーザーエクスペリエンスの最適化
  • Agora
  • 技術動向
  • ライブ配信
※この投稿は、Agoraの日本代理店であるブイキューブが、Agoraブログを翻訳した記事です。 ライブストリームの映像の映りが悪くて止まる状態での視聴は、どのくらいの時間が我慢できますか。映像コンテンツが重要視されている現在のデジタル環境では、ストリーミング映像のクオリティーがユーザーエクスペリエンスに大きな影響を与えています。クオリティーの高いリアルタイムの映像配信サービスをユーザーに提供するにあたって、どの手段が取れそうですか。本記事ではライブ映像配信のユーザーエクスペリエンスの最適化の方法についてご紹介します。

2022年05月16日

ライブコマースシステム構築の「はまりどころ」と「対策」
  • 実装例・サンプルコード
  • Agora
  • WebRTC
近年、ライブコマースの需要が高まってきています。リアルタイムなライブ感が生み出す販売促進効果が期待できるようです。 おもにインフルエンサーによる配信が人気のようですね。
    タグ一覧
    人気記事

    2026年10月06日

    【2026年最新】ジッター（ジッタ）とレイテンシー（レイテンシ）の違い｜原因・許容値・測定方法と改善策

    2026年06月26日

    HLS（HTTP Live Streaming）とは？仕組み・遅延・LL-HLSとの違いを解説

    2026年10月02日

    レイテンシー（レイテンシ）とは？ 原因・測定と遅延の短縮方法

    2026年06月30日

    WebRTCサーバー構成の完全ガイド｜シグナリング／STUN・TURN／SFUの役割と構成例【2026年版】

    2025年09月06日

    WebRTCの仕組みを図解で解説｜動作の流れ・必要サーバー・基本用語
    新着記事

    2026年10月13日

    表現力のある革新的な声をリアルタイム会話AIに。Gemini 3.8 Flash TTS × Agoraで始める次世代ボイスAI

    2026年10月06日

    【2026年最新】ジッター（ジッタ）とレイテンシー（レイテンシ）の違い｜原因・許容値・測定方法と改善策

    2026年10月02日

    レイテンシー（レイテンシ）とは？ 原因・測定と遅延の短縮方法

    2026年09月18日

    WebRTC SDK比較｜Agora・Twilio・Amazon Chime SDK等7サービスを徹底比較【2026年版】

    2026年09月18日

    Google Gemini 3.5 Transcribe × Agora Conversational AIでリアルタイム音声AIを構築する

    先頭へ戻る