问题

我理解，您需要将上面的英文代码段翻译成中文。以下是翻译后的内容：

var startCameraBtn = document.querySelector('#start-camera-btn');
var startRecordingBtn = document.querySelector('#start-recording-btn');
var stopRecordingBtn = document.querySelector('#stop-recording-btn');
var retakeRecordingBtn = document.querySelector('#retake-recording-btn');
var saveRecordingBtn = document.querySelector('#save-recording-btn');
var publishJobBtn = document.querySelector('#publish-job-btn');
var video = document.querySelector('video');

var recorder; // 全局可访问
var blob;
var mimeType;  // "video/webm;codecs=vp9";
var videoFormat; //webm

check_user_browser();

function captureCamera(callback) {
    navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
        callback(camera);
        console.log("摄像头已启动");
    }).catch(function(error) {
        alert('无法捕获摄像头。请检查控制台日志。');
        console.error(error);
    });
}

function stopRecordingCallback() {
    video.src = video.srcObject = null;
    video.muted = false;
    video.volume = 1;
    blob = recorder.getBlob()
    video.src = URL.createObjectURL(blob);
    
    //recorder.camera.stop();
    //recorder.destroy();
    //recorder = null;
}

function startCamera(){
    this.style.display = "none";
    saveRecordingBtn.style.display = "none";
    startRecordingBtn.style.display = "block";
    
    captureCamera(function(camera) {
        video.muted = true;
        video.volume = 0;
        video.srcObject = camera;

        recorder = RecordRTC(camera, {
            type: 'video',

            // 音频/webm
            // 音频/webm;codecs=pcm
            // 视频/mp4
            // 视频/webm;codecs=vp9
            // 视频/webm;codecs=vp8
            // 视频/webm;codecs=h264
            // 视频/x-matroska;codecs=avc1
            // 视频/mpeg -- 任何浏览器均不支持
            // 音频/wav
            // 音频/ogg  -- 仅限Firefox
            // 演示: simple-demos/isTypeSupported.html
            mimeType: mimeType,

            // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
            // CanvasRecorder, GifRecorder, WhammyRecorder
            recorderType: MediaStreamRecorder,

            // 禁用日志
            disableLogs: true,

            // 获取基于时间间隔的数据块
            // 单位：毫秒
            timeSlice: 1000,

            // 需要上面的timeSlice
            // 通过回调函数返回blob
            ondataavailable: function(blob) {},

            // 如果摄像头停止，自动停止录制
            checkForInactiveTracks: false,

            // 需要上面的timeSlice
            onTimeStamp: function(timestamp) {},

            // 音频和视频轨道都适用
            bitsPerSecond: 128000,

            // 仅适用于音频轨道
            // 当codecs=pcm时被忽略
            audioBitsPerSecond: 128000,

            // 仅适用于视频轨道
            videoBitsPerSecond: 128000,

            // 由CanvasRecorder和WhammyRecorder使用
            // 这有点像“帧速率”
            frameInterval: 90,

            // 如果您正在将多个流录制到单个文件中
            // 这有助于查看正在录制的内容
            previewStream: function(stream) {},

            // 由CanvasRecorder和WhammyRecorder使用
            // 也可以传递{width:640, height: 480}
            video: HTMLVideoElement,

            // 由CanvasRecorder和WhammyRecorder使用
            canvas: {
                width: 640,
                height: 480
            },

            // 由StereoAudioRecorder使用
            // 范围从22050到96000。
            sampleRate: 96000,

            // 由StereoAudioRecorder使用
            // 范围从22050到96000。
            // 让我们强制16khz录制：
            desiredSampRate: 16000,

            // 由StereoAudioRecorder使用
            // 合法值为(256, 512, 1024, 2048, 4096, 8192, 16384)。
            bufferSize: 16384,

            // 由StereoAudioRecorder使用
            // 1或2
            numberOfAudioChannels: 2,

            // 由WebAssemblyRecorder使用
            frameRate: 30,

            // 由WebAssemblyRecorder使用
            bitrate: 128000,

            // 由MultiStreamRecorder使用 - 用于访问HTMLCanvasElement
            elementClass: 'multi-streams-mixer'

        });

      //  alert("video/webm;codecs=h264");

        // 在停止录制时释放摄像头
        recorder.camera = camera;
    });
}
function startRecording(){
    this.style.display = "none";
    stopRecordingBtn.style.display = "block";
    recorder.startRecording();
}
function stopRecording(){
    this.style.display = "none";
    retakeRecordingBtn.style.display = "block";
    saveRecordingBtn.style.display = "block";
    recorder.stopRecording(stopRecordingCallback);
}
function saveRecording(){
    this.innerHTML = '正在保存...';
     // 生成一个随机文件名
    var fileName = getFileName(videoFormat);

    // 我们需要上传“File” --- 不是“Blob”
    var fileObject = new File([blob], fileName, {
         type: 'video/' + videoFormat
    });
    uploadToPHPServer(fileObject, function(response, fileDownloadURL) {
        console.log(response);
    });
}
startCameraBtn.onclick = startCamera;
startRecordingBtn.onclick = startRecording;
stopRecordingBtn.onclick = stopRecording;
retakeRecordingBtn.onclick = startCamera;
saveRecordingBtn.onclick = saveRecording;


