twilio 视频通话 JS/.Net MVC答案

【问题标题】：twilio video call JS/.Net MVCtwilio 视频通话 JS/.Net MVC
【发布时间】：2020-11-16 20:15:01
【问题描述】：

我正在使用 Javascript 和 MVC .net 实现 twilio 视频通话功能。当我执行项目时，Web 浏览器要求提供摄像头和麦克风权限，但它没有显示摄像头。

我在文档中找不到任何相关内容。 https://media.twiliocdn.com/sdk/js/video/releases/1.14.0/docs/index.html

如果有人能找出这里的错误，那就太好了。谢谢

Index.cshtml

@model twilioTest.Models.twilioVideoCall

@{
    ViewBag.Title = "Index";
}

@{
    ViewBag.Title = "Home Page";
}


<div class="jumbotron">
    <p>test</p>

    <div id="myCall"></div>
</div>

@section Scripts {

    @Scripts.Render("~/bundles/jquery")
<script src="//media.twiliocdn.com/sdk/js/video/releases/2.7.0/twilio-video.min.js"></script>
    <script>

    const Video = Twilio.Video;
        Video.connect('@Model.twilioToken', { name: '@Model.room.UniqueName' }).then(room => {
           // debugger;
            console.log('Connected to Room "%s"', room.name);
            console.log('room.participants "%s"', JSON.stringify(room.localParticipant));
    room.participants.forEach(participantConnected);
    room.on('participantConnected', participantConnected);

    room.on('participantDisconnected', participantDisconnected);
    room.once('disconnected', error => room.participants.forEach(participantDisconnected));
        });

     
        function participantConnected(participant) {
            //  debugger;
    console.log('test')
    console.log('Participant "%s" connected', participant.identity);

    const div = document.createElement('div');
    div.id = participant.sid;
    div.innerText = participant.identity;

    participant.on('trackSubscribed', track => trackSubscribed(div, track));
    participant.on('trackUnsubscribed', trackUnsubscribed);

    participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
    trackSubscribed(div, publication.track);
    }
    });
    $("#myCall").html(div);
    //  document.body.appendChild(div);
    }

        function participantDisconnected(participant) {
           // debugger;
    console.log('Participant "%s" disconnected', participant.identity);
    document.getElementById(participant.sid).remove();
    }

        function trackSubscribed(div, track) {
           // debugger;
    div.appendChild(track.attach());
    }

        function trackUnsubscribed(track) {
         //   debugger;
    track.detach().forEach(element => element.remove());
    }
    </script>
}

HomeController.cs

using System;
using System.Collections.Generic;
using Twilio;
using Twilio.Rest.Video.V1.Room;
using Twilio.Base;
using Twilio.Rest.Video.V1;
using Twilio.Jwt.AccessToken;
using System.Web.Mvc;
using twilioTest.Models;

namespace twilioTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()

        {

            const string accountSid = "XXXXXXXXXX";
            const string authToken = "XXXXXXXXXX";
            var apiKeySid = "XXXXXXXXXX";
            var apiKeySecret = "XXXXXXXXXX";
            var identity = "test";
            string roomName = "TESTROOM";


            TwilioClient.Init(accountSid, authToken);
            //create a Room
            var room = RoomResource.Create(uniqueName: roomName);

            //access token
           
            var grant = new VideoGrant(); // Create a video grant for the token
            grant.Room = roomName;
            var grants = new HashSet<IGrant> { grant };

            // Create an Access Token generator
            var token = new Token(accountSid, apiKeySid, apiKeySecret, identity: identity, grants: grants);

            // Serialize the token as a JWT

            twilioVideoCall modelTwVidCall = new twilioVideoCall();
            modelTwVidCall.room = room;
            modelTwVidCall.twilioToken = token.ToJwt().ToString();

            return View(modelTwVidCall);
        }


    }
}

【问题讨论】：

标签： javascript asp.net-mvc twilio twilio-api twilio-video

【解决方案1】：

@{
    ViewBag.Title = null;
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Twilio Video Serverless Demo</title>
</head>
<body>
    <div id="room-controls">
        <video id="video" autoplay muted="true" width="320"
               height="240"></video>
        <button id="button-join">Join Room</button>
        <button id="button-leave" disabled>Leave Room</button>
        <input type="text" id="txtMobile" />
    </div>

    <script src="//media.twiliocdn.com/sdk/js/video/releases/2.3.0/twilio-video.min.js"></script>
</body>
</html>



@Scripts.Render("~/bundles/jquery")
<script src="//media.twiliocdn.com/sdk/js/video/releases/2.7.0/twilio-video.min.js"></script>
<script>
    (() => {
        'use strict';
        const TWILIO_DOMAIN = location.host; //unique to user, will be website to visit for video app
        const ROOM_NAME = 'Room_999';
        const token = "";
        const Video = Twilio.Video;
        let videoRoom, localStream;
        const video = document.getElementById("video");

        $(document).ready(function () {
            //var ExpertPhone = $("#ExpertPhone").val("MobileNo");
            //$.post("/ExpertDashboard/Generate", { mobileNo: "MobileNo" }, function (data) {
            //    token = data.token;
            //});
        });

        // preview screen
        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(vid => {
                video.srcObject = vid;
                localStream = vid;
            })

        // buttons
        const joinRoomButton = document.getElementById("button-join");
        const leaveRoomButton = document.getElementById("button-leave");
        var site = 'https://${TWILIO_DOMAIN}/video-token';
        console.log('site ${site}');
        joinRoomButton.onclick = () => {
            // get access token
            var txtMobile = $("#txtMobile").val();
            $.post("/ExpertDashboard/Generate", { mobileNo: txtMobile }, function (data) {
                const token = data.token;
                console.log(token);
                //connect to room
                Video.connect(token, { name: ROOM_NAME }).then((room) => {
                    console.log('Connected to Room ${room.name}');
                    videoRoom = room;

                    room.participants.forEach(participantConnected);
                    room.on("participantConnected", participantConnected);

                    room.on("participantDisconnected", participantDisconnected);
                    room.once("disconnected", (error) =>
                        room.participants.forEach(participantDisconnected)
                    );
                    joinRoomButton.disabled = true;
                    leaveRoomButton.disabled = false;
                });
            });
        };
        // leave room
        leaveRoomButton.onclick = () => {
            videoRoom.disconnect();
            console.log('Disconnected from Room ${videoRoom.name}');
            joinRoomButton.disabled = false;
            leaveRoomButton.disabled = true;
        };
    })();

    // connect participant
    const participantConnected = (participant) => {
        console.log('Participant ${participant.identity} connected');

        const div = document.createElement('div'); //create div for new participant
        div.id = participant.sid;

        participant.on('trackSubscribed', track => trackSubscribed(div, track));
        participant.on('trackUnsubscribed', trackUnsubscribed);

        participant.tracks.forEach(publication => {
            if (publication.isSubscribed) {
                trackSubscribed(div, publication.track);
            }
        });
        document.body.appendChild(div);
    }

    const participantDisconnected = (participant) => {
        console.log('Participant ${participant.identity} disconnected.');
        document.getElementById(participant.sid).remove();
    }

    const trackSubscribed = (div, track) => {
        div.appendChild(track.attach());
    }

    const trackUnsubscribed = (track) => {
        track.detach().forEach(element => element.remove());
    }
</script>

【讨论】：