我正在使用Javascript实现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);
}
}
}
@{
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>