ミニプログラム 1v1 ビデオ通話の複数の実装方法

情報 2023-07-16 12:30:18 訪問数: null

記事ディレクトリ

序文

例: この記事では、アプレットの 1 対 1 ビデオ通話を実現するためのさまざまな方法をどのように見つけたかについて説明します。

1. WeChat アプレットでの 2 人の音声およびビデオ対話 (放棄されたピット)

現在、アクティベーションの申請ができるのは
、以下の国内法人向けミニプログラムカテゴリのみです。まずカテゴリの審査に合格し、ミニプログラム管理のバックグラウンド「開発」-「開発管理」でインターフェース権限をアクティベートする必要があります。 " - "インターフェース設定"。

ツールを使用します - ビデオ カスタマー サービス カテゴリ

審査には半日程度かかります

ここに画像の説明を挿入

2 人ビデオ通話ドキュメント
2 人音声およびビデオ通話機能 (1v1 VoIP) を通じて、ユーザーはミニ プログラム内で直接 1 対 1 のビデオ通話または音声通話を行うことができ、ミニ プログラムのサービス品質が向上します。また、その機能に必要な開発コストは非常に安価です。

基本ライブラリ 2.20.1 からサポート

WeChat アプレット フロントエンド インターフェイス

  1. 2 人チャットを有効にする: wx.setEnable1v1Chat
  2. 2 人チャットに参加 (作成): wx.join1v1Chat

使用条件は、WeChat サービス マーケットにアクセスして開く必要があります。
ここに画像の説明を挿入
まず、デフォルトでは、最初は無料で購入でき、お金が必要な場合は他のものは購入しないでください。地元の暴君は例外だ。
ここに画像の説明を挿入
注文を送信するだけです
ここに画像の説明を挿入

WeChat では、1 つのミニ プログラムに対して自然月あたり 1,000 分の無料通話時間が提供されます。1 分間の無料通話時間から 1 分間の音声通話時間が差し引かれ、15 分間の無料通話時間から 1 分間のビデオ通話時間が差し引かれます。超過分は別途請求させていただきます。自由時間を取得してパッケージを購入するには、WeChat サービス マーケットにアクセスする必要があります。

次に、WeChat アプレットのフロントエンド インターフェイスのテストを開始します。

    wx.setEnable1v1Chat({
    
    
      enable: true,
      success(res){
    
    
          console.log(res, 'res')
          wx.join1v1Chat({
    
    
              listener:{
    
    
                  nickname: '接听1',
                  headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
                openId: '',//获取小程序用户的openId
              },
              caller:{
    
    
                  nickname: '呼叫1',
                  headImage: 'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669741200&t=76c06e790922f54389ce78305245b994',
                  openId: '',//获取小程序用户的openId
              },
              success(res){
    
    
                  console.log('[startCallWx]res', res)
              },
              fail(err){
    
    
                  console.log('[startCallWx]err', err)
              }
          })
          
      },
      fail(err) {
    
    
          console.error("拨通失败", err)
      }
    })

ログイン資格情報の検証。wx.loginインターフェースを介して一時的なログイン資格情報コードを取得し、それを開発者サーバーに渡してこのインターフェースを呼び出し、ログイン プロセスを完了します。
auth.code2セッション

    let that=this;

    wx.login({
    
    
      success (res) {
    
    
        if (res.code) {
    
    
          console.log(res,'res')
          wx.request({
    
    
            url:`https://api.weixin.qq.com/sns/jscode2session?appid=xxx&secret=xxx&js_code=${
      
      res.code}&grant_type=authorization_code`,
            success:(res)=>{
    
    
              console.log(res);
                 that.setData({
    
    
                  openId:res.data.openId
              })
            }
          })
        }
      }
    })

テスト後、2 台の携帯電話は通話をウェイクアップするためにアプレットに入る必要があります。もう 1 台の携帯電話は接続されていますが、もう 1 台は相手が応答していないことを示し続けます。バグがあり、
WeChat公式コミュニティに問い合わせましたが、誰も回答しませんでした。廃坑

2. Tencent Cloud リアルタイム オーディオとビデオ (高価)

UI統合ソリューションを含む