function uploadToPHPServer(blob, callback) {
    // 创建FormData
    var formData = new FormData();
    formData.append('video-filename', blob.name);
    formData.append('video-blob', blob);
    callback('上传录制文件到服务器。');

    var upload_url = 'upload_video.php';
    // var upload_url = 'RecordRTC-to-PHP/save.php';

    var upload_directory = upload_url;
    // var upload_directory = 'RecordRTC-to-PHP/uploads/';
                
    makeXMLHttpRequest(upload_url, formData, function(progress) {
        if (progress !== 'upload-ended') {
            callback(progress);
           

<details>
<summary>英文:</summary>

I&#39;m trying to record videos using the RecordRTC library but the issue is that videos recorded in Chrome Macbook do not play in 

-Safari Macbook+iPhone 
-Chrome iPhone

This is the source code using the [RecordRTC](https://github.com/muaz-khan/RecordRTC) and the serie of testings[enter image description here](https://i.stack.imgur.com/Gc5yk.png)

var startCameraBtn = document.querySelector('#start-camera-btn');
var startRecordingBtn = document.querySelector('#start-recording-btn');
var stopRecordingBtn = document.querySelector('#stop-recording-btn');
var retakeRecordingBtn = document.querySelector('#retake-recording-btn');
var saveRecordingBtn = document.querySelector('#save-recording-btn');
var publishJobBtn = document.querySelector('#publish-job-btn');
var video = document.querySelector('video');

var recorder; // globally accessible
var blob;
var mimeType; // "video/webm;codecs=vp9";
var videoFormat; //webm

check_user_browser();

function stopRecordingCallback() {
video.src = video.srcObject = null;
video.muted = false;
video.volume = 1;
blob = recorder.getBlob()
video.src = URL.createObjectURL(blob);

//recorder.camera.stop();
//recorder.destroy();
//recorder = null;

}

function startCamera(){
this.style.display = "none";
saveRecordingBtn.style.display = "none";
startRecordingBtn.style.display = "block";

captureCamera(function(camera) {
video.muted = true;
video.volume = 0;
video.srcObject = camera;
recorder = RecordRTC(camera, {
type: &#39;video&#39;,
// audio/webm
// audio/webm;codecs=pcm
// video/mp4
// video/webm;codecs=vp9
// video/webm;codecs=vp8
// video/webm;codecs=h264
// video/x-matroska;codecs=avc1
// video/mpeg -- NOT supported by any browser, yet
// audio/wav
// audio/ogg  -- ONLY Firefox
// demo: simple-demos/isTypeSupported.html
mimeType: mimeType,
// MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
// CanvasRecorder, GifRecorder, WhammyRecorder
recorderType: MediaStreamRecorder,
// disable logs
disableLogs: true,
// get intervals based blobs
// value in milliseconds
timeSlice: 1000,
// requires timeSlice above
// returns blob via callback function
ondataavailable: function(blob) {},
// auto stop recording if camera stops
checkForInactiveTracks: false,
// requires timeSlice above
onTimeStamp: function(timestamp) {},
// both for audio and video tracks
bitsPerSecond: 128000,
// only for audio track
// ignored when codecs=pcm
audioBitsPerSecond: 128000,
// only for video track
videoBitsPerSecond: 128000,
// used by CanvasRecorder and WhammyRecorder
// it is kind of a &quot;frameRate&quot;
frameInterval: 90,
// if you are recording multiple streams into single file
// this helps you see what is being recorded
previewStream: function(stream) {},
// used by CanvasRecorder and WhammyRecorder
// you can pass {width:640, height: 480} as well
video: HTMLVideoElement,
// used by CanvasRecorder and WhammyRecorder
canvas: {
width: 640,
height: 480
},
// used by StereoAudioRecorder
// the range 22050 to 96000.
sampleRate: 96000,
// used by StereoAudioRecorder
// the range 22050 to 96000.
// let us force 16khz recording:
desiredSampRate: 16000,
// used by StereoAudioRecorder
// Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
bufferSize: 16384,
// used by StereoAudioRecorder
// 1 or 2
numberOfAudioChannels: 2,
// used by WebAssemblyRecorder
frameRate: 30,
// used by WebAssemblyRecorder
bitrate: 128000,
// used by MultiStreamRecorder - to access HTMLCanvasElement
elementClass: &#39;multi-streams-mixer&#39;
});
//  alert(&quot;video/webm;codecs=h264&quot;);
// release camera on stopRecording
recorder.camera = camera;
});

}
function startRecording(){
this.style.display = "none";
stopRecordingBtn.style.display = "block";
recorder.startRecording();
}
function stopRecording(){
this.style.display = "none";
retakeRecordingBtn.style.display = "block";
saveRecordingBtn.style.display = "block";
recorder.stopRecording(stopRecordingCallback);
}
function saveRecording(){
this.innerHTML = 'Saving...';
// generating a random file name
var fileName = getFileName(videoFormat);

// we need to upload &quot;File&quot; --- not &quot;Blob&quot;
var fileObject = new File([blob], fileName, {
type: &#39;video/&#39;.videoFormat
});
uploadToPHPServer(fileObject, function(response, fileDownloadURL) {
console.log(response);
});

}
startCameraBtn.onclick = startCamera;
startRecordingBtn.onclick = startRecording;
stopRecordingBtn.onclick = stopRecording;
retakeRecordingBtn.onclick = startCamera;
saveRecordingBtn.onclick = saveRecording;

function uploadToPHPServer(blob, callback) {
// create FormData
var formData = new FormData();
formData.append('video-filename', blob.name);
formData.append('video-blob', blob);
callback('Uploading recorded-file to server.');

var upload_url = &#39;upload_video.php&#39;;
// var upload_url = &#39;RecordRTC-to-PHP/save.php&#39;;
var upload_directory = upload_url;
// var upload_directory = &#39;RecordRTC-to-PHP/uploads/&#39;;
makeXMLHttpRequest(upload_url, formData, function(progress) {
if (progress !== &#39;upload-ended&#39;) {
callback(progress);
return;
}
var initialURL = upload_directory + blob.name;
callback(&#39;ended&#39;, initialURL);
});

}

        function getRandomString() {
if (window.crypto &amp;&amp; window.crypto.getRandomValues &amp;&amp; navigator.userAgent.indexOf(&#39;Safari&#39;) === -1) {
var a = window.crypto.getRandomValues(new Uint32Array(3)),
token = &#39;&#39;;
for (var i = 0, l = a.length; i &lt; l; i++) {
token += a[i].toString(36);
}
return token;
} else {
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, &#39;&#39;);
}
}


cross browser videos playing and recording
</details>
# 答案1
**得分**: 1
苹果对WebM的支持有限，我认为这些限制尚未在任何地方记录。我的（可能是错误的）理解是：
* VP8在WebRTC轨道上有相当好的支持，但在播放WebM文件时支持有限；
* VP9仅在某些版本的Safari上支持WebRTC轨道；
* WebM在桌面版Safari上受支持，至少支持VP8，也许在某些版本的Safari上也支持VP9；
* iOS版Safari根本不支持WebM，不管使用哪种编解码器。
因此，您有以下解决方案：
* 以H.264格式录制，这在各种设备上得到了良好支持，但可能会迫使您支付许可费用；
* 以带有VP8编解码器的WebM格式录制，并要求您的iOS用户安装第三方视频播放器（如VLC）；
* 继续以带有VP9的WebM格式录制，并声明由于苹果对无专利编解码器的敌对立场，不支持Safari。
<details>
<summary>英文:</summary>
Apple&#39;s support for WebM is sketchy, and I don&#39;t think that the limitations have been documented anywhere.  My (possibly mistaken) understanding is that:
* VP8 is reasonably well supported, but only for WebRTC tracks, not for playing WebM files;
* VP9 is supported for WebRTC tracks on some versions of Safari only;
* WebM is supported on desktop Safari, at least with VP8, perhaps also with VP9 on some versions of Safari;
* iOS Safari does not support WebM at all, whatever the codec.
You therefore have the following solutions:
* record as H.264, which is well-supported across a variety of devices, but might force you to pay a licencing fee;
* record as WebM with the VP8 codec, and require your iOS users to install a third party video viewer (such as vlc);
* continue recording as WebM with VP9, and declare that Safari is not supported due to Apple&#39;s hostile stance against patent-free codecs.
</details>

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

在Safari上无法播放在Chrome上使用Record RTC录制的视频。

问题

定义一个只有一个属性的类型，该属性的名称必须在预定义的名称集中。

从 @RestContoller 使用 JavaScript 获取 JSON 数据

How to make a background blur effect that gradually disappears when closing a pop-up, and similarly a smooth exit animation for said pop-up?

Beginner at Javascript: 如何修复“Hangman Game”中的特定错误？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论