4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Sora JavaScript SDKを使ってみた

Last updated at Posted at 2020-02-12

はじめに

時雨堂さんのSoraを使ったライブ配信を試しました。
(ウソ穴という個人開発のシステムで使えるか試してみたかった→動いた!)

今回は、ライブ配信するところまでを紹介します。

参考サイト

こちらのサイトを参考にさせて頂きました。

環境

  • Webサーバー
    • Windows10 / Nodejs v12.13.1 (オレオレ証明書あり)
  • 映像配信の端末
    • Windows10
    • iOS 13.3.1
  • 映像受信の端末
    • Windows10

作りかた

では、作っていきます。

1.Sora Laboにログイン

サイト(https://sora-labo.shiguredo.jp/)にアクセスしアカウントを登録し、以下3つの情報を取得します。

  • シグナリング URL(wss://ではじまるもの)
  • シグナリングキー(signaling_key)
  • channelId ※ {{github-id}}@sora-labo

2.sora.min.jsを取得

git bash で取得します

$ curl -OL https://raw.githubusercontent.com/shiguredo/sora-js-sdk/master/dist/sora.min.js

3.配信/受信サイトを用意

こちらのサイトからupstream.htmldownstream.htmlを取得する。channelIdとsignaling_keyを自分のものに修正します。

image.png

upstream.html
<html lang="ja">
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <video id="local-video" autoplay controls muted></video>
    <script type="text/javascript" src="./js/sora.min.js"></script>
    <script type="text/javascript">
     const channelId = 'xxxxxxxxx@sora-labo';
     const signalingUrl = 'wss://xxxxxxxxxxxxxxxx';
     const metadata = {"signaling_key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"};

     const debug = true;
     const sora = Sora.connection(signalingUrl, debug);
     let options = {
             audio: true,
             audioCodecType: 'OPUS',
             audioBitRate: 96,
             video: true,
             videoCodecType: 'H264',
             videoBitRate: 1500,
         }
     const publisher = sora.publisher(channelId, metadata, options);
     let constraints = {
             audio: true,
             video: {
                 width: 640,
                 height: 480,
                 frameRate: 20,
             }
         }
     navigator.mediaDevices.getUserMedia(constraints)
          .then(stream => publisher.connect(stream))
          .then(stream => {
              document.querySelector('#local-video').srcObject = stream;
          })
          .catch(e => { console.error(e); })
    </script>
    </body>
</html>
downstream.html
<head>
    <meta charset="utf-8">
</head>
<body>
    <video id="remote-video" autoplay controls muted></video>
    <script type="text/javascript" src="./js/sora.min.js"></script>
    <script type="text/javascript">
     const channelId = 'xxxxxxxxx@sora-labo';
     const signalingUrl = 'wss://xxxxxxxxxxxxxxxx';
     const metadata = {"signaling_key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"};

     const debug = true;
     const sora = Sora.connection(signalingUrl, debug);
     let options = {
         audio: true,
         audioCodecType: 'OPUS',
         audioBitRate: 96,
         video: true,
         videoCodecType: 'H264',
         videoBitRate: 1500,
     }
     const subscriber = sora.subscriber(channelId, metadata, options);

     subscriber.connect()
               .then(stream => {
                   document.querySelector('#remote-video').srcObject = stream;
               })
               .catch(e => {
                   console.error(e);
               });
    </script>
</body>
</html>

ファイル構成

$ tree
.
├── downstream.html
├── upstream.html
└── js
    └── sora.min.js
  • 配信サイト
    • 例: https://{{WebサーバーのIPアドレス}}:{{ポート番号}}/upstream.html
  • 受信サイト
    • 例: https://{{WebサーバーのIPアドレス}}:{{ポート番号}}/downstream.html

これで完成です。

動作確認

  • 配信端末で、配信サイトhttps://{{WebサーバーのIPアドレス}}:{{ポート番号}}/upstream.htmlを開く
  • 受信端末で受信サイトhttps://{{WebサーバーのIPアドレス}}:{{ポート番号}}/downstream.htmlを開く

配信端末のカメラ映像を受信端末で表示できたら成功です。
配信端末がiPhoneの場合は、配信開始ボタンをタップすると配信が開始されます。

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?