この記事では、TUICallKit コンポーネントへのアクセスを最短時間で完了する方法を紹介します。このドキュメントに従うと、30 分以内に完全な UI インターフェイスを備えたビデオ通話アプレットを取得できます。基本的な機能を次の図に示します。
ここに画像の説明を挿入

ミニプログラムデモ体験

音声およびビデオ通話アプレットを直接体験したい場合は、「デモ体験」をクリックしてアプレットの QR コードをスキャンします。
新しいプロジェクトを直接実行したい場合は、WeChat ミニ プログラム デモのクイック実行を読んでください。
TUICallKit コンポーネントを自分で統合し、音声およびビデオ通話アプレットを構築したい場合は、このドキュメントに従ってください。

開発環境の要件

WeChat アプリ iOS の最小バージョン要件: 7.0.9
WeChat アプリ Android の最小バージョン要件: 7.0.8
ミニ プログラム基本ライブラリの最小バージョン要件: 2.10.0

警告:
ミニ プログラム テスト アカウントには使用権限がないため、エンタープライズ ミニ プログラム アカウントを使用して、開発に関連する権限を申請してください。
WeChat 開発者ツールはネイティブ コンポーネント (つまり、タグ) をサポートしていないため、エクスペリエンスは実際のデバイスで実行する必要があります。

小規模なプログラム開発の準備

ステップ 1: Enterprise Mini プログラムを開く

ミニプログラム プッシュプル ストリーム タグは個人用ミニプログラムをサポートせず、エンタープライズ タイプのミニプログラムのみをサポートします。次の図に示すように、登録時に件名タイプを企業として入力する必要があります。
ここに画像の説明を挿入

ステップ 2: アプレット コンソールでリアルタイム オーディオおよびビデオ インターフェイスを開く

ミニプログラムのプッシュプルストリームタグの使用許可は、現時点では限られたカテゴリーのみに公開されており、具体的なサポートカテゴリーについては、こちらのアドレスを参照してください。
カテゴリの要件を満たす小規模なプログラムの場合は、[WeChat 公式アカウント プラットフォーム] > [開発] > [開発管理] > [インターフェイス設定]でコンポーネントの権限を自動的に有効にする必要があります。
ここに画像の説明を挿入

ステップ 3: アプレット コンソールでドメイン名を設定する

WeChat公式プラットフォーム > 開発 > 開発管理 > 開発設定 > サーバードメイン名 で、リクエストの正当なドメイン名とソケットの正当なドメイン名を設定します。
合法的なドメイン名をリクエストします:

https://official.opensso.tencent-cloud.com
https://yun.tim.qq.com
https://cloud.tencent.com
https://webim.tim.qq.com
https://query.tencent-cloud.com
https://web.sdk.qcloud.com

ソケットの正当なドメイン名:

wss://wss.im.qcloud.com
wss://wss.tim.qq.com

図に示すように、サーバーのドメイン名の構成は次のとおりです。
ここに画像の説明を挿入

TUICallKitソースコードの統合

ステップ 1: アプレット プロジェクトを初期化する

  1. WeChat 開発者ツールでミニ プログラム プロジェクトを作成し、テンプレートを使用しないことを選択します。
    ここに画像の説明を挿入

  2. 新しいターミナルを作成します。
    ここに画像の説明を挿入

  3. npm init -y コマンドを実行して、package.json ファイルを生成します。

npm init -y

ここに画像の説明を挿入

ステップ 2: TUICallKit コンポーネントをダウンロードしてインポートする

  1. TUICallKit コンポーネントをダウンロードします。
npm i @tencentcloud/call-uikit-wechat

マック版

mkdir -p ./TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./TUICallKit

window版

xcopy node_modules\@tencentcloud\call-uikit-wechat .\TUICallKit /i /e
  1. 上記のコマンドを実行すると、TUICallKit コンポーネントを含む TUICallKit フォルダーがディレクトリに生成されます。ディレクトリは次のとおりです。
    ここに画像の説明を挿入
  2. npm をビルドし、WeChat 開発者ツール > npm をビルドし、miniprogram_npm ディレクトリを追加します。ディレクトリは次のとおりです。
    ここに画像の説明を挿入

ステップ 3: SDKAppID、SecretKey を取得する

  1. IM コンソールにログインし、[新しいアプリケーションの作成] をクリックし、ポップアップ ダイアログ ボックスにアプリケーション名を入力して、[OK] をクリックします。
  2. 作成したアプリケーションをクリックして基本構成ページに入り、SDKAppID と SecretKey を取得します。
  3. 基本構成ページで、「無料トライアル」をクリックして、TUICallKit の 7 日間の無料トライアル サービスをアクティブにします。
  4. 公式アプリケーションを起動する必要がある場合は、「正式バージョンを購入」をクリックして購入ページに入ることができます。
    ここに画像の説明を挿入

ステップ 4: UserSig を取得する

クライアントが生成した

UserSig の適時性により、TUICallKit を長期間使用する必要がある場合は、この方法を使用することをお勧めします。

  1. 以下の図に示すように、「デバッグ フォルダーのダウンロード」をクリックして、デバッグ ディレクトリをプロジェクトにコピーします。
    ここに画像の説明を挿入
  2. GenerateTestUserSig.js ファイルの SDKAppID と SecretKey を入力します。
    ここに画像の説明を挿入
コンソールの世代

TUICallKit をすぐに体験したい場合は、コンソールの補助ツールを使用して一時的に使用可能な UserSig を生成できます。

ここに画像の説明を挿入

ステップ 5: TUICallKit コンポーネントを呼び出す

Tencent Cloud ドキュメントへようこそ。確認してください

最後に、
アプリケーションの作成には 7 日間の無料トライアルがあり、正式にオンラインで展開したい場合は、月額 1,000 元以上の費用がかかることに注意してください。スタートアップ企業には不向きです。

UI統合ソリューションがない

この記事では主に、WeChat ミニ プログラム バージョンの TRTC デモをすばやく実行する方法を紹介します。関連するコードは、 Githubの WXMini ディレクトリから入手できます。デモの最初の 3 つの機能項目は、次の 3 つの異なるアプリケーション シナリオを示しています。
ボイス チャット ルーム: 純粋な音声対話、複数人での対話型ボイス チャットのサポート、およびミキシングや残響などの音響効果です。オンライン人狼殺やオンライン音声ブロードキャストなどのソーシャルシーンに適しています。
2 人通話: Web IM SDKを使用した 1 対 1 のビデオ通話により、オンライン相談、オンライン顧客サービス、および対面でのコミュニケーションが必要なその他のコミュニケーション シナリオを実現できます。
多人数会議: マルチチャンネルのビデオ通話や大小の画面など、ビデオ会議に関連する高度な機能をサポートし、リモート トレーニング、オンライン教育、その他のシナリオに適しています。
ここに画像の説明を挿入

詳細については、Tencent Cloud のドキュメントをご確認ください。

3. zego をすぐに購入する (現在、最もコスト効率の高いものの 1 つ)

サンプルソースコード

サンプルコード実行ガイド

サンプル ソース コードは WeChat ネイティブ コンポーネント専用です。
このドキュメントでは、アプレット ネイティブ フレームワークのサンプルのアクセス ガイドラインのみを提供します。uni-app フレームワークのサンプルのアクセス ガイドラインと関連注意事項については、上記の uni-app フレームワークのサンプル ソース コードの readme.md ファイルを参照してください。

ソースコードのディレクトリ構造の例

.
├── components  # 小程序组件
│   ├── zego-player # zego-player组件，封装了live-player拉流
│   └── zego-pusher # zego-pusher组件，封装了live-pusher推流
├── libs    # 依赖库文件夹，存放如sdk的js文件等
│   └──ZegoExpressMiniProgram.js    # 小程序sdk
├── miniprogram_npm # 一些项目依赖的npm包
│   └── miniprogram-api-promise # 用于扩展微信小程序api支持promise
├── pages   # 小程序页面 
│   ├── base    # 视频直播《基础推拉流》
│   ├── base_zego   # 视频直播 推拉流组件
│   ├── bgm     # 视频直播 背景音
│   ├── cdn     # 视频直播 CDN
│   ├── customlive  # 自定义推拉流
│   ├── main    # 首页
│   ├── message     # 视频直播《实时消息》
│   ├── mix     # 视频直播 混流
│   ├── multi   # 重试 多节点
│   ├── native      # 基础演示 摄像头、麦克风等
│   ├── setting     # 自定义设置 设置APPID
│   ├── snapshot    # 视频直播 截图
│   └── tokenRole   # token鉴权 token v3
├── resource    # 资源文件夹，存放如图片等静态资源
├── script      # 一些测试脚本
├── utils       # 存放共享的工具类、方法等的js文件夹
├── app.js      # 微信小程序的入口文件
├── app.json    # 微信小程序公共设置
├── app.wxss    # 微信小程序全局样式
├── package.json    # npm包描述文件
├── project.config.json # 微信小程序项目配置描述文件
└── sitemap.json    # sitemap配置文件，用于配置小程序及其页面是否允许被微信索引

サンプルコードを実行する

サンプルコード内の SDK はベータ版です。製品リリースには使用しないでください。
ルームへのログインに必要なトークンを取得するには、「トークン認証の使用」を参照してください。すぐにデバッグする必要がある場合は、コンソールによって生成された一時トークンを使用できます。詳細については、「コンソール - 開発支援」を参照してください。
デバッグには実デバイスを使用してください。デバッグの際には、WeChat 開発者ツールで、ドメイン名を検証しないチェック ボックスを設定してください。

  1. ダウンロードしたプロジェクトをエディター (vscode、webstorm など) で開きます。
  2. app.jsファイル内のzegoAppIDとserverをそれぞれ前提条件で取得したAppIDとServerに変更し、同時にuserIDとtokenに正しい値を渡さないとサンプルコードが正常に動作しません。

開発者によるデバッグを容易にするために、ZEGO コンソールには一時トークンを生成する機能が用意されています。開発者は一時トークンを直接取得して使用することもできますが、開発者自身のオンライン環境では、独自のサーバーを通じてトークンを生成してください。

ここに画像の説明を挿入
3. WeChat 開発者ツールを使用してサンプル ソース コードを開き、[ローカル設定] で、[正当なドメイン名、Web ビュー (ビジネス ドメイン名)、TLS バージョン、および HTTPS 証明書を検証しない] オプションをオンにします。
ここに画像の説明を挿入
4. サンプル コードをコンパイルして実行します。携帯電話を使用してコードをスキャンしてプレビューしてください。

ここに画像の説明を挿入

リアルタイムのオーディオおよびビデオ機能を体験してください

実デバイス上でプロジェクトを実行すると、正常に実行されると、ローカル ビデオ画面が表示されます。

体験の便宜のために、ZEGO はWeb 側のデバッグ サンプルを提供しています . このページで、同じ AppID と RoomID を入力し、同じルームに参加して実際のデバイスと通信するには、別の UserID を入力します。音声通話とビデオ通話が正常に開始されると、相手側で音声が聞こえ、相手側でビデオが表示されます。

要約する

Instant zego は毎月 1,000 分の無料時間を提供しており、基本的にデモ表示を満たしています。
Tencent Cloud アカウントには 1,000 分がありますが、翌月以降は削除されません。

おすすめ

転載: blog.csdn.net/qzmlyshao/article/details/130898427
おすすめ
ライナスは「ドッグフードを食べる」ことに最も積極的！
Open Source Daily | Winamp プレーヤーがオープンソースになりつつある; 生成 AI の戦いは第 2 ラウンドにエスカレート; AI はバブルの初期段階に入った; Yongming を Alibaba Cloud に導入しますか?
ランキング
C言語プログラミングの最新の方法（第2回）第12章回答（自分で書いた回答、継続的に更新）
フレームワークの蜂のアップロードファイルに移動します
タイトルバーシリーズ：タイトルバーで遭遇したピットを非表示にする
Unityはゲームオブジェクトの様々な状況を取得します
N個の異なるボールは、Mどのように多くの種類のプログラムのと同じ袋に入れられますか？
オブジェクト指向のクラス、オブジェクト21
C ++オブジェクト指向プログラミングの研究ノート（8）
P3954 [NOIP2017 普及组] 成绩
分業のプロセス間通信 - ロック
ハッカーは通常、DOSコマンドウィンドウを使用します
アーカイブ
もっと
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)

コードワールド

© 2018 codetd.com